React Components
React Components are the building blocks of ReactJS application. They help to break the user interface into smaller, reusable chunks, making the code easier to manage and maintain. Components can be class-based or function-based, and each type plays an important role in building dynamic and interactive web applications.
In this article, we’ll explore the types of React components, how to create them, and their importance in modern web development.
What are React Components?
A React component is a JavaScript function or class that returns a React element, describing how a section of the UI (User Interface) should appear. Components can manage their own state and receive data as props, making it possible to create reusable and dynamic UI elements.
In simpler terms, a React component is like a JavaScript function that returns HTML-like code (JSX) to render something on the web page.
You can see in the below image we have broken down the UI of GeeksforGeeks’s homepage into individual components.
To further solidify your understanding of components and their role in React, consider enrolling in the React JS Course offered by GeeksforGeeks. This comprehensive course dives deep into component architecture, state management, and lifecycle methods, providing you with a well-rounded skill set. Through hands-on projects and real-world applications, you’ll gain the practical experience needed to build robust, high-performance React applications.
Components in React return a piece of JSX code that tells what should be rendered on the screen.
Types of Components in React
In React, we mainly have two types of components:
Functional Component in React
Functional components are just like JavaScript functions that accept properties and return a React element.
We can create a functional component in React by writing a JavaScript function. These functions may or may not receive data as parameters, we will discuss this later in the tutorial. The below example shows a valid functional component in React:
Syntax:
function demoComponent() {
return (<h1>
Welcome Message!
</h1>);
}
Example: Create a function component called welcome.
JavaScript
function welcome() {
return <h1>Hello, Welcome to GeeksforGeeks!</h1>;
}
Class Component in React
The class components are a little more complex than the functional components. A class component can show inheritance and access data of other components.
Class Component must include the line “extends React.Component” to pass data from one class component to another class component. We can use JavaScript ES6 classes to create class-based components in React.
Syntax:
class Democomponent extends React.Component {
render() {
return <h1>Welcome Message!</h1>;
}
}
The below example shows a valid class-based component in React:
Example: Create a class component called welcome.
Recommended by LinkedIn
class Welcome extends Component {
render() {
return <h1>Hello, Welcome to GeeksforGeeks!</h1>;
}
}
The components we created in the above two examples are equivalent, and we also have stated the basic difference between a functional component and a class component. We will learn about more properties of class-based components in further tutorials.
Functional Component vs Class Component
A functional component is best suited for cases where the component doesn’t need to interact with other components or manage complex states. Functional components are ideal for presenting static UI elements or composing multiple simple components together under a single parent component.
While class-based components can achieve the same result, they are generally less efficient compared to functional components. Therefore, it’s recommended to not use class components for general use.
Rendering React Components
Rendering Components means turning your component code into the UI that users see on the screen.
React is capable of rendering user-defined components. To render a component in React we can initialize an element with a user-defined component and pass this element as the first parameter to ReactDOM.render() or directly pass the component as the first argument to the ReactDOM.render() method.
The below syntax shows how to initialize a component to an element:
const elementName = <ComponentName />;
In the above syntax, the ComponentName is the name of the user-defined component. Note: The name of a component should always start with a capital letter. This is done to differentiate a component tag from an HTML tag.
Example: This example renders a component named Welcome to the Screen.
// Filename - src/index.js:
import React from "react";
import ReactDOM from "react-dom";
// This is a functional component
const Welcome = () => {
return <h1>Hello World!</h1>;
};
ReactDOM.render(
<Welcome />,
document.getElementById("root")
);
Output: This output will be visible on the http://localhost:3000/ on the browser window.
Explanation:
Let us see step-wise what is happening in the above example:
Props
Example:
// Filename - src/index.js:
import React from "react";
import ReactDOM from "react-dom";
const Greet = () => {
return <h1>Hello Geek</h1>
}
// This is a functional component
const Welcome = () => {
return <Greet />;
};
ReactDOM.render(
<Welcome />,
document.getElementById("root")
);
The above code will give the same output as other examples but here we have called the Greet component inside the Welcome Component.
For more information on components open Component Set 2
Conclusion
Components in React allow developers to divide the page UI into many small parts. These parts work independently and can be used multiple times just like functions.
This tutorial introduces you to the concept of components. We have discussed types of components and their purpose in web development. This guide will help you understand web UI and how can you create visually appealing web UI.
Want to read more such articles...follow me ASIF ALI