🌱 A Step-by-Step, Active Learning Guide

🎯 Goal of This Guide

By the end, you will be able to:

• Create a React project with Vite
  


• Understand components, JSX, props, and state
  


• Build simple interactive UI


• Understand folder structure & common patterns


• Be comfortable experimenting and reading errors

📦 Prerequisites

None. You only need:

• A computer


• Node.js installed (you can check with: node -v in your terminal)

If Node isn't installed, get it here: https://nodejs.org

🚀 SECTION 1 — Creating Your First React App with Vite

1.1 Install Vite + React

Open your terminal and type:

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

Then:

cd my-react-app

npm install

npm run dev

Visit the local URL printed (usually http://localhost:5173).

🎉 Your first React app is running!

🧠 Mini-Quiz (no pressure!)

1. What command starts your Vite server?


2. What tool did we use to create the React project?


3. Where do you view your running app in the browser?

(Answer after you try!)

📁 SECTION 2 — Understanding the Project Structure

Inside your project:

my-react-app/

 ├─ node_modules/     ← dependencies

 ├─ public/           ← static files

 ├─ src/

 │   ├─ App.jsx       ← main component

 │   ├─ main.jsx      ← React/Vite entry file

 └─ index.html

Key files:

• 
  main.jsx: connects React to the HTML page


• 
  App.jsx: your first component

🧪 Try This Exercise

Open App.jsx and change the text inside the <h1> tag.

Save → see the browser auto-update.

If that works, you’ve successfully edited your first component!

⭐ SECTION 3 — Components (The Heart of React)

What is a Component?

A component is a function that returns UI.

Example:

function Welcome() {

  return <h2>Welcome to my app!</h2>;

}



export default Welcome;

You can use components like HTML tags:

<Welcome />

🎯 Activity: Create Your First Component

1. In src/, create a file called Greeting.jsx
   


2. Add:
   

function Greeting() {

  return <p>Hello! Nice to meet you 👋</p>;

}



export default Greeting;

1. Open App.jsx and add:
   

import Greeting from './Greeting.jsx';



function App() {

  return (

    <>

      <h1>My First React App</h1>

      <Greeting />

    </>

  );

}

💡 You just composed UI using components!

🧠 Mini-Quiz

1. What does a React component return?


2. What file do you import new components into?


3. What must every component function start with (uppercase or lowercase)?

💬 SECTION 4 — JSX Basics (How React Writes HTML)

JSX allows you to write HTML inside JavaScript.

Examples:

const element = <h1>Hello</h1>;

You can also insert variables:

const name = "Alex";

return <p>Hello {name}</p>;

🧪 Code Completion Exercise

Fill the missing parts:

function FavoriteFood() {

  const food = "______";

  return <p>My favorite food is {______}.</p>;

}



export default ______;

Try to complete it before checking answers.

🔄 SECTION 5 — Props (Passing Data to Components)

Props let you send data from parent → child.

Example child component:

function Greeting(props) {

  return <p>Hello, {props.name}!</p>;

}

Parent:

<Greeting name="Sarah" />

🎯 Activity: Make a Reusable Component

1. Create a file UserCard.jsx
   


2. Add:
   

function UserCard(props) {

  return (

    <div>

      <h3>{props.username}</h3>

      <p>Age: {props.age}</p>

    </div>

  );

}



export default UserCard;

1. Use it in App.jsx:
   

<UserCard username="Bob" age={30} />

<UserCard username="Luna" age={22} />

<UserCard username="Kai" age={19} />

🧠 Mini-Quiz

1. What direction do props flow?


2. Are props read-only or editable inside a component?


3. What object name usually holds received props?

🔥 SECTION 6 — State (Making Your App Interactive)

State lets your component remember values that change over time.

Example:

import { useState } from "react";



function Counter() {

  const [count, setCount] = useState(0);



  return (

    <button onClick={() => setCount(count + 1)}>

      You clicked {count} times

    </button>

  );

}



export default Counter;

🧪 Activity: Add a Counter to Your App

1. Create Counter.jsx
   


2. Copy the counter code above


3. Import into App:
   

<Counter />

Click the button → count increases 🎉

🧠 Mini-Quiz

1. What hook do we use for state?


2. What does setCount do?


3. Does changing state re-render the component?

🌈 SECTION 7 — Handling User Input

Example with an input field:

import { useState } from "react";



function NameInput() {

  const [name, setName] = useState("");



  return (

    <>

      <input

        value={name}

        onChange={(e) => setName(e.target.value)}

        placeholder="Type your name"

      />

      <p>You typed: {name}</p>

    </>

  );

}



export default NameInput;

🧪 Try This Activity

Add <NameInput /> to App.jsx.

Then modify it so:

• It displays text only if name length > 0


• Bonus: If name is “React”, show a special message

🏗 SECTION 8 — Build a Small Project (Guided)

We’ll build a Simple To-Do List.

Step 1 — Create TodoApp.jsx

import { useState } from "react";



function TodoApp() {

  const [items, setItems] = useState([]);

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



  const addItem = () => {

    if (text.trim() === "") return;

    setItems([...items, text]);

    setText("");

  };



  return (

    <>

      <h2>Todo List</h2>

      <input

        value={text}

        onChange={(e) => setText(e.target.value)}

        placeholder="Add item"

      />

      <button onClick={addItem}>Add</button>



      <ul>

        {items.map((item, index) => (

          <li key={index}>{item}</li>

        ))}

      </ul>

    </>

  );

}



export default TodoApp;

Step 2 — Add to App.jsx

<TodoApp />

🎉 You’ve built your first real interactive React app!

🧠 Final Quiz (to check understanding)

1. What is the difference between props and state?


2. What does useState return?


3. What is JSX?


4. How do you create a new component?


5. How do you handle user input?


6. What happens when state changes?


7. Why must component names start with a capital letter?

📚 What’s Next After This Guide

• Learn about conditional rendering
  


• Learn about lists & keys
  


• Learn about useEffect
  


• Explore React Router for pages


• Learn fetching APIs