React.js — Beginner's Guide

What is React?

⬡

Component-based

You build UIs from small, reusable pieces called components — like LEGO bricks for your interface.

⟳

Reactive updates

When your data changes, React automatically re-renders just the parts of the UI that need to update.

◈

Virtual DOM

React keeps a lightweight copy of the page in memory and only touches the real DOM when necessary.

▤

Declarative

You describe what the UI should look like, not how to build it. React handles the rest.

Why learn React?

React is one of the most widely used frontend libraries in the world, maintained by Meta. It powers Facebook, Instagram, Airbnb, and thousands of other products. Learning React opens the door to React Native (mobile apps), Next.js (full-stack web), and a large job market.

Setting up your first project

1

Install Node.js

React requires Node.js. Download the LTS version from nodejs.org and install it.

2

Create a new project with Vite

Vite is a fast modern build tool that sets up everything for you in seconds.

# Run this in your terminal
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

3

Open in your browser

Visit http://localhost:5173 — you'll see your running React app.

Prefer a zero-install option? Try codesandbox.io or stackblitz.com to write and run React in the browser with no setup at all.

Components — the building blocks

The concept

A component is just a JavaScript function that returns some HTML-like code (called JSX). Every React app is a tree of components — a root component that contains smaller, reusable ones.

// A simple component
function Greeting() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>Welcome to React.</p>
    </div>
  );
}

// Using the component like an HTML tag
function App() {
  return <Greeting />;
}

Component names must start with a capital letter — this is how React tells them apart from plain HTML tags like <div> or <p>.

JSX — HTML inside JavaScript

What is JSX?

JSX lets you write HTML-like syntax directly inside JavaScript. It looks like HTML but has a few important differences — and it compiles down to plain JavaScript before running in the browser.

// Key JSX rules

// 1. Use className instead of class
<div className="container"></div>

// 2. All tags must be closed
<img src="photo.jpg" alt="photo" />

// 3. Expressions go inside curly braces
const name = "Alice";
return <h1>Hello, {name}!</h1>;

// 4. Return one parent element (or use a Fragment)
return (
  <>
    <h1>Title</h1>
    <p>Body</p>
  </>
);

Props — passing data to components

The concept

Props (short for "properties") are how you pass data from a parent component into a child. They work like function arguments — read-only inside the child.

// Define a component that accepts props
function UserCard({ name, role }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

// Pass props like HTML attributes
function App() {
  return (
    <>
      <UserCard name="Alice" role="Designer" />
      <UserCard name="Bob" role="Engineer" />
    </>
  );
}

Props flow one way — from parent to child. A child component cannot modify the props it receives. This keeps data flow predictable and easy to debug.

State & hooks

State vs props

Props are data passed in from outside. State is data managed inside a component that can change over time — like a counter value, a form input, or whether a dropdown is open.

useState useEffect useRef useContext useMemo useCallback

// useState — the most common hook
import { useState } from "react";

function Counter() {
  // [currentValue, setterFunction] = useState(initialValue)
  const [count, setCount] = useState(0);

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

Hooks are functions that start with use. They can only be called at the top level of a component function — not inside loops, conditions, or nested functions.

Handling events

Event handlers in React

React events look similar to HTML events, but are written in camelCase and take a function (not a string) as their value. Common ones are onClick, onChange, and onSubmit.

import { useState } from "react";

function Form() {
  const [text, setText] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault(); // Prevent page reload
    alert(`You typed: ${text}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

What to learn next

React Router

Add multiple pages to your app with client-side routing.

Fetching data

Use fetch or Axios inside useEffect to load data from APIs.

Context API

Share state between many components without "prop drilling".

Next.js

The most popular full-stack React framework — adds routing, SSR, and more.

Styling options

Explore Tailwind CSS, CSS Modules, or styled-components.

State management

For larger apps, look at Zustand or Redux Toolkit.

The best way to learn React is to build something. Start with a simple to-do list, then try fetching data from a public API like openweathermap.org or pokeapi.co.