Develop a React Component using create-react-library template

#react #node #javascript

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

Prerequisites
Procedures
References

Prerequisites

Install required libraries

npm install react react-dom

npm install yarn

Procedures

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

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

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

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

Repeat steps 3 - 5 for any code changes.

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