Understanding React Components, Props, and State

Once you understand what React is, the next step is to dive into its core building blocks. At the heart of every React application are components. This guide will walk you through the fundamentals of React components, how they communicate using props, and how they manage their own data with state.

Mastering these concepts is the key to unlocking your ability to build interactive and dynamic web applications. Let’s get started!

Creating Your First React App (CRA & Vite)

Before you can build components, you need a project. While Create React App (CRA) was the traditional choice, modern development has embraced faster tools. We recommend using Vite for its incredible speed.

To start a new project with Vite, open your terminal and run this simple command:

npm create vite@latest my-react-app -- --template react

This command quickly sets up a lightweight and lightning-fast React development environment for you to work in.

What are React Components?

Think of React components as reusable building blocks, like LEGO bricks for your user interface. Each component is a self-contained piece of UI that can have its own logic and appearance. You can have components for a button, a navigation bar, a user profile, or an entire page.

Functional vs. Class Components

There are two types of components in React, but one is the clear modern standard:

• Class Components: The older way of writing components, using JavaScript classes. You might still see them in legacy codebases.
• Functional Components: The modern standard. These are simple JavaScript functions that accept data and return what should appear on the screen. With the introduction of “Hooks,” they can do everything class components can do and more, but with much cleaner code.

Here’s what a simple functional component looks like:

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

Props – Passing Data Between Components

Components rarely exist in isolation; they need to communicate. That’s where react props (short for properties) come in. Props allow you to pass data from a parent component down to a child component, just like passing arguments to a function.

This makes your components configurable and reusable. For example, you could have a single `UserProfile` component and pass different user data to it via props.

Here’s how a parent passes a `name` prop to a child:

// Child Component (receives props)
function WelcomeMessage(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Parent Component (sends props)
function App() {
  return <WelcomeMessage name="Sarah" />;
}

In this example, the `App` component renders `WelcomeMessage` and passes the name “Sarah” to it. The `WelcomeMessage` component then displays “Hello, Sarah!”.

State – Managing Dynamic Data

While props are for data passed from a parent, what about data that a component needs to manage internally? This is where react state comes in. State is data that can change over time, causing the component to re-render and update the UI.

In functional components, we manage state with the `useState` Hook. A Hook is a special function that lets you “hook into” React features.

Here’s a simple counter component using the `useState` Hook:

import { useState } from 'react';

function Counter() {
  // Declare a state variable named "count"
  const [count, setCount] = useState(0);

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

When the button is clicked, `setCount` is called, which updates the `count` state. React then automatically re-renders the `Counter` component to display the new value.

Event Handling in React

React makes it easy to handle user interactions like clicks, form submissions, and keyboard inputs. You add event handlers (like `onClick`, `onChange`) directly to your JSX elements.

Notice in the counter example above, the `onClick` handler is assigned a function that calls `setCount`. This is the standard pattern for event handling in react: define a function that performs an action when an event occurs.

Conditional Rendering in React

Often, you’ll want to display different UI elements based on a certain condition. This is called conditional rendering react. You can use standard JavaScript logic like `if` statements or, more commonly, the ternary operator directly in your JSX.

For example, let’s show a “Login” button if a user is logged out, and a “Logout” button if they are logged in.

function LoginButton({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn 
        ? <button>Logout</button> 
        : <button>Login</button>
      }
    </div>
  );
}

Conclusion

You’ve now learned the absolute essentials of React! You understand that UIs are built from components, data is passed down through props, and dynamic data is managed with state. Combined with event handling and conditional rendering, you have the foundational tools to build almost any user interface you can imagine.

Read More: A Beginner’s Guide to React Forms and Lists

Read More: Understanding React Components, Props, and State

Frequently Asked Questions (FAQ)

Q: Should I learn class components in 2025?
A: It’s not necessary for new projects. Focus entirely on functional components and Hooks. You only need to learn about class components if you’re working on an older codebase that uses them.

Q: What is the main difference between props and state?
A: Props are passed *into* a component from its parent and are immutable (read-only) within the component. State is managed *inside* a component and can be changed by the component itself to control its behavior over time.

Q: Why is Vite better than Create React App?
A: Vite uses a modern approach with native ES modules, which results in significantly faster server start times and Hot Module Replacement (HMR) for a much smoother development experience. It requires less configuration and is generally considered the new standard for starting React projects.