Topic 1: Introduction to React

📖 8 min read · 🎯 beginner · 🧭 Prerequisites: None

Why this matters

Up until now, you've probably built a webpage by writing HTML, sprinkling in some JavaScript, and hoping everything holds together. That works — until your page grows. Suddenly you're updating the same element in five places, losing track of what changed, and one small mistake breaks the whole thing. React was built to solve exactly this problem. It's a JavaScript library that lets you build your UI in small, reusable pieces called components — so your code stays organised, predictable, and easy to change. This lesson lays the foundation for everything React.

What You'll Learn

• What React is and why its Virtual DOM and unidirectional data flow matter
• How to scaffold a new project with Create React App and run the dev server
• How to write functional components using JSX syntax
• How to pass data with props and manage local data with the useState hook
• How to handle events, render conditionally, and map arrays to list elements

The Analogy

Think of a React application as a city made of LEGO sets. Each LEGO set is a component — self-contained, reusable, and responsible for its own appearance. The city planner (React) keeps a miniature blueprint of the whole city in memory (the Virtual DOM), and when one house changes color, only that house gets repainted — not the entire skyline. Data flows in one direction: instructions come from the city hall (parent components) down to individual buildings (child components), never the other way around, so there's never any confusion about who gave which order.

Chapter 1: What is React?

React is a JavaScript library developed by Facebook for building user interfaces, particularly for single-page applications (SPAs). It allows developers to create reusable UI components, manage the state of an application efficiently, and ensure a seamless user experience.

Key Features of React

1. Component-Based Architecture — Build encapsulated components that manage their own state, then compose them into complex UIs.
2. Virtual DOM — React keeps a lightweight copy of the real DOM in memory. When state changes, it diffs the virtual copy against the real one and updates only the components that changed — making renders fast.
3. Unidirectional Data Flow — Data travels from parent to child through props. This one-way pipeline makes applications easier to debug and reason about.
4. JSX Syntax — A syntax extension that combines JavaScript and HTML-like markup, making component templates readable and expressive.

flowchart TD
    A[Parent Component] -->|props| B[Child Component A]
    A -->|props| C[Child Component B]
    B -->|renders| D[Real DOM Node]
    C -->|renders| E[Real DOM Node]
    F[Virtual DOM] -->|diff + patch| D
    F -->|diff + patch| E

Chapter 2: Setting Up a React Environment

The class chose Create React App — a zero-config tool that bootstraps a new React project with a modern build setup (Webpack, Babel, ESLint) already wired up.

Installing Create React App

Run this single command to scaffold the project. No global install required — npx grabs the latest version on the fly.

npx create-react-app my-react-app

This creates a new directory called my-react-app containing all necessary files and dependencies, including src/, public/, package.json, and a working App.js.

Running the React Application

Navigate into the project directory and start the development server:

cd my-react-app
npm start

The default React application is now running at http://localhost:3000. The dev server supports hot reloading — save a file and the browser updates instantly, no manual refresh needed.

Chapter 3: Understanding React Components

React applications are built entirely from components. A component is a JavaScript function (or class) that returns JSX describing a piece of the UI. Components are the fundamental building blocks — every button, header, form, and page section is one.

Creating a Simple Component

The class wrote a Greeting component that renders a heading.

src/components/Greeting.js:

import React from 'react';

function Greeting() {
    return (
        <div>
            <h1>Hello, Vizag!</h1>
        </div>
    );
}

export default Greeting;

Using the Component

Components are used like custom HTML tags. The class dropped <Greeting /> into the root App component:

src/App.js:

import React from 'react';
import './App.css';
import Greeting from './components/Greeting';

function App() {
    return (
        <div className="App">
            <Greeting />
        </div>
    );
}

export default App;

React sees <Greeting /> and calls the Greeting function, inserting its returned JSX into the render tree.

Chapter 4: JSX Syntax

JSX is a syntax extension for JavaScript that looks similar to HTML. It is not a separate language — Babel compiles JSX down to plain React.createElement() calls before the browser ever sees it. JSX makes components dramatically easier to read and write.

A Basic JSX Expression

const element = <h1>Hello, world!</h1>;

