In this article, I’ll walk you through the react components; how to create and render them.
React components are the parts and parcel of any react app without which you can’t build highly interactive react-driven applications.
You can unleash the reusability features of the React via components. With the help of components, we can segregate UI into independent and reusable pieces.
A basic react component is a merger of:
- HTML Template
- CSS styling
- User Interactivity leveraging the prominent event-driven programming language JavaScript
A typical React-driven application might have many components like header component, navbar component, footer component, and content component.
So, What is React Component?
Simply speaking, the component is a JavaScript class or function that accepts user input in the form of props and returns a React element that specifies how a particular portion of UI will look like. A component can be categorized as a function or class component.
In order to practice creating a react component, first open your VS code and run the project which we’ll create in this tutorial using the NodeJS command prompt. In this example, we’ll be creating a React component that will take an object as an input and returns a container comprises of all the essential information about a student.
function Student (data){
return<div><p>Name:{data.name} </p>
<p>Gender: {data.gender} </p></div>;
}
This is how a component looks like and you can call the above component by writing:
const element = <Student name=’Walid’ gender=’male’>
Besides, this element can be rendered using the following code:
ReactDOM.render(element, document.getElementById(‘root’));
We can also use the arrow function to define a function. Let’s just redefine the above code using an arrow function:
const Student = (data) =>{
return<div><p>Name: {data.name} </p>
<p> Gender :{data.gender}</p></div>;
}
Note: It is strongly recommended to always start a component with an uppercase letter. Those components starting with a lowercase letter, React treats them as DOM tags. For instance, react compiler envisages <div /> tag as an HTML tag, but <Employee/> as a component.
Suppose that along with the student detail, we would like to display student roll number as well. One way of displaying student roll no is to write a code for that in the student component. It is always regarded as the best coding practice to put all the details in component, but in order to improve code reusability, we always split details into different components.
That being said, create a new component in the same code and name it RollNumber which will display student roll number information. This component is readily available to other components of the same code.
const Student = (data) =>{
return (<div><p>Name:{data.name}</p>
<p>Gender: {data.gender}</p>
<RollNumber rollno={data.rollno} />
</div>);
}
const RollNo = (rollinfo) =>{
return<div><p>Student's roll number is: <b>{rollinfo.rollno}</b></p></div>
}
const element = <Student name='saad' gender='male' rollno='123456' />
ReactDOM.render(element,document.getElementById('root'));
So far we’ve discussed function components in our tutorial. Now we’ll head over to the class components.
Defining Class Components in React
As we’ve discussed at the very beginning of this tutorial, React allows us to define components as function or class. We’ve already discussed function component in the preceding portion of these tutorials and in this portion we’ll be discussing class component.
In order to create a class component, we first need to define a class and then extend React.Component class. To keep that in perspective, let’s suppose we want to create a Student Component and this component returns an element that displays all the details related to a student.
To do so, create a Student class in our index.js file and extends React.Component. The output of any class component solely relies on the return value of the method called render(). The only method that needs to be implemented in the class component is the render method.
To display all the student details like Student’s name, roll number, and gender, let’s create a div element and return div from this method. In react, this.props is used to access the attribute that will be passed to this component class. This.props comprises of the props defined by the caller of this component.
class Student extends React.Component{
render(){
return<div>
<h1> Student Details...</h1>
<p>
<label>Name :<b>{this.props.Name}</b></label>
</p>
<p>
<label>Gender :<b>{this.props.Gender}</b></label>
</p>
</div>;
}
}
You can call and render this class component in a similar way you did with function component
const element = <Student Name=’waleed’ Gender=’male’ /> ReactDOM.render(element, document.getElementById(‘root’));
Let’s save these all changes, navigate to the browser, and see how the output looks like.
import React from 'react';
import ReactDOM from 'react-dom';
class Student extends React.Component{
render(){
return<div>
<h2>Student Details...</h2>
<p>
<label>Name :<b>{this.props.Name}</b></label>
</p>
<p>
<label>Gender :<b>{this.props.Gender}</b></label>
</p>
<p>
<label>Roll Number :<b>{this.props.Rollno}</b></label>
</p>
</div>;
}
}
const element=<Student Name="Pragim" Gender='Male' Rollno='134566' />
ReactDOM.render(element,document.getElementById("root"));
Whether we declare a component in the form of class or a function, it must never modify its own props.
Up until now, we’ve learned how to create a function or a class component. Now the obvious question that must be coming your mind here when to use function or class to define a component?
As a general rule of thumb, when we are expecting specific features like:
- Managing State of the Components
- Incorporating Life Cycle Methods to the components
- Need to code logic for a specific event handler
In all of these aforementioned scenarios, we prefer using class component whereas in the rest of the cases we prefer using function component.