Components are the fundamental building blocks of React applications. They allow you to break down the UI into reusable and manageable pieces. Each component is a JavaScript function or class that returns a React element, which describes how the UI should appear.

Types of Components

1. Function Components:

   • Definition: Function components are JavaScript functions that return JSX. They are simpler and often used for components that do not require lifecycle methods or complex state management.
   • Usage: They can accept props (properties) and return JSX.
   • Example:

     function Greeting(props) {
       return <h1>Hello, {props.name}!</h1>;
     }
     
     // Usage
     <Greeting name="Sara" />
     

2. Class Components:

   • Definition: Class components are ES6 classes that extend React.Component and must have a render() method that returns JSX. They can have state and lifecycle methods.
   • Usage: They are typically used for more complex components that need to manage state or handle side effects.
   • Example:

     class Greeting extends React.Component {
       render() {
         return <h1>Hello, {this.props.name}!</h1>;
       }
     }
     
     // Usage
     <Greeting name="Sara" />
     

Component Structure

1. Props:

   • Definition: Props (short for properties) are read-only inputs passed to components. They allow components to receive data from their parent components.
   • Usage: Props are passed to components via attributes and accessed using props in function components or this.props in class components.
   • Example:

     function Welcome(props) {
       return <h1>Welcome, {props.username}!</h1>;
     }
     
     // Usage
     <Welcome username="John" />
     

2. State:

   • Definition: State is a mutable data structure used to manage data within a component. It allows components to keep track of information that can change over time.
   • Usage: In function components, state is managed using the useState hook. In class components, state is managed using the this.state object and this.setState() method.
   • Function Component Example:

     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>
       );
     }
     

   • Class Component Example:

     class Counter extends React.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>
         );
       }
     }
     

3. Lifecycle Methods:

   • Definition: Lifecycle methods are special methods in class components that allow you to hook into different stages of a component’s lifecycle, such as mounting, updating, and unmounting.
   • Usage: Examples include componentDidMount, componentDidUpdate, and componentWillUnmount.
   • Function Components: Similar behavior can be achieved using the useEffect hook.
   • Example:

     import React, { useEffect } from 'react';
     
     function Example() {
       useEffect(() => {
         // Side effect code here
         console.log('Component mounted or updated');
     
         return () => {
           // Cleanup code here
           console.log('Component unmounted');
         };
       }, []); // Empty dependency array means this effect runs only on mount and unmount
     
       return <div>Check the console for lifecycle messages</div>;
     }
     

4. Component Composition:

   • Definition: React components can be composed together to build complex UIs from simple components.
   • Usage: You can nest components within each other, pass data down as props, and manage state and side effects as needed.
   • Example:

     function Header() {
       return <header><h1>My App</h1></header>;
     }
     
     function Footer() {
       return <footer><p>© 2024 My App</p></footer>;
     }
     
     function App() {
       return (
         <div>
           <Header />
           <main>
             <h2>Welcome to My App</h2>
           </main>
           <Footer />
         </div>
       );
     }
     

Summary

Components in React are the core building blocks of an application. They can be defined as function components or class components, with each serving different needs. Components use props to receive data, manage their own state to track changes, and can utilize lifecycle methods or hooks to handle side effects and manage their lifecycle. Component composition allows for creating complex UIs by combining simpler components, making React a powerful and flexible library for building interactive user interfaces.