ReactJS Components Complete Reference
Last Updated : 24 Mar, 2025
In ReactJS, components are the building blocks that help you create interactive UIs by dividing your app into smaller, reusable pieces of code. Understanding how components work is essential for efficiently developing React applications.
In this article will provide a complete reference to React components, covering their types, usage, and key differences between class and functional components.
What are ReactJS Components?
Components in React are JavaScript functions or classes that return a piece of UI. These components allow developers to build complex UIs from small, isolated, and reusable pieces. React components are the core building blocks for any React application and can manage their state, handle user inputs, and render dynamic content.
Types of React Components
There are two main types of components in React:
- Functional Components
- Class Components
Functional Components
A Functional Component is a simpler and more concise way of writing components in React using JavaScript functions. These components receive props (properties) as an argument and return JSX (JavaScript XML) to define the UI structure.
JavaScript import React, { useState } from 'react'; const Welcome = () => { const [message, setMessage] = useState("Hello, World!"); return ( <div> <h1>{message}</h1> <button onClick={() => setMessage("Hello, React!")}> Change Message </button> </div> ); }; export default Welcome; Output
Functional Components In this code
useState is used to manage the message state, initially set to "Hello, World!".- The
button click triggers setMessage, which updates the message state to "Hello, React!". - The component displays the
message in an <h1> element and updates it when the button is clicked.
Class Components
Class components in React are ES6 classes that extend the React.Component class. They are used for creating components that need to have their own state or lifecycle methods. While functional components are now the go-to choice for many developers (especially with the introduction of hooks like useState and useEffect), class components still have their place and provide a more traditional way of handling component logic in React.
JavaScript import React, { Component } from 'react'; class Counter extends Component { constructor(props) { super(props); this.state = { count: 0 }; } increment = () => { this.setState({ count: this.state.count + 1 }); }; decrement = () => { this.setState({ count: this.state.count - 1 }); }; render() { return ( <div> <h1>Counter: {this.state.count}</h1> <button onClick={this.increment}>Increment</button> <button onClick={this.decrement}>Decrement</button> </div> ); } } export default Counter; Output
Class Components in ReactIn this code
- state: The counter (count) is initialized to 0 in the constructor.
- increment and decrement: These methods update the count state by 1 when the respective buttons are clicked.
- render: Displays the current count and two buttons to increment or decrement the counter.
Difference between Class component and Functional component
Feature | Functional Components | Class Components |
|---|
Definition | A function that returns JSX. | A class that extends React.Component and has a render() method. |
State | Can use state via hooks like useState. | Can manage state using this.state and this.setState(). |
Lifecycle Methods | No lifecycle methods (use useEffect hook). | Uses lifecycle methods like componentDidMount, componentDidUpdate, componentWillUnmount. |
Syntax | Simpler syntax, function-based. | More verbose, class-based syntax. |
Performance | More lightweight and performant. | Slightly heavier due to the class structure and additional methods. |
Use of Hooks | Can use hooks like useState, useEffect, etc. | Cannot use hooks directly. |
Rendering | Directly returns JSX. | Must define a render() method to return JSX. |
Context | Easier to integrate with React hooks like useContext. | Uses Context.Consumer for context integration. |
Complete Reference