With a staggering 40.41% of software developers worldwide actively utilising React JS for web development, it has undoubtedly secured its place as one of the most sought-after web frameworks in the industry worldwide.
At the core of React.js lies the concept of components, the building blocks that bring the user interface to life. This framework treats every element as a distinct web page component, thoughtfully organised to craft a seamless UI.
Regardless of the nature of your React application, components take centre stage as the backbone of the entire structure. Each React app is strategically pieced together with numerous components, with the user interface being the most crucial. React effortlessly segregates the UI into reusable components, each capable of functioning independently.
This unique approach ensures that all visual aspects of the software are encapsulated within a React component, effectively transforming it into a self-contained module. Unlike traditional templates, React’s functionality is defined in JavaScript, resulting in richer data while keeping the state outside of the DOM. Even plain HTML tags metamorphose into individual React components by default, elevating the efficiency and versatility of the development process.
Example demonstrating the use of React component:
import React from ‘react’
import ReactDOM from ‘react-dom’
ReactDOM.render(<h1>Good Morning</h1>, document.getElementById(‘abc’))
ReactDOM.render(
React.DOM.h1(null, ‘Good Morning’),
document.getElementById(‘abc’)
)
In the above program, React.DOM provides an h1 component with a ‘Good Morning’ message into an element with id ‘abc’. If you want to inspect the React.DOM offerings, you can type it in the browser console.
While the built-in React components serve a purpose, you might soon find yourself surpassing their capabilities. React empowers you to craft a dynamic UI by seamlessly designing custom components tailored to your specific demands.
With this flexibility, you can truly unleash the potential of React and create a more personalised and powerful user experience.
Custom components in React.js
You can define a custom component in React.js using the following two ways:
i. A function component:
const BlogDescription = () =>
{
return (
<div>
<h1>Blog Title</h1>
<p>Blog Description</p>
</div>
)
}
ii. A class component
import React, { Component } from ‘react’
class BlogDescription extends Component
{
render()
{
return (
<div>
<h1>Blog Title</h1>
<p>Blog Description</p>
</div>
)
}
}
Until now, React allowed you to define a component that possessed its own state through class components only. Class components could access lifecycle methods, enabling you to control when the components were initially rendered, updated, or unmounted.
However, with the introduction of React Hooks, the landscape has changed. Function components are now more feature-rich, offering similar capabilities and improved simplicity. While class components remain valid for creating components, their usage may decline in the future as function components gain popularity for their enhanced flexibility and ease of use.
Functional Components
Functional components are one of the most famous React components. They are quite identical to JavaScript functions. You simply need to write a JavaScript function to create a React functional component. Passing data as parameters to these functions is not mandatory. These components return value in the JSX code that renders to the DOM tree.
Class Functions
The class components are harder to understand than the functional components. In any React program, the functional components are unrelated to each other, whereas the React class components can work collectively.
You can use JavaScript ES6 classes to create class functions in React. These functions allow you to send information from one class component to another. Here’s a React example demonstrating a valid class component:
class Samplecomponent extends React.Component
{
render(){
return <h1>We will learn React</h1>;
}
Interaction of ReactJS components
All React apps are composed of parts that function collectively. In the UI architecture, it is important to consider how those parts collaborate. If your React app becomes bigger and more complex, the demand for components’ interaction becomes even more significant.
Various ways are prevalent to handle React interaction, where each way has its unique use case. Let’s understand these ways in-depth:
i. Child to Parents with Functional Props
When using this approach, if you attempt to modify a child’s prop directly, you will get an error message in the console. The error message implies the inability to read only the property of a specific object.
ii. Parent-to-child with props
Properties (commonly known as “props”) are the simplest way for React components to communicate with each other. They work as the arguments that a parent component assigns to a child component. Their working is identical to function arguments.
iii. Communicating with parents
The child components frequently need to convey arguments with their events. You can allow child components to do this by adding arguments to the functional prop callback.
Lifecycle of a React Component
Each React component has its own lifecycle. A component’s lifecycle is defined as the cycle of methods that are called in various stages of the component’s life. Let’s go through the stages of the lifecycle to better understand how they function.
i. Initialization
In this stage, a React component is created with the input Props and default state. It is accomplished in a function Object() { [native code] } of the Component Class. Usually, this happens in the component’s constructor.
ii. Mounting
It denotes the rendering process of the JSX that the render method returns by itself. In this stage, the React component, which was initialised in the first stage, is mounted on the DOM. Subsequently, it is rendered on the webpage for the first time.
This phase contains two predefined functions, i.e., componentWillMount() function and componentDidMount() function.
iii. Updating
In this stage, a component’s props and states are updated. Subsequently, certain user events, like clicking, typing from the keyboard, etc., are performed, triggering a state change, which can lead to updating the component.
iv. Unmounting
This stage discards the component from the page.
Being the building blocks of any React application, you must understand all the fundamental aspects of React.js components. Appropriately using them will help you build a feature-rich application. This can further help to improve the code’s stability and benefit you with code re-usability.
In case you’re looking to further strengthen your React skills, check out React for Absolute Beginners, provided by Eduonix Learning Solutions. The course is a comprehensive guide that covers React’s fundamentals, the coding process, and how React works. It imparts you key aspects of React, including JSX, looping, Bug Fixing, ES, States, libraries, Props, Redux, Actions, and more.
If you want to learn to build your first React component and subsequently build your app using React, then this course is for you!