How to Easily Use a Single React Component from PrimeReact’s Library

Learn how to easily consume a single chart React component from PrimeReact’s library, without “committing yourself” to the entire library

In this post, we will take one component from Bit’s PrimeReact collection and demonstrate reusing it in two separate React apps.

Nodejs: As everything is based on Nodejs, we have to download and install the Nodejs binaries on our machine. This is the main software we will need. If you don’t have it installed on your machine, Go to Node js download page and download the binary compatible to your machine’s OS.

NPM: This is the most widely used Node Package manager in the world right now. You don’t have to install it separately, it comes with the Nodejs binary.

create-react-app: This is the React CLI utility provided by Facebook that allows us to seamlessly scaffold React projects.

Install create-react-app globally:

npm i create-react-app -g

PrimeReact — Chart (Marvel Movies Income)

We will be using the chart component from Bit’s PrimeReact collection to display the gross income of all Marvel movies in a bar-chart, in our React app.

First, we scaffold a React project:

create-react-app react-bit

This creates a React project with the name react-bit . Next, we move into the directory react-bit :

cd react-bit

Then, install the Chart component:

// NPM option

npm i @bit/primefaces.primereact.chart // yarn option

yarn add @bit/primefaces.primereact.chart // Bit option (allows you to also develop the component)

bit import primefaces.primereact/chart

In the package.json dependencies section we will see the primefaces.primereact.chart installed:

// ...

"dependencies": {

"@bit/primefaces.primereact.chart": "^3.1.0",

"react": "^16.7.0",

"react-dom": "^16.7.0",

"react-scripts": "2.1.2"

},

// ...

This is the data that we want to render:

Marvel Movie | Income

---------------------

'Hulk' | 650

'Captain America: The First Avenger' | 590

'Iron Man' | 800

'Thor' | 810

'Captain America: Winter Soldier', 560

'Thor: Dark World' | 550

'Iron Man II' | 390

Now, we create a ChartPrime component:

touch src/ChartPrime.js

Paste the following in it:

import React from 'react';

import { Chart } from '@bit/primefaces.primereact.chart'; const data = {

labels: [

'Hulk',

'Captain America: The First Avenger',

'Iron Man',

'Thor',

'Captain America: Winter Soldier',

'Thor: Dark World',

'Iron Man II'

],

datasets: [

{

label: 'Marvel Movies Income',

backgroundColor: '#42A5F5',

data: [650, 590, 800, 810, 560, 550, 390]

}

]

}; function ChartPrime () {

return (

<div style={{ width: 800 }}>

<div className='content-section implementation'>

<h3>Vertical</h3>

<Chart type='bar' data={data} />

</div>

</div>

)

}

export default ChartPrime;

Next, we import ChartPrime in App.js and render it:

import React, { Component } from 'react';

import './App.css';

import ChartPrime from './components/chart.prime' class App extends Component {

render() {

return (

<ChartPrime / >

)

}

} export default App;

Run the command in your terminal:

npm run start