Embedding JavaScript Expressions in JSX

Wrap any JavaScript expression in curly braces {} to evaluate it inline:

const name = "Alice";
const element = <h1>Hello, {name}!</h1>;

Anything that is a valid JavaScript expression works inside {}: variables, ternaries, function calls, arithmetic. Statements (like if or for loops) do not — use ternary operators or .map() instead.

Chapter 5: Props and State

the trainer paused to emphasize the next point: "Props and state are the two mechanisms by which data lives and moves in a React application. Master these and you understand 80 % of React."

Props

Props (short for properties) are read-only attributes passed from a parent component down to a child. The child receives them as a plain JavaScript object.

src/components/Greeting.js — accepting a name prop:

import React from 'react';

function Greeting(props) {
    return (
        <div>
            <h1>Hello, {props.name}!</h1>
        </div>
    );
}

export default Greeting;

src/App.js — passing the name prop:

import React from 'react';
import './App.css';
import Greeting from './components/Greeting';

function App() {
    return (
        <div className="App">
            <Greeting name="Vizag" />
        </div>
    );
}

export default App;

The string "Vizag" travels from App into Greeting via props.name. The child never mutates props — it only reads them.

State

State is a built-in mechanism that lets a component create and manage its own dynamic data. When state changes, React re-renders that component automatically. The useState hook is the modern, function-component way to declare state.

src/components/Counter.js:

import React, { useState } from 'react';

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

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

export default Counter;

useState(0) initializes count to 0 and returns the setter setCount. Every call to setCount triggers a re-render with the new value.

src/App.js — composing Greeting and Counter together:

import React from 'react';
import './App.css';
import Greeting from './components/Greeting';
import Counter from './components/Counter';

function App() {
    return (
        <div className="App">
            <Greeting name="Vizag" />
            <Counter />
        </div>
    );
}

export default App;

Chapter 6: Handling Events

Handling events in React is similar to handling events in regular HTML, with two key syntactic differences: event names are camelCase (onClick, not onclick) and you pass a function reference, not a string.

src/components/ClickButton.js:

import React from 'react';

function ClickButton() {
    function handleClick() {
        alert('Button was clicked!');
    }

    return (
        <button onClick={handleClick}>
            Click me
        </button>
    );
}

export default ClickButton;

Notice onClick={handleClick} — the function is passed by reference, not called immediately. Writing onClick={handleClick()} would invoke it on every render, which is almost never what you want.

Chapter 7: Conditional Rendering

React components can return different JSX based on runtime conditions — this is called conditional rendering. Standard JavaScript control flow (if/else, ternary, logical &&) works directly inside a component function.

src/components/ConditionalGreeting.js:

import React from 'react';

function ConditionalGreeting(props) {
    const isLoggedIn = props.isLoggedIn;

    if (isLoggedIn) {
        return <h1>Welcome back!</h1>;
    } else {
        return <h1>Please sign up.</h1>;
    }
}

export default ConditionalGreeting;

src/App.js — passing isLoggedIn={true}:

import React from 'react';
import './App.css';
import Greeting from './components/Greeting';
import Counter from './components/Counter';
import ClickButton from './components/ClickButton';
import ConditionalGreeting from './components/ConditionalGreeting';

function App() {
    return (
        <div className="App">
            <Greeting name="Vizag" />
            <Counter />
            <ClickButton />
            <ConditionalGreeting isLoggedIn={true} />
        </div>
    );
}

export default App;

With isLoggedIn={true}, the browser renders "Welcome back!". Flip it to false and it renders "Please sign up." — no page reload, no server round-trip.

Chapter 8: Lists and Keys

Rendering a collection of data items is one of the most common tasks in any UI. React handles this with JavaScript's .map() method, and it requires a special key prop on each list item.

Why keys? React uses keys to identify which items changed, were added, or were removed. Without unique keys, React cannot efficiently update the list and may produce subtle rendering bugs.

src/components/NumberList.js:

import React from 'react';

function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
        <li key={number.toString()}>
            {number}
        </li>
    );

    return (
        <ul>{listItems}</ul>
    );
}

export default NumberList;

