Develop a React Component using create-react-library template

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

1. Prerequisites

   i. Install required libraries
   

   npm install react react-domnpm install yarn

   ii. Register a free account in npm, Inc.

2. 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

3. 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

4. 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

5. 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 http://localhost:3000/.

6. Repeat steps 3 - 5 for any code changes.

7. 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"}

8. Build the component.
   

   npm run build

9. Publish the component.
   

   npm publish

References

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