Part 2: Easy Way To Create ReactJS Components
Hi readers, we have already learned in Part 1 how to create a ReactJS App Today we will be learning:
- Introduction (What is a ReactJS Component)
- How to create ReactJS Components (Function and Class Components).
- How to import and Render ReactJS Components.
- How to pass (PROPS) parameters to ReactJS Components
- Glimpse on what we are building today
Quick Links to other ReactJS Tutorials
- Part 1: How to create a new React App | by KIHSA Rai | Medium | Medium
- Part 2: Easy Way To Create ReactJS Components
- How To Create DRAG & DROP Components Using REACT BEAUTIFUL DND Library
For more details please refer the, awesome built, ReactJS documentation : link
1. Introduction
ReactJS architecture allows us to break the entire application into many smaller component parts which make up the whole complex UIs. Components like Class in OOPS are the building block of any ReactJS Application. It is a piece of code that mainly allows code reusability and modularity of the Application.
ReactJS Components are like any other JavaScript functions that takes inputs called Props and based on the inputs decides what should be rendered on the Screen. So, ReactJS allows us to divide the entire application into multiple smaller ReactJS Components and any component can be updated/ removed/ edited/ added independently.
There are two types of ReactJS Components:
- Function Components
- Class Components
2. How To Create ReactJS Components
In Part1 we have just created a simple React App. After running the server this is the default page that is rendered.
As shown in the image we need to edit the file App.js as this is the Root Component for the react app.
If we want to render a List, JSON, Array, etc where the data structure is uniform as a html table and also allow some UI Operations like delete, edit, etc. We can traverse through the data, a standard approach, and extract out the render part as a separate React Component. This allows us to separate concerns, code reusability, modularity, code cleanliness.
Lets create the above example using Class Component then later we will also do the same using the function components.
In ReactJS any Component name should always start from a Upper-Case letter.
2.1 Class Component
Let’s first create a new file for the class Component and add the required code , then clear up the App.js file, and at last import and render it in App.js
// FileName: ClassComponent.jsximport React from 'react';export class ClassComponentTable extends React.Component {
render() {
const UserData = ["Bhanubhakta", "Manisha Koirala", "Narayan Gopal", "Indra Bahadur Rai", "Aruna Lama", "Gopal Yonzon", "Uday Sotang", "Lakshmi Prasad Devkota", "Parijat", "Motiram Bhatta"] return (
<div>
<ol style={{ listStyle: 'none', textAlign: 'left' }}>
<li>
<h3 style={{ color: "#4a4f59" }} >
Class Component
</h3>
</li>
{UserData.map((data, index) => (
<li key={index} className="items">
{data}
</li>
))}
</ol>
</div>
)
}
}
We have created a new file named ClassComponent.jsx where we have created a constant list variable named UserData which has the names of all popular faces of Darjeeling and Nepal. Inside the return statement we are creating a orderedList <ol> DOM element and the list-items <li> elements are created by traversing through the UserData list using React .map() function.
A React ClassComponent must always extend React.Component and must have a return statement inside a render statement. A React Component must always start with a Capital Letter because React treats components starting with LowerCase Letter as DOM Tags.
2.2 Function Components
Function Components are like any other JavaScript functions which may or may not receive parameters, we call it props in ReactJS. But unlike other normal JavaScript functions React Function-Components returns JSX Element.
// FileName: FunctionComponent.jsximport React from 'react';export function FunctionComponentTable() { const UserData = ["Sunil Chettri", "Bhaichung Bhutia", "Prashant Tamang", "Tenzing Norgay", "Namratha Shrestha", "Swastima Khadka", "Sipora Tamang", "Daya Hang Rai", "Yama Buddha", "Jitu Rai"]
return (
<div>
<ol style={{ listStyle: 'none', textAlign: 'left' }}>
<li>
<h3 style={{ color: "#4a4f59" }}>
Function Component
</h3>
</li>
{UserData.map((data, index) => (
<li key={index} className="items">
{data}
</li>
))}
</ol>
</div>
)
}
We have created a new file named FunctionComponent.jsx where we have created a constant list variable named UserData which has the another set of names of all popular faces of Darjeeling and Nepal. Inside the return statement code is similar to Class-Component.
A React Function Component must have a return statement.
3 . How to import and Render ReactJS Components.
In the above section we have created both Class and Function Components Lets import them and render in our App.js .
// FileName: App.js
import './App.css';import React from 'react'import { ClassComponentTable } from "./Part2/ClassComponent";
import { FunctionComponentTable } from "./Part2/FunctionComponent";function App() { const UserData = ["Bhanubhakta", "Manisha Koirala", "Narayan Gopal", "Indra Bahadur Rai", "Aruna Lama", "Gopal Yonzon", "Uday Sotang", "Lakshmi Prasad Devkota", "Parijat", "Motiram Bhatta"] const UserData1 = ["Sunil Chettri", "Bhaichung Bhutia", "Prashant Tamang", "Tenzing Norgay", "Namratha Shrestha", "Swastima Khadka", "Sipora Tamang", "Daya Hang Rai", "Yama Buddha", "Jitu Rai"] const banner = "https://drive.google.com/uc?export=view&id=1A2gCRLZBSBvPveVJ5OE0F4psbi9V7JLS" return (
<div className="App">
<header className="App-header">
<h1>Part 2: Easy Way to Create ReactJS Components</h1>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0% 2% 0% 2%' }}>
<div style={{ width: '40%' }}>
<img src={banner} alt="logo" style={{ width: '100%', height: 'auto' }} />
<div>
<p style={{ color: '#5c636f', fontWeight: 700, textAlign: 'left' }}>
Class Component Data
</p>
<textarea readOnly style={{ resize: 'none', width: '100%', background: '#5c636f', color: 'white', fontSize: '17px' }} value={UserData} />
<p style={{ color: '#5c636f', fontWeight: 700, textAlign: 'left' }}>
Function Component Data
</p>
<textarea readOnly style={{ resize: 'none', width: '100%', background: '#5c636f', color: 'white', fontSize: '17px' }} value={UserData1} />
</div>
</div>
<div style={{ display: 'flex', width: '60%', alignItems: 'center', justifyContent: 'center' }}>
<div style={{ width: '50%', }}>
<ClassComponentTable />
</div>
<div style={{ width: '50%', }}>
<FunctionComponentTable />
</div>
</div>
</div>
</header>
</div>
);
}export default App;
In the beginning we have four imports first two are standard imports in a ReactApp in the third import
import { ClassComponentTable } from "./Part2/ClassComponent";
we are importing ClassComponentTable from file ClassComponent and in the fourth import we are importing FunctionComponentTable.
import { FunctionComponentTable } from "./Part2/FunctionComponent";
We also have two constant lists named UserData and UserData1 which has same data as in Class and Function Component. The variable banner has a Google Drive Link ( you can change the image if you want). We are printing the UserData and UserData1 in a textarea and finally in the last div section we have rendered the imported Class and Function Components.
In the later post we will use the textarea to remove and add names in the Class and Function Components List using Props and some other little advance concepts.
4. How to pass (PROPS) parameters to ReactJS Components
We have defined a textarea in App.js which we will use later to add, edit, and remove names from Class and Function Components. To facilitate such operations we need the data in App.js so we have created two constant variables UserData1 and UserData2. We also have defined the same data inside both of the Components because we need to data to render. However there is an unnecessary repetition of data it would be better if App.js and Function/Class Component can share the same data. Doing so not only we will remove unnecessary data repetition but the action of adding, editing and deleting names using textarea from App.js becomes more efficient and easy.
This can be done if we pass the data from App.js to both components as a parameter to be more precise as a props. props stands for term properties.
We can change the code in App.js to
Change <ClassComponentTable/> to 👇
<ClassComponentTable UserData={UserData}/>
and change <FunctionComponentTable/> to 👇
<FunctionComponentTable UserData={UserData1}/>
Change the code in ClassComponent.jsx to
Change
{UserData.map((data, index) => (
<li key={index} className="items"> {data}</li>
))} to 👇{this.props.UserData.map((data, index) => (
<li key={index} className="items"> {data}</li>
))}
Change the code in FunctionComponent.jsx to
// FileName: FunctionComponent.jsximport React from 'react';export function FunctionComponentTable(props) {
return (
<div>
<ol style={{ listStyle: 'none', textAlign: 'left' }}>
<li>
<h3 style={{ color: "#4a4f59" }}>
Function Component
</h3>
</li>
{props.UserData.map((data, index) => (
<li key={index} className="items">
{data}
</li>
))}
</ol>
</div>
)
}
5. Glimpse on what we are building today
So, today we have learned couple of things such as:
- What is a React Component, Functional and Class Components.
- How to create Functional and Class Components.
- How to import and Render Functional and Class Components
- How to pass props and access it inside Functional and Class Components
In this tutorial we have successfully created a React App with Components that looks like this 👇.
Code for this part can be found in branch name BlogPart2:ReactJS-Ashik/ReactJS-Tutorial at BlogPart2 (github.com)
For full code please look into the github link: ReactJS-Tutorial/react-js-tutorial/src/Part2 at main · ReactJS-Ashik/ReactJS-Tutorial (github.com)
If you want only the code developed in this part please checkout to the branch BlogPart2 in the same repository.
Previous Post: How to create a new React App Explained in simple steps
Read more of my articles on React App Development and other awesome React packages
Part 1: How to create a new React App | by KIHSA Rai | Medium | Medium
Part 2: Easy Way To Create ReactJS Components
How To Create DRAG & DROP Components Using REACT BEAUTIFUL DND Library
Learning ReactJS: Two-Way Data Binding | by KIHSA Rai | May, 2022 | Medium