React Beginner Guide: Learn React Step-by-Step from Scratch

React is one of the most popular ways to build modern user interfaces — especially when your website or app needs to be interactive, fast, and easy to scale.

If you’ve ever wondered things like:

• “How do I build a UI without duplicating code everywhere?”
• “How do big apps keep everything organized?”
• “How do I update part of a page without reloading the entire page?”
• “Why does everyone talk about components, state, and props?”

…React was built to solve exactly these problems.

This React Beginner Guide was written for absolute beginners. You don’t need to be “advanced” or have years of experience. If you know basic HTML/CSS and a little JavaScript (variables, functions, arrays), you can follow along.

React has evolved a lot since its first release (created at Facebook/Meta and released in 2013), but the learning path is still simple: components → props → state → events → lists → effects → real mini projects.

✅ Key Takeaways

🧭 Quick Navigation (Start Here)

🧠 Introduction: Why React Exists

Before React, developers often built websites by manually editing HTML strings and attaching JavaScript events in many places. This worked… until the UI became complex.

In real apps, the UI changes constantly:

• Notifications appear and disappear
• Buttons disable when loading
• Forms validate as you type
• Lists update when data changes
• Components need to re-render based on state

React became popular because it gives you a clear mental model:

UI = a function of your data
When data changes, React updates the UI.

Instead of “manually updating the DOM everywhere,” you describe what the UI should look like, and React handles updates.

✅ What is React?

React is a JavaScript library for building user interfaces, based on components. It was created at Facebook/Meta and released in 2013.

What React is great at

• Building interactive UI (forms, dashboards, apps)
• Reusable components (buttons, cards, layouts)
• Predictable updates (state → UI)
• Large-scale projects (better organization)

What React is NOT

React is not a full “everything framework” by itself. For routing, data fetching, and full app structure, you typically combine React with tools like:

• A build tool (Vite, etc.)
• A router (React Router or a framework)
• Optional frameworks (Next.js, Remix, etc.)

In this beginner guide, we’ll focus on core React first (the part that transfers to everything else).

🧱 React vs “Vanilla JS” (Quick Comparison)

Here’s the easiest way to understand the difference.

React doesn’t remove JavaScript — it organizes it.

🛠️ Build Your First React App (Step-by-Step)

Today, the React team recommends starting with a modern build tool such as Vite (fast dev server, modern defaults).

Step 1: Install Node.js (one time)

React tooling runs on Node.js. Install a recent LTS version from the official Node website.

Step 2: Create a new project (Vite)

Open your terminal in a folder where you want your project:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Now open the local URL shown in the terminal (usually http://localhost:5173).

Step 3: You’re running React 🎉

At this point, you have a working React app. Don’t worry if you don’t understand the files yet — we’ll break them down next.

📁 React Project Structure

A typical Vite + React project looks like:

• index.html → the single HTML entry
• src/ → your actual app code
• src/main.jsx → creates the React root and renders your app
• src/App.jsx → your first component
• package.json → scripts + dependencies

The “root” idea (important)

React renders into a single root element. The setup is handled in your entry file. (Modern React uses a root API.)

🧾 JSX Basics (React’s “HTML-like” syntax)

JSX looks like HTML, but it’s written in JavaScript.

Example:

function App() {
  return (
    <div>
      <h1>Hello React</h1>
      <p>This is JSX.</p>
    </div>
  );
}

Key JSX rules beginners must know

1. Return one parent element
   This fails:

return (
  <h1>Hi</h1>
  <p>Oops</p>
);

Fix:

return (
  <div>
    <h1>Hi</h1>
    <p>Works!</p>
  </div>
);

2. Use {} to insert JavaScript

const name = "Junior";
return <p>Welcome, {name}!</p>;

3. Use className, not class

return <div className="box">Styled</div>;

4. Self-close tags

<img src="..." alt="..." />

🧩 Components (Your #1 React Skill)

A component is a reusable piece of UI.

Think like this:

• A “Button” can be a component
• A “Card” can be a component
• A “Navbar” can be a component
• A “Post preview” can be a component

Your first component (step-by-step)

Create src/components/Greeting.jsx:

export default function Greeting() {
  return <h2>Hello from a component!</h2>;
}

Use it in App.jsx:

import Greeting from "./components/Greeting";

export default function App() {
  return (
    <div>
      <h1>My App</h1>
      <Greeting />
    </div>
  );
}

✅ You just created reusability.

📦 Props vs State (Beginner Clarity)

This is where most beginners get stuck — so we’ll make it very practical.

Props = data passed into a component

Props are like function parameters.

Example:

function UserCard(props) {
  return <p>User: {props.name}</p>;
}

Use it like:

<UserCard name="Ana" />
<UserCard name="Carlos" />

Better style (destructuring):

function UserCard({ name }) {
  return <p>User: {name}</p>;
}

State = data that changes over time

State triggers UI updates.

Example: counter:

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  function addOne() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked: {count}</p>
      <button onClick={addOne}>Click</button>
    </div>
  );
}

