Menu
REACT

Component

React is a popular JavaScript library for building user interfaces, particularly single-page applications where you need fast interactions and updates. A React component is a self-contained module that renders some output, often HTML, based on input data and logic.

Components in React are the building blocks of a React application. They are self-contained, reusable pieces of code that work independently and return HTML. Like JavaScript functions, components can accept inputs (called "props") and return React elements, which describe what you want to see on the screen.

 

React components come in two main types: Class components and Function components.

 

Class Components in React

Class components are more feature-rich than functional components and are particularly useful when you need to manage state or lifecycle methods. Although hooks have made functional components more powerful, understanding class components is still valuable, especially when working with older React codebases.

 

Defining a Class Component

Class components are ES6 classes that extend from React.Component and must define a render method, which returns the React elements.

 

Example:

import React, { Component } from 'react';
class Greeting extends Component {
 render() {
   return <h1>Hello, {this.props.name}</h1>;
 }
}
export default Greeting;

Example

Greeting is a class component that extends React.Component and implements a render method to return an <h1> element.

 

State in Class Components
Class components can hold and manage local state. The state is initialized in the constructor and updated using this.setState.

 

Example:

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 });
 };
 render() {
   return (
     <div>
       <p>Count: {this.state.count}</p>
       <button onClick={this.increment}>Increment</button>
     </div>
   );
 }
}
export default Counter;

Explaination 

Counter is a class component with a state variable count. The increment method updates the state when the button is clicked.

 

Defining a Functional Component

A functional component is a plain JavaScript function that accepts props as an argument and returns React elements.

 

import React from 'react';
function Greeting(props) {
 return <h1>Hello, {props.name}</h1>;
}
export default Greeting;


Explaination:

Greeting is a functional component that takes props and returns an <h1> element displaying a greeting message.

Using Hooks in Functional Components
Hooks are special functions that let you use state and other React features in functional components. The two most commonly used hooks are useState and useEffect.

 

useState Hook
The useState hook allows you to add state to your functional components.

import React, { useState } from 'react';
function Counter() {
 const [count, setCount] = useState(0);
 return (
   <div>
     <p>Count: {count}</p>
     <button onClick={() => setCount(count + 1)}>Increment</button>
   </div>
 );
}
export default Counter;


In this example, Counter uses the useState hook to add a count state variable and a setCount function to update it.
 

REACT