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

## Prerequisites

1. Install NodeJs.

   * On Ubuntu.

   ```bash
   apt install node
   ```

2. Install NPM.

   * On Ubuntu.

   ```bash
   apt install npm
   ```

3. Install required libraries.

   ```bash
   npm install react react-dom

   npm install yarn
   ```

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

## Procedure

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

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

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

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

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

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

7. Build the component.

   ```bash
   npm run build
   ```

8. 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)