1. Introduction 👋

Components are the fundamental building blocks of every React application. They let you split complex user interfaces into small, independent, and reusable pieces. This tutorial explores what components are, how to create and organize them, and the design principles that separate maintainable React code from tangled, hard-to-follow code.

2. What are Components? 🤔

A component is a self-contained, reusable piece of UI. Technically, it's just a JavaScript function that accepts inputs (called props) and returns JSX describing what should appear on screen.

function Welcome() {
  return <h1>Hello, welcome to React! 👋</h1>;
}

3. Why Components? 💡

4. Types of Components 🗂️

Modern React development revolves almost entirely around function components. Legacy class components still exist in older codebases but are no longer recommended for new code.

5. Function Components ⚙️

A function component is simply a JavaScript function that returns JSX. Its name must start with a capital letter so React can distinguish it from a regular HTML tag.

function ProfileCard({ name, role }) {
  return (
    <div className="profile-card">
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

6. Creating Your First Component 🎬

function Greeting({ name }) {
  return <h1>Hello, {name}! 👋</h1>;
}

export default Greeting;

import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
    </div>
  );
}

export default App;

7. Rendering Components 🖼️

To render a component, use it like a custom JSX tag. React calls the function, evaluates the returned JSX, and inserts the result into the DOM.

function App() {
  return (
    <div>
      <Greeting name="Bob" />
      <Greeting name="Carol" />
      <Greeting name="Dave" />
    </div>
  );
}

8. Naming Components 🏷️

9. Importing Components 📥

// Named export
import { Header } from './Header';

// Default export
import Footer from './Footer';

// Importing multiple components
import { Button, Input, Card } from './ui-components';

10. Exporting Components 📤

function Header() {
  return <header>My App</header>;
}

export default Header;

export function Button({ label }) {
  return <button>{label}</button>;
}

export function IconButton({ icon }) {
  return <button>{icon}</button>;
}

11. Nested Components 🪆

Components can render other components inside their JSX, forming a tree of nested UI pieces.

function Avatar({ src }) {
  return <img className="avatar" src={src} alt="User avatar" />;
}

function UserCard({ user }) {
  return (
    <div className="user-card">
      <Avatar src={user.avatarUrl} />
      <h3>{user.name}</h3>
    </div>
  );
}

12. Reusable Components ♻️

Well-designed components accept props to customize their behavior and appearance, allowing the same component to be reused in many different contexts.

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

// Reused with different props
<Button label="Save" variant="primary" onClick={handleSave} />
<Button label="Cancel" variant="secondary" onClick={handleCancel} />
<Button label="Delete" variant="danger" onClick={handleDelete} />

13. Component Composition 🏗️

Composition is the practice of building complex UIs by combining smaller components, often passing components as children rather than hardcoding structure.

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h2>Card Title</h2>
      <p>Card content goes here.</p>
    </Card>
  );
}

14. Splitting UI into Components 🔪

Breaking a large interface into components involves identifying logical, reusable boundaries in the UI.

15. Root Component 🌳

The root component (commonly App) sits at the top of the component tree and is the entry point rendered into the DOM.

import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(<App />);

16. Parent Components 👪

A parent component renders other components inside it and typically manages shared state or data passed down to its children via props.

function TodoApp() {
  const todos = ["Learn React", "Build a project"];

  return (
    <div>
      <h1>My Todos</h1>
      <TodoList todos={todos} />
    </div>
  );
}

17. Child Components 👶

A child component receives data from its parent through props and typically has no knowledge of where that data originates.

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo}>{todo}</li>
      ))}
    </ul>
  );
}

18. Component Hierarchy 🌲

React applications form a tree structure, where each component may have zero or more child components, all rooted at the top-level App component.

19. Organizing Components 🗄️

As applications grow, a clear folder structure keeps components discoverable and maintainable.

20. Single Responsibility Principle 🎯

Each component should ideally do one thing well. A component handling data fetching, complex business logic, and detailed presentation all at once quickly becomes difficult to test and reuse.

function UserDashboard() {
  // fetching logic, formatting logic, and rendering
  // all mixed together in one large component
  // ...
}

function UserDashboard() {
  const { user, loading } = useUser();
  if (loading) return <Spinner />;
  return <UserProfile user={user} />;
}

21. Presentational Components 🎨

Presentational components focus purely on how things look. They receive data via props and render UI, without containing business logic or data-fetching code.

function PriceTag({ amount, currency }) {
  return (
    <span className="price-tag">
      {currency}{amount.toFixed(2)}
    </span>
  );
}

22. Container Components 📦

Container components handle how things work — managing state, fetching data, and passing it down to presentational components.

function ProductPriceContainer({ productId }) {
  const [price, setPrice] = useState(null);

  useEffect(() => {
    fetchPrice(productId).then(setPrice);
  }, [productId]);

  if (price === null) return <Spinner />;
  return <PriceTag amount={price} currency="$" />;
}

23. Generic Components 🧬

Generic components are highly reusable, unopinionated building blocks (like buttons, modals, or inputs) that adapt to many contexts through flexible props.

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>
  );
}

24. Component Communication Overview 📡

Components communicate with each other in a few well-defined ways within React's unidirectional data flow model.

25. Component Lifecycle Overview ⏳

Every component goes through a lifecycle: it mounts (is created and inserted), updates (re-renders in response to state or prop changes), and eventually unmounts (is removed).

26. Component Best Practices 🌟

27. Common Component Mistakes 🚫

28. Frequently Asked Questions ❓

29. Summary 📝

Components are the core unit of reuse and organization in React. By breaking interfaces into small, focused pieces — following principles like single responsibility and composition — you create applications that are easier to build, test, and maintain over time.