React FAQ: Top Questions

In React, **Components** are the fundamental building blocks of any React application. They are independent, reusable, and self-contained pieces of UI. Think of them like JavaScript functions or classes that optionally accept inputs (called "props") and return React elements describing what should appear on the screen.

There are two main types of components:

• Functional Components: These are JavaScript functions that return JSX. With the introduction of Hooks in React 16.8, functional components can now manage state and lifecycle methods, making them the preferred way to write components in modern React.
• Class Components: These are ES6 classes that extend React.Component and must contain a render() method that returns JSX. They were traditionally used for stateful logic and lifecycle methods, but are less common in new code due to Hooks.

**Props** (short for "properties") are how you pass data from a parent component to a child component. They are read-only, meaning a child component should never modify the props it receives from its parent. This ensures a unidirectional data flow, making applications more predictable and easier to debug. Props can be any JavaScript value, including objects, arrays, functions, and even other React elements.

Props are passed as attributes to a component, similar to HTML attributes, and are received by the component as a single JavaScript object.

import React from 'react';
import ReactDOM from 'react-dom/client';

// --- Functional Component Example (Child Component) ---
// This component receives 'name' and 'age' as props.
function UserCard(props) {
  return (
    <div className="user-card swf-lsn-card">
      <h3>User Details</h3>
      <p>Name: <strong>{props.name}</strong></p>
      <p>Age: <strong>{props.age}</strong></p>
      {/* Conditional rendering based on a prop */}
      {props.isAdmin && <p className="text-red-500">(Administrator)</p>}
    </div>
  );
}

// --- Parent Component Example ---
// This component renders multiple UserCard components and passes different props to each.
function App() {
  return (
    <div className="app-container swf-lsn-container">
      <h1>React Components and Props Demo</h1>

      {/* Using UserCard with specific props */}
      <UserCard name="Alice" age={30} isAdmin={false} />

      {/* Another instance with different props */}
      <UserCard name="Bob" age={24} isAdmin={false} />

      {/* An admin user */}
      <UserCard name="Charlie" age={45} isAdmin={true} />

      <div className="swf-lsn-list mt-8">
        <p>
          This example demonstrates how the <code>App</code> component (parent)
          passes data to the <code>UserCard</code> component (child) using props.
          Notice how <code>UserCard</code> uses <code>props.name</code>, <code>props.age</code>,
          and <code>props.isAdmin</code> to render dynamic content.
        </p>
      </div>
    </div>
  );
}

// Rendering the App component into the DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
                

Explanation of the Code:

• The code imports React and ReactDOM, essential for building and rendering React applications.
• UserCard is a **functional component** that takes a single argument, props. Inside the component, we access the data passed from its parent using props.name, props.age, and props.isAdmin.
• The App component acts as the **parent component**. It renders three instances of the UserCard component.
• When rendering UserCard, we pass data as attributes (e.g., name="Alice" age={30} isAdmin={false}). These attributes become the props object within the UserCard component.
• The className="user-card swf-lsn-card" and className="app-container swf-lsn-container" demonstrate how to apply CSS classes using the className attribute in JSX, adhering to the structure you provided.
• The {props.isAdmin && <p className="text-red-500">(Administrator)</p>} line demonstrates conditional rendering based on a prop's value.
• Finally, ReactDOM.createRoot().render() mounts the App component to the root HTML element, displaying the entire UI.

This example clearly illustrates the component-based nature of React and the fundamental concept of passing data downwards through the component tree using props.