React FAQ: Top 75 Questions

In React, **components** are independent, reusable pieces of UI. They are the fundamental building blocks of any React application. Components allow you to split the UI into independent, self-contained, and reusable units, making it easier to manage and develop complex user interfaces.

There are two main types of components in React:

• Functional Components (Recommended for modern React): These are JavaScript functions that accept an object of `props` (properties) as their argument and return React elements (JSX). They are simpler to write and typically manage state using React Hooks (e.g., `useState`, `useEffect`).
• Class Components (Older style): These are ES6 classes that extend `React.Component`. They have a `render()` method that returns React elements and can manage their own state using `this.state` and lifecycle methods (e.g., `componentDidMount`).

Key characteristics of React Components:

• Reusability: Once defined, a component can be used multiple times throughout the application or even in different projects.
• Encapsulation: Each component manages its own logic and UI, making it easier to develop and debug independently.
• Composition: Complex UIs are built by composing smaller, simpler components together.
• Props (Properties): Components communicate with each other primarily using props, which pass data from parent to child components. Props are read-only (immutable).
• State: Components can have internal state, which allows them to manage and react to changes over time (e.g., user input, data fetched from an API). State is mutable and local to the component.

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';

// 1. Functional Component
function Header(props) {
  return (
    <header>
      <h1>{props.title}</h1>
      <p>{props.subtitle}</p>
    </header>
  );
}

// 2. Functional Component with State (using Hooks)
function LikeButton() {
  const [likes, setLikes] = useState(0); // 'likes' is state, 'setLikes' is setter

  const handleClick = () => {
    setLikes(likes + 1);
  };

  return (
    <button onClick={handleClick}>
      Likes: {likes}
    </button>
  );
}

// 3. Parent Component composing other components
function App() {
  return (
    <div>
      <Header title="My Awesome React App" subtitle="Building UIs with Components" />
      <hr />
      <p>Click the button below:</p>
      <LikeButton />
      <LikeButton /> {/* Reusing the component */}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root-components'));
root.render(<App />);
                    

Explanation of the Code:

• **`Header` (Functional Component):** This component takes `title` and `subtitle` as `props` and renders them. It's a simple, stateless component that displays information passed from its parent.
• **`LikeButton` (Functional Component with State):** This component uses the `useState` Hook to manage its internal `likes` count. When the button is clicked, `setLikes` updates the state, causing the component to re-render with the new count. Each `LikeButton` instance has its own independent `likes` state, demonstrating encapsulation.
• **`App` (Parent Component):** This component demonstrates **composition** by rendering instances of `Header` and `LikeButton`. It passes `props` (`title`, `subtitle`) to the `Header` component. It also shows that `LikeButton` can be reused multiple times, and each instance will maintain its own separate state.

This example highlights how components are modular, reusable, and form the backbone of a React application, managing their own state and communicating via props.