Session 1 — How React Works, Its Structure & Your First Code
Here's what we'll cover in 45 minutes. Each block builds on the last — by the end, you'll write a working React component from scratch.
The problem React solves and where it fits in web development.
Virtual DOM, components, and the rendering cycle.
Files, folders, JSX syntax, and how everything connects.
Components, props, state, and a hands-on counter app.
Review key concepts and test what you've learned.
React is a JavaScript library for building user interfaces, created by Facebook (now Meta) in 2013. It's not a full framework — it focuses on one thing: rendering UI efficiently.
React handles the view layer only. You pick your own tools for routing, state management, and more.
Build your UI from small, reusable pieces called components. Like LEGO blocks for interfaces.
You describe what the UI should look like, and React figures out how to update the DOM.
Data flows from parent to child components, making your app predictable and easier to debug.
Think of React as a smart assistant: you tell it "the button should say 'Hello'" and React handles adding it to the page and updating it when things change.
Before React, updating the DOM manually was painful. Let's compare approaches:
| Aspect | Vanilla JS | React |
|---|---|---|
| Updating UI | Manual DOM manipulation | Automatic via state changes |
| Code structure | Spaghetti as app grows | Clean component hierarchy |
| Reusability | Copy-paste HTML | Reuse components anywhere |
| Performance | Full DOM rewrites | Smart, minimal updates |
| State management | Scattered variables | Centralized, predictable |
Facebook, Instagram, Netflix, Airbnb, Uber, WhatsApp Web, Discord, and thousands more production apps worldwide.
React's secret weapon is the Virtual DOM — a lightweight copy of the real DOM that React keeps in memory.
When data (state) in your component changes, React notices and kicks off an update.
It creates a fresh virtual copy of what the UI should look like with the new data.
React compares both versions and finds the minimum set of changes needed. This is called reconciliation.
Instead of rewriting everything, React surgically updates just the parts that changed — fast and efficient.
Imagine editing a Google Doc: instead of reprinting the entire document after every typo, only the changed paragraph gets updated. That's what React does with your UI.
When you create a React app with Vite (the modern way), you get this folder structure:
my-react-app/ ├── node_modules/ # installed packages ├── public/ # static files (favicon, etc) ├── src/ # 👈 YOUR CODE LIVES HERE │ ├── App.jsx # main component │ ├── main.jsx # entry point │ ├── App.css # styles for App │ └── index.css # global styles ├── index.html # single HTML page ├── package.json # dependencies & scripts └── vite.config.js # build configuration
The most important file is main.jsx — this is where React "mounts" your app into the HTML page:
import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' ReactDOM.createRoot( document.getElementById('root') ).render(<App />)
React apps are Single Page Applications — there's only one HTML file. React dynamically swaps content in and out of the <div id="root"> element.
JSX lets you write HTML-like syntax directly inside JavaScript. It looks like HTML, but it's actually JavaScript under the hood.
// ✅ This is JSX (inside a React component) const element = ( <div className="greeting"> <h1>Hello, World!</h1> <p>Welcome to <strong>React</strong></p> </div> ) // ⚠️ Key JSX Rules: // 1. Use className instead of class // 2. Use camelCase for attributes (onClick, htmlFor) // 3. Must have ONE parent element // 4. Close ALL tags: <img />, <br /> // 5. Use { } for JavaScript expressions
You can embed any JavaScript expression inside curly braces { }:
const name = "Ahmed" const age = 25 const element = ( <div> <h1>Hello, {name}!</h1> <p>You are {age} years old</p> <p>Next year: {age + 1}</p> </div> )
Components are reusable functions that return JSX. Props let you pass data into them — like function parameters for your UI.
// 1. Define a component (always starts with uppercase!) function Greeting({ name, emoji }) { return ( <div> <h2>{emoji} Hello, {name}!</h2> </div> ) } // 2. Use it like an HTML tag function App() { return ( <div> <Greeting name="Ahmed" emoji="👋" /> <Greeting name="Sara" emoji="🌟" /> <Greeting name="Youssef" emoji="🚀" /> </div> ) }
Props are read-only. A component should never modify its own props. Think of them as arguments to a function — you use them, you don't change them.
State is data that belongs to a component and can change over time. When state changes, React re-renders the component automatically.
import { useState } from 'react' function Counter() { // Declare state: [value, setter] = useState(initial) const [count, setCount] = useState(0) return ( <div> <h2>Count: {count}</h2> <button onClick={() => setCount(count + 1)}> + Add </button> <button onClick={() => setCount(count - 1)}> − Subtract </button> <button onClick={() => setCount(0)}> Reset </button> </div> ) }
This is exactly what the code above produces:
Props = data passed into a component (from parent). State = data managed inside a component. Props are read-only; state can be updated with its setter function.
Let's review the key concepts from today's session, then test your understanding.
You describe the desired UI, React handles DOM updates.
React diffs a virtual copy against the real DOM for efficient updates.
Reusable functions that return JSX. They accept props as input.
Component-local data that triggers re-renders when updated.
In Session 2, we'll cover event handling, conditional rendering, lists & keys, and building a real mini-project. See you there!