Updated March 23, 2023
Introduction to React JS Components
A component can be defined as a reusable block of code that divides the user interface into smaller parts. Basically, there are two types of components in react JS. Class Components and functional components. Class components are stateful components, whereas functional components are stateless components. Class components are called stateful components because they allow us to do more complex things like react to state management, whereas a stateless component does not provide such capability.
Every application in react can be considered as a collection of components. Components play a major role in user interface designing as a given user interface is broken down into several components. These components can be developed independently and then finally merged to create a final user interface.
Components of React JS
Here are the main types of components in react:
1. Functional Components
Functional components can be considered as simple functions build using javascript. These are stateless components that cannot be used to achieve complex tasks. Functional components can be created using the below syntax:
Syntax:
function Componentname()
{
return <h1>Welcome Text!</h1>;
}2. Class Components
These are more complex components as compared to functional components. Due to their complex nature, they are stateful in nature. Class components can be used whenever state management is required to react. The functional components have no idea about other components present in the application, whereas class components can communicate with other components that their data can be transferred to other components using class components. Creating a class component requires us to create javascript classes.
Syntax:
class Componentname extends React.Component
{
render(){
return <h1>Welcome Text!</h1>;
}
}3. Pure Components
These components are generally used for performance optimization as it reduces the number of operations.
Syntax:
class Componentname extends PureComponent
{
render(){
return <h1>Welcome Text!</h1>;
}
}From the above discussion, it is clear that we will go for functional components only in the case when our component does not need to interact with other components. But when there is a requirement of interaction with other components, then you should use class components. It is worth noting that the use of class components can make our application in-efficient. Therefore you should not use class components without their need.
Examples to Implement React JS Components
Now will cover some examples to provide more clarity on the concept of components is to react.
Example #1
The below example shows a simple functional component and how is it called.
Code:
import React from 'react';
import ReactDOM from 'react-dom';
// functional component
function StartPage()
{
return <h1>Welcome to edubca!</h1>
}
ReactDOM.render(
<StartPage />,
document.getElementById("root")
);The above code is observed that the name of StartPage is the name of the functional component and it starts with a capital letter. The component is called the inside render method. The following output would be produced.
Output:
The following things are taking place in the above example:
- ReactDOM.render is called with the first parameter as a component.
- Call to the given component StartPage takes place which returns <h1>Welcome to edubca! </h1> as output.
- ReactDOM updates the DOM container and renders the output to the DOM element with id ‘root’.
Example #2
Now we will cover another example showing the use of the class components.
Code:
import React from 'react';
import ReactDOM from 'react-dom';
//class component
class Bike extends React.Component {
constructor() {
super();
this.state = {color: "green"};
}
render() {
return <h2>This is a Bike!</h2>;
}
}
ReactDOM.render(
< Bike />,
document.getElementById("root")
);The above code shows how a class component is created and called in react. This code will produce the below output.
Output:
Example #3
In this example, we will see how a component can be used in another component. Here is my component namedTestComponent defined as follows:
Code:
import React from 'react';
import ReactDOM from 'react-dom';
class TestComponent extends React.Component {
render() {
return (
<div>This is my TestComponent.</div>
);
}
}
export default TestComponent;Now we want to use this component in another component which is defined as below.
Code:
import TestComponent from './TestComponent ';
class OtherComponent extends React.Component {
render() {
return (
<div>
<div>;Here is other component.</div>
<TestComponent />
</div>
);From the above example, it is clear that a class component can be used directly in another component. It just requires us to import that component. The above code will produce the following output.
Output:
Conclusion
From the above discussion, it is clear that components play a vital role in user interface designing in react. It is important to note that you should prefer to use functional components over class components as they are simpler, testable, better in terms of performance, requires less code, and allows the use of best practices. But class components have their own advantages. Hope this post will make your understanding better regarding react components.
Recommended Articles
This is a guide to React JS Components. Here we discuss the basic concept with the top 3 React JS Components along with their syntax, examples, and code implementation. You can also go through our other suggested articles to learn more –
