The Pillars of React: Components, Props, and State

Learn the three core concepts that form the foundation of every interactive React application.

Welcome! Let's build a React app from its three core concepts.

 /* Starting our journey... */

Components: The Building Blocks

Components are the heart of React. They are independent, reusable pieces of code that return a description of the UI. Think of them like LEGO bricks; you can build a simple button or an entire complex page by combining them.

Props: Passing Data Down

Props (short for "properties") are how components talk to each other. They allow a parent component to pass data down to its children. This data is **read-only**, meaning a child component can't change the props it receives. For example, a parent could pass a `userName` prop to a `Greeting` component.

State: A Component's Memory

State is data that a component owns and manages itself. Unlike props, state is **private** and can be changed by the component. When state changes (using the `useState` Hook), React automatically re-renders the component to reflect the new data. This is what makes your UI interactive.

The Result: One-Way Data Flow

Together, these three pillars create a powerful one-way data flow. Data flows down from parent to child via **props**. A component manages its own internal data with **state**. When a user interaction updates the state, the component re-renders, creating a dynamic and predictable user interface.

Practice Zone

Interactive Test 1: Match the Concept

Match each core React concept to its correct definition.

Arrastra en el orden correspondiente.

Arrastra las opciones:

Passed like `<Card title="..." />`

Managed with `useState()`

A function returning JSX

Completa el código:

A reusable UI piece______

Data from a parent______

Internal component data______

Unlock with Premium

Interactive Test 2: Identify the Parts

Rellena los huecos en cada casilla.

function UserProfile({  }) {
  const [isActive, setIsActive] = useState();

  return (
    <div>
      <h1>{name}</h1>
      <p>Status: {isActive ? 'Active' : 'Away'}</p>
    </div>
  )
}

Unlock with Premium

Practice Example: Code Editor

Create a simple `Counter` component. It should receive an `initialCount` prop and manage its own count in state, incrementing when a button is clicked.

Enunciado:

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Unlock with Premium

Knowledge Check

If you want a component to manage its own internal data that changes over time, what should you use?

Unlock with Premium

A Practical Look at Components, Props & State

These three concepts don't exist in isolation; they work together to create the entire structure and logic of a React application.

1. Building a Component Tree

A React app is a tree of components. You have a main `App` component at the top, which renders other components like `Navbar`, `Sidebar`, and `ArticleList`. `ArticleList` might then render multiple `Article` components, passing unique data (like a title and author) down to each one as **props**.

function App() {
  return (
    <div>
      <Navbar />
      <ArticleList />
    </div>
  );
}

App

Navbar

ArticleList

2. Stateful vs. Stateless Components

Components that manage **state** are often called "smart" or "stateful" components (e.g., a search form that manages the input value). Components that only receive **props** and display them are "dumb" or "stateless" (e.g., a button that just shows a label). Separating these concerns makes your app easier to manage.

// Stateful: Manages its own data
function SearchForm() {
  const [query, setQuery] = useState('');
  // ...
}

// Stateless: Just displays props
function Button({ label }) {
  return <button>{label}</button>;
}

Smart 🧠

Dumb 🖼️

Practical Takeaway: Understanding this trio is non-negotiable. Every interactive feature you build in React will be a combination of components passing data via props and managing their own changes with state.

React Core Concepts Glossary

Component: A self-contained, reusable piece of the user interface. In modern React, this is typically a JavaScript function that returns JSX.
Props: Short for "properties". A read-only object of data passed from a parent component down to a child component to customize it.
State: Data that is managed *within* a component. It is private to that component and can change over time, causing the component to re-render.
useState Hook: A special function provided by React that lets you add state to functional components. It returns the current state value and a function to update it.
One-Way Data Flow: The core principle in React that data has one, and only one, way of being transferred to other parts of the application: downwards from parent to child components via props.