React Components: Types Of React Components, Functional And More
React components are the crux of our technology, allowing developers to create modular, reusable, and efficient code. With over 40% of developers worldwide using React framework in a 2022 survey, this JavaScript library has become an indispensable tool. They allow developers to create engaging and interactive user interfaces for applications. In this blog post, we will learn about components in React, the difference between class and functional components, and the React component lifecycle.
React Overview
React, developed by Facebook in 2011, is a widely-used JavaScript library. It is increasingly becoming a robust and versatile tool for building web applications.
One of the core principles of React is its component-based architecture. This architecture promotes reusability and modularity. It also allows breaking complex UI into smaller components to build complete applications. It not only improves code maintainability but also accelerates the development process.
React is used across various applications, such as web, mobile, and desktop. Additionally, it can create complex single-page applications (SPAs) and progressive web applications (PWAs).
What are React Components?
Components are the essential building blocks in React. They represent a reusable code segment. They are the foundation for modular, maintainable, and scalable applications. In the past, creating a single-page application involved writing thousands of code lines, following the conventional DOM structure. This made it tough to make changes and required manual error fixing.
To tackle this problem, a component-based method was introduced. This approach breaks down the entire app into smaller code groups called components. They form the fundamental building elements of a React application, making user interface creation more straightforward. All components function independently and are combined in a parent component to create the final application interface.
Also Read: React Lifecycle Methods
Types Of Components In React
React offers two component types: class components and functional components.
1. Class Components
Class components are JavaScript classes that extend React component class. They possess a render method, which returns the HTML to be shown. Class components feature state and lifecycle methods, enabling them to manage their state and react to component changes.
Here’s how you can create a class component:
import React, { Component } from ‘react’;
class Welcome extends Component {
render() {
return <h1>Internshala Training, {this.props.name}</h1>;
}
}
export default Welcome;
The class component is often called a stateful component due to its capacity for managing and storing local state. The following example demonstrates this concept:
Now, let’s look at an example of class components.
import React, { Component } from ‘react’;
class Training extends React.Component {
constructor() {
super();
this.state = {
data:
[
{
“name”:”Web Development”
},
{
“name”:”C and C++”
},
{
“name”:”Python”
},
{
“name”:”Machine Learning”
}
]
}
}
render() {
return (
<div>
<Courses/>
<ul>
{this.state.data.map((item) => <List data = {item} />)}
</ul>
</div>
);
}
}
class Courses extends React.Component {
render() {
return (
<div>
<h1> Courses to Learn</h1>
</div>
);
}
}
class List extends React.Component {
render() {
return (
<ul>
<li>{this.props.data.name}</li>
</ul>
);
}
}
export default Training;
If you follow the above code correctly, its output should look like this:
2. Functional Components
Functional components are less complex than class components. They are simple JavaScript functions. These components accept props as arguments and return the HTML to be displayed. They do not have state or lifecycle methods, which makes them faster and easier to test. Creating a react functional component is very simple. Here is an example of a functional component:
import React from ‘react’;
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
export default Welcome;
The functional component, also called a stateless component, does not maintain or handle state. The following example demonstrates this concept:
import React, { Component } from ‘react’;
class App extends React.Component {
render() {
return (
<div>
<First/>
<Second/>
</div>
);
}
}
class First extends React.Component {
render() {
return (
<div>
<h1>Internshala Training</h1>
</div>
);
}
}
class Second extends React.Component {
render() {
return (
<div>
<h2>Learn React Components</h2>
<p>This is an example of a functional component.</p>
</div>
);
}
}
export default App;
It will show the output as this:
Features of React
Here are some key features of React:
1. Virtual DOM
React uses a Virtual DOM, which allows it to update the UI efficiently. However, it only updates the parts of the DOM that have changed.
2. Component-Based Architecture
React has a component-focused structure, enabling developers to divide a user interface into small, reusable elements. This simplifies the process of managing and maintaining the codebase.
3. One-Way Data Flow
React relies on a unidirectional data flow, meaning data moves in only one direction. This streamlines application state management and avoids unforeseen state changes.
4. JSX Syntax
React incorporates JSX syntax, a blend of JavaScript and HTML. It permits developers to write code resembling HTML but functioning as JavaScript.
Advantages of Using Components in React
The following are the advantages of using components in React. You can learn more about React through this in-depth React JS Course.
1. Reusability
Components are reusable, which means that they can be used multiple times throughout an application. This makes it easier to manage and maintain the codebase.
2. Separation of Concerns
Components allow developers to separate the logic and the presentation of the user interface. It helps in managing and maintaining the codebase easily.
3. Easy to Maintain
Components are easy to maintain because they are isolated from the rest of the application. This means that changes can be made to a component without affecting the rest of the application.
4. Easy to Test
Components are easy to test because they are isolated from the rest of the application. This means that tests can be written for a component without affecting the rest of the application.
Differences Between Class Components and Functional Components
Here are some differences between class components and functional components:
| Class Components | Functional Components | |
| Syntax | Defined using ES6 class syntax. | Defined using JavaScript functions. |
| State | Have their own internal state managed using this.setState. | Do not have their own internal state, but can use the useState hook to manage state. |
| Props | Use this to access props, state, and other instance methods. | Use props and other arguments passed to them as function parameters. |
| Render | Use the render method to output the JSX to be rendered to the DOM. | Return the JSX to be rendered to the DOM. |
| Lifecycle Methods | Have access to lifecycle methods such as componentDidMount, componentDidUpdate, componentWillUnmount, etc. | Do not have access to lifecycle methods. But can Use the useEffect hook to perform side effects. |
| Usage | Generally used for more complex components that require state or lifecycle methods. | Generally used for simpler components that don’t require state or lifecycle methods. |
Join our full stack developer course with placement guarantee today and lock in your internship along with a guaranteed total stipend of 35,000!
Conclusion
React components are the key feature of React JS library, which allow developers to break down a user interface into small, reusable pieces of code. Owing to its capabilities and increasing prominence, React is expected to maintain a significant position in the web development field for the foreseeable future.
