Develop a React Component using create-react-library template

Photo by Hans-Peter Gauster on Unsplash

Develop a React Component using create-react-library template

Ada Cheng's photo
Ada Cheng
·Dec 23, 2021·

2 min read

Table of contents

  • Prerequisites
  • Procedure
  • References

In this article, I would like to document how I created a React component and published it.

Prerequisites

  1. Install NodeJs.

    • On Ubuntu.
    apt install node
    
  2. Install NPM.

    • On Ubuntu.
    apt install npm
    
  3. Install required libraries.

    npm install react react-dom
    
    npm install yarn
    
  4. Register a free account in npm, Inc.

Procedure

  1. Use the create-react-library to create a template.

    npm install -g create-react-library && create-react-library
    

    Answer to questions:

    Package Name reactjs-tabbedpane-component

    Package Description A tabbed pane component using React.js

    Author's GitHub Handle adafycheng

    GitHub Repo Path adafycheng/reactjs-tabbedpane-component

    License MIT

    Package Manager yarn

    Template default

  2. Modify src/index.js.

     import React from 'react'
     import styles from './styles.module.scss'
     import $ from 'jquery'
    
     const TabbedPaneComponent = ({ data }) => {
       $(function () {
       // read the input JSON content
         if (data !== undefined) {
           for (let i = 0; i < data.contents.length; i++) {
             const newDiv = $('<div class=' + styles.navbar + '></div>')
             const newAnchor = $('<a class="paneLink"></a>')
               .text(data.contents[i].subject)
               .attr('data-text', data.contents[i].text)
             newDiv.append(newAnchor)
             newAnchor.click(function () {
               $('#paneContentDiv').html($(this).data('text'))
             })
             $('#navbarDiv').append(newDiv)
           }
           if (data.contents.length > 0) {
             // Get the first link and click.
             $('.paneLink:first').click()
           }
         }
       })
    
       return (
         <div id='pane' className={styles.pane}>
           <div id='navbarDiv' />
           <div id='paneContentDiv' className={styles.paneContent} />
         </div>
       )
     }
    
     export default TabbedPaneComponent
    
  3. Modify example/src/App.js for testing.

     import React from 'react'
    
     import TabbedPaneComponent from 'reactjs-tabbedpane-component'
     import 'reactjs-tabbedpane-component/dist/index.css'
    
     const contentData = {
       contents: [
         {
           subject: 'Overview',
           text: 'This is content of <a href="#">Overview</a>.'
         },
         {
           subject: 'Assumptions',
           text: '<ul><li>Assumption 1</li><li>Assumption 2</li><li>Assumption 3</li><li>Assumption 4</li></ul>'
         },
         {
           subject: 'Technical Design',
           text: 'This is content of Technical Design.'
         },
         {
           subject: 'Data Design',
           text: 'This is content of Data Design.'
         },
         {
           subject: 'Conclusion',
           text: 'This is content of Conclusion.'
         }
       ]
     }
    
     const App = () => {
       return <TabbedPaneComponent data={contentData} />
     }
    
     export default App
    
  4. To test,

    In one terminal,

    cd reactjs-tabbedpane-component && yarn start
    

    In another terminal,

    cd reactjs-tabbedpane-component/example && yarn start
    

    View the component using browser at localhost:3000.

  5. Repeat steps 2 - 4 for any code changes.

  6. To publish, update package.json for versions.

    {
      "name": "reactjs-tabbedpane-component",
      "version": "1.0.8",
      "description": "A tabbed pane component built using React.js",
      "author": "adafycheng",
      "license": "MIT",
      "repository": "adafycheng/reactjs-tabbedpane-component",
      "main": "dist/index.js",
      "module": "dist/index.modern.js",
      "source": "src/index.js"
    }
    
  7. Build the component.

    npm run build
    
  8. Publish the component.

    npm publish
    

References

  1. Create React App
  2. Source code in GitHub
  3. Published component
 
Share this