The Component Builder (React Basics)

Building Interactive UIs with Components & Hooks

Welcome to the React Basics practice repository! This module transforms you from a vanilla JavaScript developer into a React developer - you'll learn to build dynamic, component-based user interfaces using the most popular UI library.

---

Module Overview

React changes how you think about building web pages. Instead of manually selecting DOM elements and updating them, React lets you describe WHAT the UI should look like, and it handles the HOW. In this module, you'll master components, props, state, and hooks - the core building blocks of every React application.

---

Key Learnings

Topic	Description
JSX & Components	Creating reusable UI building blocks with JSX syntax
Props	Passing data between components for dynamic, reusable UIs
State (useState)	Managing interactive data that changes over time
Conditional Rendering	Showing/hiding UI and rendering dynamic lists with .map()
Forms & Refs	Handling user input, validation, and direct DOM access

---

Repository Structure

repo/
├── part-1/          ⭐ Very Basic - JSX & Components
│   ├── index.html
│   ├── script.js
│   └── README.md
│
├── part-2/          ⭐⭐ Basic - Props & Data Flow
│   ├── index.html
│   ├── script.js
│   └── README.md
│
├── part-3/          ⭐⭐⭐ Intermediate - State & Events
│   ├── index.html
│   ├── script.js
│   └── README.md
│
├── part-4/          ⭐⭐⭐⭐ Intermediate+ - Conditional Rendering & Lists
│   ├── index.html
│   ├── script.js
│   └── README.md
│
├── part-5/          ⭐⭐⭐⭐⭐ Advanced - Forms & Refs
│   ├── index.html
│   ├── script.js
│   └── README.md
│
├── part-6/          ⭐⭐⭐⭐⭐⭐ Advanced+ - Mini Project (Quiz App)
│   ├── index.html
│   ├── style.css
│   ├── script.js
│   └── README.md
│
├── homework/        📝 Final Assignment (Todo App)
│   ├── index.html
│   ├── style.css
│   ├── script.js
│   └── README.md
│
└── README.md        📖 This file

---

Getting Started

Prerequisites

• Basic HTML/CSS knowledge
• JavaScript fundamentals (variables, functions, arrays, objects)
• DOM manipulation knowledge (querySelector, addEventListener)
• ES6+ syntax (arrow functions, template literals, destructuring)
• A modern web browser (Chrome, Firefox, Edge)
• A code editor (VS Code recommended)

How to Use This Repository

1. Clone or download this repository to your computer
2. Start with Part 1 - open the part-1 folder
3. Open index.html in your browser to see the working examples
4. Open script.js in your code editor to study the code
5. Read through the examples and understand how each concept works
6. Progress sequentially - each part builds on the previous
7. Finish with Homework - practice exercises and the final project

Running the Code (Step by Step)

1. Navigate to any part folder (e.g., part-1/)
2. Double-click index.html to open it in your browser (Chrome, Firefox, or Edge)
3. The page loads with working examples - interact with them
4. Open script.js in your code editor (VS Code recommended) — this is a reference copy of the code
5. Study the code — the working code runs inline inside index.html
6. To modify code, edit the <script> block inside index.html, then save (Ctrl+S)
7. Refresh the browser (Ctrl+R or Cmd+R) to see your changes
8. Open Developer Tools (press F12) > Console tab to check for errors

No installation required. React loads automatically from the internet via CDN script tags. You only need a web browser and a text editor.

---

Part-by-Part Guide

Part 1: JSX & Components Basics ⭐

Difficulty: Very Basic

Learn React components and JSX syntax:

• Functional components
• JSX expressions with {}
• className vs class
• Fragments and self-closing tags

Each part includes 1 working example and exercises to practice.

Go to Part 1

---

Part 2: Props & Data Flow ⭐⭐

Difficulty: Basic

Learn props and data flow:

• Passing and destructuring props
• Different data types as props
• The children prop
• Component composition

Each part includes 1 working example and exercises to practice.

Go to Part 2

---

Part 3: State & Events ⭐⭐⭐

Difficulty: Intermediate

Learn useState and event handling:

• The useState hook
• Click and input events
• Immutable state updates
• Controlled components

Each part includes 1 working example and exercises to practice.

Go to Part 3

---

Part 4: Conditional Rendering & Lists ⭐⭐⭐⭐

Difficulty: Intermediate+

Learn conditional rendering and lists:

• Ternary and && rendering
• Rendering lists with .map()
• The key prop
• Filtering and sorting

Each part includes 1 working example and exercises to practice.

Go to Part 4

---

Part 5: Forms & Refs ⭐⭐⭐⭐⭐

Difficulty: Advanced

Learn form handling, validation, and refs:

• Controlled vs uncontrolled components
• Form validation patterns
• The useRef hook
• Multi-step forms

Each part includes 1 working example and exercises to practice.

Go to Part 5

---

Part 6: React Quiz App ⭐⭐⭐⭐⭐⭐

Difficulty: Advanced+

Build a complete Interactive Quiz Application combining all concepts!

Go to Part 6

---

Homework: React Exercises & Todo App 📝

Final Assignment

All practice exercises from the course, organized by part:

• Section 1: JSX & Components exercises (Part 1)
• Section 2: Props & Data Flow exercises (Part 2)
• Section 3: State & Events exercises (Part 3)
• Section 4: Conditional Rendering & Lists exercises (Part 4)
• Section 5: Forms & Refs exercises (Part 5)
• Section 6: Final Project — Todo App (combines everything)

Go to Homework

---

Tips for Success

1. Type the code yourself - don't copy-paste
2. Use console.log() - debug and understand what's happening
3. Install React DevTools - browser extension for inspecting components
4. Study all examples - then practice in the homework exercises
5. Make mistakes - learning comes from debugging

---

Troubleshooting

Problem	Solution
Nothing renders on screen	Check browser console for errors, verify CDN scripts load
Components not updating	Use setState, don't mutate state directly
Props are undefined	Check spelling of prop names, verify parent passes them
JSX errors	Remember: className not class, self-close <img />, single root element
Changes don't show	Save the file and refresh browser

---

Completion Checklist

• Part 1: Studied JSX & Components examples
• Part 2: Studied Props & Data Flow examples
• Part 3: Studied State & Events examples
• Part 4: Studied Conditional Rendering & Lists examples
• Part 5: Studied Forms & Refs examples
• Part 6: Studied React Quiz App project
• Homework: Completed exercises and Todo App

---

Additional Resources

• React Official Docs
• React DevTools Extension
• MDN Web Docs - JavaScript
• JavaScript.info

---

Happy Coding!

Remember: React is just JavaScript. If you know JS, you already know half of React!