Develop a React Component using create-react-library template

This content originally appeared on DEV Community and was authored by Ada Cheng

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

Prerequisites

i. Install required libraries
```
npm install react react-dom

npm install yarn
```
ii. Register a free account in npm, Inc.
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"
}

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

References

This content originally appeared on DEV Community and was authored by Ada Cheng

Print Share Comment Cite Upload Translate Updates

APA

Ada Cheng | Sciencx (2021-12-23T23:10:12+00:00) Develop a React Component using create-react-library template. Retrieved from https://www.scien.cx/2021/12/23/develop-a-react-component-using-create-react-library-template/

MLA

" » Develop a React Component using create-react-library template." Ada Cheng | Sciencx - Thursday December 23, 2021, https://www.scien.cx/2021/12/23/develop-a-react-component-using-create-react-library-template/

HARVARD

Ada Cheng | Sciencx Thursday December 23, 2021 » Develop a React Component using create-react-library template., viewed ,<https://www.scien.cx/2021/12/23/develop-a-react-component-using-create-react-library-template/>

VANCOUVER

Ada Cheng | Sciencx - » Develop a React Component using create-react-library template. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/23/develop-a-react-component-using-create-react-library-template/

CHICAGO

" » Develop a React Component using create-react-library template." Ada Cheng | Sciencx - Accessed . https://www.scien.cx/2021/12/23/develop-a-react-component-using-create-react-library-template/

IEEE

" » Develop a React Component using create-react-library template." Ada Cheng | Sciencx [Online]. Available: https://www.scien.cx/2021/12/23/develop-a-react-component-using-create-react-library-template/. [Accessed: ]

rf:citation

» Develop a React Component using create-react-library template | Ada Cheng | Sciencx | https://www.scien.cx/2021/12/23/develop-a-react-component-using-create-react-library-template/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

References

Related Posts