React Components & JSX

Components are the building blocks of React applications. They let you split the UI into independent, reusable pieces that can be thought about in isolation.

What are Components?

A component is a JavaScript function or class that returns React elements describing what should appear on the screen. Components accept inputs called "props" and return React elements.

JSX Syntax

JSX is a syntax extension for JavaScript that looks similar to HTML. It produces React elements that describe what the UI should look like.

Functional vs Class Components

Modern React favors functional components with hooks over class components. Functional components are simpler, easier to test, and work seamlessly with React's hooks system.

Component Composition

Build complex UIs by composing smaller components together. This promotes reusability and maintainability in your codebase.

Props and Children

Props are how data flows from parent to child components. The special "children" prop allows you to pass components as data to other components.

Code Examples

Basic Functional Component

Greeting.jsx

function Greeting({ name, message }) {
  return (
    <div className="greeting">
      <h1>Hello, {name}!</h1>
      <p>{message}</p>
    </div>
  );
}

// Usage
<Greeting name="World" message="Welcome to React" />

Component with Children

Card.jsx

function Card({ title, children }) {
  return (
    <div className="card">
      <div className="card-header">
        <h2>{title}</h2>
      </div>
      <div className="card-body">
        {children}
      </div>
    </div>
  );
}

// Usage
<Card title="User Profile">
  <img src="avatar.png" alt="User" />
  <p>John Doe</p>
</Card>

Conditional Rendering

StatusBadge.jsx

function StatusBadge({ status }) {
  return (
    <span className={`badge ${status}`}>
      {status === 'active' && '🟢 '}
      {status === 'pending' && '🟡 '}
      {status === 'inactive' && '🔴 '}
      {status.charAt(0).toUpperCase() + status.slice(1)}
    </span>
  );
}

// Or using early return pattern
function UserGreeting({ user }) {
  if (!user) {
    return <p>Please log in</p>;
  }

  return <p>Welcome back, {user.name}!</p>;
}

Frequently Asked Questions

Should I use functional or class components?

Use functional components for all new code. They're simpler, support hooks, and are the recommended approach by the React team. Class components are still supported but considered legacy.

When should I split a component into smaller components?

Split when: a component becomes too large (100+ lines), part of it is reused elsewhere, or you can name a clear responsibility for a section. Don't over-split - premature abstraction adds complexity.

What's the difference between props and state?

Props are passed from parent components and are read-only. State is internal to a component and can change over time. Props flow down, while state is managed within the component.