Develop a React Component using create-react-library template
Tags: react, node, javascript
Published: 2021-12-23 23:10:12

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

## Table of Contents
* [Prerequisites](#prerequisites)
* [Procedures](#procedures)
* [References](#references)

## Prerequisites

1. Install required libraries

    ```bash
    npm install react react-dom

    npm install yarn
    ```

1. Register a free account in [npm, Inc.](https://www.npmjs.com/)

## Procedures

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

    ```bash
    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

1. Modify src/index.js

    ```jsx
    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
    ```

1. Modify example/src/App.js for testing

    ```jsx
    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
    ```

1. To test,

    In one terminal,

    ```bash
    cd reactjs-tabbedpane-component && yarn start
    ```

    In another terminal,

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

    View the component using browser at http://localhost:3000/.

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

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

    ```json
    {
      "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"
    }
    ```

1. Build the component.

    ```bash
    npm run build
    ```

1. Publish the component.

    ```bash
    npm publish
    ```

## References
1. [Create React App](https://create-react-app.dev/docs/documentation-intro)
2. [Source code in GitHub](https://github.com/adafycheng/reactjs-tabbedpane-component)
3. [Published component](https://www.npmjs.com/package/reactjs-tabbedpane-component)