React Basics

The Building Blocks of a UI

React is a JavaScript library for building user interfaces. Its core idea is simple: you build complex UIs by combining small, isolated pieces of code called “components.”

Think of it like building with LEGO bricks. Instead of creating a huge, monolithic structure, you build individual bricks (components) and then assemble them to create anything you want. Each brick has its own purpose and can be reused wherever you need it.

Components are the fundamental building blocks of any React application.

This component-based approach makes your code easier to manage, debug, and reuse. If a part of your user interface needs to change, you only need to update the specific component responsible for it, not the entire application.

Setting Up Your Playground

To start building with React, you need a development environment. While you can set it up manually, modern tools make it incredibly easy. We'll use Vite, a popular and fast build tool, to create a starter project.

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

This command creates a new directory called my-react-app with a basic React project inside. Once it's done, navigate into the new folder, install the necessary packages, and start the development server:

cd my-react-app
npm install
npm run dev

Your browser will open a new tab with your running React application. Now you're ready to start coding.

JSX: JavaScript in Disguise

When you look inside a React component, you'll see something that looks like HTML but isn't quite HTML. This is JSX, which stands for JavaScript XML. It's a syntax extension that lets you write HTML-like code directly within your JavaScript files.

const greeting = <h1>Hello, world!</h1>;

Behind the scenes, a tool like Vite converts this JSX into regular JavaScript function calls that create HTML elements. This allows you to leverage the full power of JavaScript—like using variables, loops, and conditional logic—to build your UI dynamically.

There are a couple of key differences from standard HTML. Since class is a reserved word in JavaScript, you must use className for CSS classes. Similarly, HTML attributes that contain a hyphen, like data-testid, become camelCased in JSX, like dataTestId.

JSX blends the familiar structure of HTML with the dynamic power of JavaScript.

Creating Components

In modern React, a component is just a JavaScript function. The function's job is to return the JSX that describes what the UI should look like. By convention, component names must always start with a capital letter. This is how React distinguishes your components from regular HTML tags.

// In a file like Greeting.jsx
function Greeting() {
  return <h1>Welcome to my app!</h1>;
}

export default Greeting;

To make this component appear on the screen, you need to render it. You typically do this once in your main application file (often main.jsx or index.js), telling React to render your top-level component into a specific DOM element on your HTML page.

// In main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import Greeting from './Greeting';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Greeting />);

Passing Data with Props

Components would not be very useful if they were static. We need a way to pass information to them to make them dynamic and reusable. This is done using “props,” which is short for properties.

Props are passed to components just like attributes are passed to HTML tags. Inside the component, they arrive as a single object.

function WelcomeMessage(props) {
  // props is an object: { name: "Alex" }
  return <h1>Hello, {props.name}!</h1>;
}

Now, when you use the WelcomeMessage component, you can pass it a name prop to customize the output. This allows you to reuse the same component to greet different people.

// Use the component and pass a prop
const element = <WelcomeMessage name="Alex" />;

// We can reuse it with different data
const anotherElement = <WelcomeMessage name="Jordan" />;

Props are read-only. A component must never modify its own props. This principle makes the flow of data predictable: data flows down from parent components to child components.

Quiz Questions 1/5

What is the core idea behind React's approach to building user interfaces?

Quiz Questions 2/5

How would you add a CSS class named user-profile to a <div> element in JSX?

Mastering Modern React Development