DEV Community 👩‍💻👨‍💻

Ada Cheng
Ada Cheng

Posted on • Updated on

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.

Table of Contents

Prerequisites

  1. Install required libraries

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

Procedures

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

  5. Repeat steps 3 - 5 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

Top comments (0)

19 Valuable Github Repositories for Beginners

>> Check out this classic DEV post <<