src/App.js — final composition of all components:

import React from 'react';
import './App.css';
import Greeting from './components/Greeting';
import Counter from './components/Counter';
import ClickButton from './components/ClickButton';
import ConditionalGreeting from './components/ConditionalGreeting';
import NumberList from './components/NumberList';

function App() {
    const numbers = [1, 2, 3, 4, 5];

    return (
        <div className="App">
            <Greeting name="Vizag" />
            <Counter />
            <ClickButton />
            <ConditionalGreeting isLoggedIn={true} />
            <NumberList numbers={numbers} />
        </div>
    );
}

export default App;

NumberList receives [1, 2, 3, 4, 5] via the numbers prop and renders a <ul> with five <li> elements, each keyed by its string value.

🧪 Try It Yourself

Task: Build a TaskList component that accepts a tasks prop (an array of strings) and renders each task as an <li> inside a <ul>. Pass it at least three tasks from App.js.

Success criterion: You should see a bulleted list of your three tasks rendered in the browser at http://localhost:3000.

Starter snippet — drop this into src/components/TaskList.js:

import React from 'react';

function TaskList(props) {
    const items = props.tasks.map((task, index) =>
        <li key={index}>{task}</li>
    );
    return <ul>{items}</ul>;
}

export default TaskList;

Then in src/App.js, import TaskList and render:

<TaskList tasks={["Learn React", "Build a component", "Ship to Vizag"]} />

Once it's working, try adding a fourth task and watch the list update without touching any HTML.

🔍 Checkpoint Quiz

Q1. What problem does the Virtual DOM solve, and why does it improve performance compared to directly manipulating the real DOM?

Q2. Given this component:

function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
}

What does <Greeting name="Vizag" /> render in the browser?

A) Hello, props.name! B) Hello, Vizag! C) Hello, {props.name}! D) A runtime error — name is undefined

Q3. What is wrong with the following event handler?

<button onClick={handleClick()}>Click me</button>

A) handleClick should be wrapped in an arrow function B) onClick should be lowercase onclick C) handleClick is being called immediately at render time instead of passed as a reference D) Both A and C

Q4. You have an array const fruits = ["Apple", "Banana", "Cherry"]. Write the JSX that maps this array to a <ul> list, using each fruit's value as its key.

A1. The Virtual DOM is an in-memory copy of the real DOM. When state changes, React diffs the new virtual tree against the previous one and only applies the minimal set of real DOM mutations needed. Direct DOM manipulation is expensive because every change can trigger reflows and repaints — React batches and minimizes those operations.

A2. B) Hello, Vizag! — props.name is "Vizag", which JSX evaluates and interpolates into the heading.

A3. C) (and by extension D, since A is a valid fix). Writing handleClick() calls the function immediately during render and passes its return value to onClick. The correct form is onClick={handleClick} (reference) or onClick={() => handleClick()} (arrow wrapper).

A4.

const fruits = ["Apple", "Banana", "Cherry"];
const list = (
    <ul>
        {fruits.map((fruit) => (
            <li key={fruit}>{fruit}</li>
        ))}
    </ul>
);

Using the fruit name as the key works here because the values are unique. For dynamic or reordered lists, prefer stable unique IDs over array indices.

🪞 Recap

• React is a Facebook-developed JavaScript library for building UIs via reusable, self-contained components.
• The Virtual DOM diffs state changes and patches only what changed in the real DOM, keeping updates fast.
• JSX lets you write HTML-like markup inside JavaScript; curly braces {} embed any JavaScript expression.
• Props flow read-only from parent to child; state (managed with useState) is local, mutable data that triggers re-renders on change.
• Event handlers are camelCase and accept function references (onClick={fn}, not onClick={fn()}).
• Conditional rendering uses ordinary if/else or ternary logic; list rendering uses .map() with a unique key prop on every item.

📚 Further Reading

• React Official Documentation — the canonical source of truth for every React concept covered here
• Create React App Docs — full reference for CRA configuration and build options
• MDN: Introduction to the DOM — background on why Virtual DOM optimizations matter
• ⬅️ Previous: None
• ➡️ Next: React Structure