What to notice (step-by-step)

1. useState(0) creates state starting at 0
2. count is the current value
3. setCount() updates it
4. Updating state re-renders UI automatically

Props vs State table

🖱️ Events & Forms (Practical)

React events look like HTML events, but with camelCase.

Button click event

<button onClick={() => alert("Clicked!")}>
  Click me
</button>

Input field (controlled component)

Controlled inputs are a key professional habit.

import { useState } from "react";

export default function NameInput() {
  const [name, setName] = useState("");

  return (
    <div>
      <label>
        Your name:
        <input
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>

      <p>Preview: {name}</p>
    </div>
  );
}

Why controlled inputs matter

Because React becomes the source of truth. That makes validation, formatting, and saving much easier later.

📋 Lists & Keys (Common Beginner Pitfall)

React often renders arrays into UI.

Example:

const games = ["Tibia", "FF7", "BDO", "Resident Evil"];

export default function GameList() {
  return (
    <ul>
      {games.map((game) => (
        <li key={game}>{game}</li>
      ))}
    </ul>
  );
}

Why keys exist

Keys help React track which items changed when a list updates.

Beginner rule:
Use a stable unique value if possible (like an ID). If you only have names and they’re unique, that’s fine for beginner projects.

⏳ useEffect (Beginner Version)

useEffect runs code after rendering. Beginners usually need it for:

• fetching data
• reading localStorage
• syncing something external

Example: set the document title

import { useEffect, useState } from "react";

export default function TitleUpdater() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count}
    </button>
  );
}

Step-by-step explanation

• React renders component
• useEffect runs after render
• When count changes, the effect runs again

🧠 The “React Mental Model” (Super Important)

To avoid confusion, memorize this:

1. Your component runs like a function
2. It returns UI (JSX)
3. State changes cause re-renders
4. Props pass data down
5. Effects handle “outside React” work

If you understand those five ideas, React stops feeling “magical.”

📌 When should beginners learn React?

If you’re still learning JavaScript fundamentals, React might feel confusing. The best order:

1. JavaScript basics (variables, functions, arrays, objects)
2. DOM basics (optional but helpful)
3. React components + props + state
4. React Router / API fetching / larger projects

🧪 Exercises (Step-by-Step Practice)

Exercise 1: Build a Like Button

Goal: state + click event.

Try it yourself (don’t scroll immediately):

• Create a button
• Store likes in state
• Increase on click

 import { useState } from "react"; export default function LikeButton() { const [likes, setLikes] = useState(0); return (  setLikes(likes + 1)}> 👍 Likes: {likes}  ); } 

Exercise 2: Simple Todo (Beginner)

Goal: input + list rendering.

Requirements:

• input text
• “Add” button
• list items below

 import { useState } from "react"; export default function TodoMini() { const [text, setText] = useState(""); const [items, setItems] = useState([]); function addItem() { if (!text.trim()) return; setItems([...items, text.trim()]); setText(""); } return ( 
 
Mini Todo
  setText(e.target.value)} placeholder="Type a task..." /> Add 
 {items.map((it, idx) => ( 
{it}
 ))} 
 
 ); } 

Tip: We used idx as key for simplicity. For real apps, prefer stable IDs.

⚠️ Common React Beginner Mistakes

✅ React Beginner Checklist

🧠 Mini Quiz (Click to open)

🔥 Next: What to Learn After React Basics

Once you understand this guide, your next steps are:

• Routing (React Router or a framework)
• Fetching API data
• Component composition patterns
• Basic performance habits
• Building portfolio projects

React also continues evolving (React 19+ era), so following official docs is a smart habit.

❓ FAQ

Quick answers to common questions about this topic.

📚 Recommended Reading

• Frontend Basics Hub: HTML, CSS & JavaScript (Beginner Roadmap)
• JavaScript Tutorial for Beginners
• HTML Tutorial for Beginners
• CSS Tutorial for Beginners
• Git & Version Control Hub