Core Concepts

Components

Learn how to create and compose React components — the building blocks of every React app.

React Components

Components are the heart of React. A component is a self-contained piece of UI that can be reused throughout your application.

Function Components

Modern React uses function components — plain JavaScript functions that return JSX.

Props

Props (short for "properties") are how you pass data into components. They are read-only — a component should never modify its own props.

Component Composition

React's power comes from composing small components into larger ones. This creates a clear hierarchy and makes each component easy to understand and test.

Naming Conventions

Component names must start with a capital letter
File names typically match the component name (e.g., Button.jsx)

Example

jsx

// Simple function component
function Button({ label, onClick, variant = 'primary' }) {
  return (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {label}
    </button>
  );
}

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

// Composing components
function ProfilePage({ user }) {
  return (
    <Card title="User Profile">
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
      <Button
        label="Edit Profile"
        onClick={() => console.log('Edit clicked')}
      />
    </Card>
  );
}

Try it yourself — JSX