Part 2: Easy Way To Create ReactJS Components

KIHSA Rai

Published in

Nerd For Tech

7 min readJul 27, 2021

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.

List Rendered using Function and Class Components

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