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

Install NodeJs.
- On Ubuntu.
```
apt install node
```
Install NPM.
- On Ubuntu.
```
apt install npm
```

Install required libraries.

npm install react react-dom

npm install yarn

Procedure

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

Build the component.
```
npm run build
```
Publish the component.
```
npm publish
```

Develop a React Component using create-react-library template

Comments

Software Development

Java Microservice on Google Kubernetes Engine (GKE) Cluster

More from this blog

Configure Environment Variables in JUnit Tests

RequestsDependencyWarning: Unable to find acceptable character detection dependency (chardet or charset_normalizer)

Kafka Basics

Spring Boot Application fails to start since it fails to load region from system settings when AWS STS module is included

Trivy - Image Scanning Tool

Prerequisites

Procedure

References

Command Palette

Comments

Software Development

Java Microservice on Google Kubernetes Engine (GKE) Cluster

More from this blog

Prerequisites

Procedure

References