This content originally appeared on DEV Community and was authored by Nwafor Onyebuchi
🌱 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 -vin 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!)
- What command starts your Vite server?
- What tool did we use to create the React project?
- 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
- In
src/, create a file called Greeting.jsx - Add:
function Greeting() {
return <p>Hello! Nice to meet you 👋</p>;
}
export default Greeting;
- Open
App.jsxand add:
import Greeting from './Greeting.jsx';
function App() {
return (
<>
<h1>My First React App</h1>
<Greeting />
</>
);
}
💡 You just composed UI using components!
🧠 Mini-Quiz
- What does a React component return?
- What file do you import new components into?
- 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
- Create a file
UserCard.jsx - Add:
function UserCard(props) {
return (
<div>
<h3>{props.username}</h3>
<p>Age: {props.age}</p>
</div>
);
}
export default UserCard;
- Use it in
App.jsx:
<UserCard username="Bob" age={30} />
<UserCard username="Luna" age={22} />
<UserCard username="Kai" age={19} />
🧠 Mini-Quiz
- What direction do props flow?
- Are props read-only or editable inside a component?
- 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
- Create
Counter.jsx - Copy the counter code above
- Import into App:
<Counter />
Click the button → count increases 🎉
🧠 Mini-Quiz
- What hook do we use for state?
- What does
setCountdo? - 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)
- What is the difference between props and state?
- What does
useStatereturn? - What is JSX?
- How do you create a new component?
- How do you handle user input?
- What happens when state changes?
- 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
This content originally appeared on DEV Community and was authored by Nwafor Onyebuchi
Nwafor Onyebuchi | Sciencx (2025-11-17T07:14:49+00:00) React for Total Beginners. Retrieved from https://www.scien.cx/2025/11/17/react-for-total-beginners/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.