No history yet

React Basics

The Building Blocks

React is all about components.

Think of a React application like a set of LEGO bricks. Each individual brick is a self-contained piece with its own shape and color. You can snap these bricks together to build anything you want, from a simple wall to a complex spaceship. In React, these bricks are called components.

A component is a reusable piece of your user interface (UI). A button, a search bar, a user profile card, or even an entire page can be a component. By breaking down a complex UI into smaller, manageable components, you make your code easier to read, debug, and maintain.

The simplest way to define a component is to write a JavaScript function. This function returns a special kind of syntax called JSX (JavaScript XML), which looks a lot like HTML.

function WelcomeMessage() {
  return <h1>Hello, world!</h1>;
}

// This component can now be used elsewhere
// in your app like a custom HTML tag:
// <WelcomeMessage />

Each component is a self-contained unit. Its logic, structure, and style are all bundled together, making it easy to reuse and reason about.

Passing Information

Our WelcomeMessage component is static. It will always say "Hello, world!". But what if we want to greet a specific user? We need a way to pass information into our components.

This is where props come in. 'Props' is short for properties, and they are the mechanism for passing data from a parent component to a child component. They are read-only, which means a component can never change the props it receives.

Let's modify our component to accept a name prop. Props are passed to the component as a single object argument.

// The component now accepts `props` as an argument.
function WelcomeMessage(props) {
  // We access the `name` property from the props object.
  return <h1>Hello, {props.name}!</h1>;
}

// Now we can reuse this component with different data.
// This creates two separate greetings:
const element = (
  <div>
    <WelcomeMessage name="Alice" />
    <WelcomeMessage name="Bob" />
  </div>
);

By using props, we've made our WelcomeMessage component flexible and reusable. We can now greet anyone we want without rewriting the component's logic.

Adding Memory

Props allow us to pass data down, but what about data that changes over time? Think of a light switch that can be on or off, or a counter that increments when you click a button. This kind of dynamic information that a component owns and manages itself is called 'state'.

If props are how components receive information, state is their internal memory.

To add state to a functional component, we use a special function provided by React called a Hook. The most common one is the useState Hook. It lets us declare a state variable inside our component.

Let's build a simple counter. When you click a button, the count goes up. This count value is a piece of state.

import { useState } from 'react';

function Counter() {
  // Declare a state variable named `count`
  // `setCount` is the function to update it
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Here's the magic: whenever we call the setCount function, React automatically re-renders the Counter component. This updates the UI to show the new count. We don't have to manually change the text on the screen. React handles it for us because the state changed.

Time to check your understanding of these core concepts.

Quiz Questions 1/5

What is the primary purpose of a React component?

Quiz Questions 2/5

A component can modify the props it receives from its parent.

Components, props, and state are the fundamental concepts of React. Mastering them is the first and most important step to building powerful, interactive web applications.