React

Why React?

React.js is a JavaScript library developed by engineers at Facebook. No prior React knowledge is needed to learn it — start at the beginning and move slowly.

JavaScript Refresher

Core JavaScript concepts to brush up on before starting React — syntax and functional programming ideas that come up constantly in React apps.

Destructuring (see Destructuring in the JavaScript cheatsheet) is widely used in React apps — worth being comfortable with before moving on.

The Virtual DOM

The Problem — DOM manipulation is slow, and most JS frameworks update it more than they have to. Example: a 10-item list where you check off one item — most frameworks rebuild the entire list, ten times more work than necessary, when only one item actually changed.

Analogy:

Manipulating the real DOM     → moving rooms in an actual house — slow, physical
Manipulating the virtual DOM  → editing a blueprint — fast, nothing is built yet
                    

Summary — updating the DOM in React

1. The entire virtual DOM gets updated.
2. The virtual DOM is compared (diffed) against a snapshot of what it looked like before the update — React figures out which objects changed.
3. The changed objects, and only those objects, get updated on the real DOM.
4. Changes on the real DOM cause the screen to change.

Intro to JSX

JSX is a syntax extension for JavaScript, written to be used with React. It looks like HTML but is not valid JavaScript on its own — a JSX compiler translates it into regular JavaScript before it reaches the browser.

Rendering JSX

import React from 'react';
import { createRoot } from 'react-dom/client';

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<h1>Hello world</h1>);

The argument to render() doesn't have to be JSX written inline — it can be a variable that evaluates to a JSX expression:

const toDoList = (
  <ol>
    <li>Learn React</li>
    <li>Become a Developer</li>
  </ol>
);

root.render(toDoList);

render() and the virtual DOM:

A React root's render() method only updates DOM elements that have
changed. Rendering the exact same JSX twice in a row does nothing the
second time — this is powered by the virtual DOM (see above).
                    

Common mistakes

• Closing tag written as an opening tag — <li>text<li> instead of <li>text</li> (missing the /)
• Multiple outer elements in one JSX expression — wrap them in a single <div>
• Forgetting parentheses around a multi-line JSX expression

Note: both "double" and 'single' quotes are valid for JSX attribute values in JavaScript — but this course's autograder only accepted single quotes.

Review

• React is a modular, scalable, flexible, and popular front-end library
• JSX is a syntax extension letting you write HTML-like expressions in JS
• JSX elements can be stored in variables, objects, arrays, and more
• JSX elements can have attributes and be nested, just like HTML
• JSX must have exactly one outer element
• createRoot() (from react-dom/client) creates a React root at a DOM element
• A root's render() method renders JSX on the screen, and only updates what changed

Advanced JSX

Building on the basics — self-closing tags, mixing real JavaScript into JSX, conditionals, rendering lists, and what JSX actually compiles down to.

Self-Closing Tags

Single-tag elements (<img>, <br>, <input>) are optional to self-close with a slash in HTML, but the slash is required in JSX.

// Fine in HTML, NOT FINE in JSX:
<br>

// Required in JSX:
<br />

JavaScript In Your JSX

Anything between JSX tags is read as JSX (i.e. text), not JavaScript — so {2 + 3} is needed to actually evaluate an expression rather than print "2 + 3" as a string. Curly braces mark the boundary of a JavaScript injection into JSX, similar to how quotes mark string boundaries.

<h1>2 + 3</h1>      // renders the text "2 + 3"
<h1>{2 + 3}</h1>    // renders "5"

Variables declared outside a JSX expression are accessible inside it the same way, since it's all the same JavaScript environment:

const name = 'Gerdo';
const greeting = <p>Hello, {name}!</p>;

Variable Attributes

Attribute values are often set from variables or object properties — these need curly braces, not quotes, since they're JavaScript, not string literals.

const sideLength = '200px';

const panda = (
  <img
    src="images/panda.jpg"
    height={sideLength}
    width={sideLength} />
);

Easy mix-up: src="images/panda.jpg" (string literal → quotes) vs height={sideLength} (variable → curly braces).

Event Listeners

Written like HTML event attributes, but camelCase, and the value must be a function reference — not a function call.

function clickAlert() {
  alert('You clicked this image!');
}

<img onClick={clickAlert} />

{clickAlert} passes the function itself — React calls it when the event fires. {clickAlert()} would call it immediately during render instead.

Conditionals in JSX

You can't inject a plain if statement into a JSX expression — { if (x) { ... } } breaks. Three ways around it:

// if/else — decide which element to build, outside the JSX
let img;
if (coinToss() === 'heads') {
  img = <img src={pics.kitty} />;
} else {
  img = <img src={pics.doggy} />;
}

// Ternary — inline, always renders one side or the other
const headline = <h1>{age >= drinkingAge ? 'Buy Drink' : 'Do Teen Stuff'}</h1>;

// && — renders the right side only if the left side is truthy, otherwise nothing
const tasty = (
  <ul>
    <li>Applesauce</li>
    {!judgmental && <li>Nacho Cheez Straight Out The Jar</li>}
  </ul>
);

.map() in JSX and Keys

.map() is the standard way to turn an array of data into an array of JSX elements. Lists built this way usually need a key attribute — a unique value per item that React uses internally to track list identity across renders.

const people = ['Rowe', 'Prevost', 'Gare'];

const peopleList = people.map((person, i) =>
  <li key={'person_' + i}>{person}</li>
);

root.render(<ol>{peopleList}</ol>);

Keys are needed when either is true:

• List items have memory across renders (e.g. a checked-off to-do item)
• The list's order might get shuffled between renders (e.g. search results)

The value appended must be the loop index variable (i), not a fixed number — 'person_' + i gives every item a unique key (person_0, person_1, ...); 'person_' + 1 would give every item the same key, defeating the purpose.

React.createElement()

JSX isn't required to write React — every JSX element is compiled into a call to React.createElement(type, props, children).

// JSX:
const h1 = <h1>Hello world</h1>;

// What it compiles to:
const h1 = React.createElement(
  "h1",
  null,
  "Hello world"
);

Easy to miss on the first attempt: all three arguments (and their commas) are required — use null for props when there are none.

Common mistakes

• Forgetting the slash on a self-closing tag — <br> instead of <br />
• Passing {fn()} (calls immediately) when you meant {fn} (passes the reference) for an event handler — or vice versa when you actually need the return value
• Quoting a variable attribute value instead of using curly braces, or vice versa for string literals
• Forgetting the ! negation in an && condition, inverting the intended logic
• Using a fixed number instead of the map index (i) when building unique keys
• Missing a comma or the null placeholder in React.createElement()

Your First React Component

A component is a small, reusable chunk of code responsible for one job — usually rendering some HTML and re-rendering it when data changes. Modern function components are just JavaScript functions that return JSX.

The Two Core Files

Imports You'll Need

Defining a Function Component

function MyComponent() {
  return <h1>Hello world</h1>;
}

export default MyComponent;

Default vs Named Exports/Imports

This is the single easiest thing to get tangled up on when a file has more than one component. The two forms are not interchangeable.

Gotchas actually hit while learning this:

1. Two `export default` statements in the same file → syntax error.
   Only one default export is allowed per file. A second component
   needs a named export instead (`export function Other() {}`), or
   its own separate file.

2. `import Other from './App';` (no braces) when Other is a NAMED
   export → doesn't error, but silently imports the DEFAULT export
   again under a different local name. Symptom: both components
   render identical content, because both variables point at the
   same default export underneath.

Rule of thumb: braces = "give me the thing with this exact name."
No braces = "give me whatever the default is, I'll call it what I want."
                    

Rendering the Component

import { createRoot } from 'react-dom/client';
import MyComponent from './App';

createRoot(document.getElementById('app')).render(<MyComponent />);

createRoot() takes a real DOM element (usually looked up by id) and turns it into a React root. The root's .render() method is then called with the JSX to display — this can be chained in one line, as above, or split into const root = createRoot(...) followed by root.render(...) on its own line.

Rendering More Than One Component

.render() can only take one root JSX element — multiple sibling components need a wrapper.

createRoot(document.getElementById('app')).render(
  <div>
    <MyComponent />
    <MySecondComponent />
  </div>
);

A <>...</> Fragment does the same job without adding an extra DOM node — worth knowing exists, but a plain <div> wrapper works fine and doesn't require learning a new concept early on.

Important: nesting one component inside another — <MyComponent><Other /></MyComponent> — is valid JSX syntax, but the nested content only actually appears on screen if MyComponent is written to accept and render props.children. Without that, whatever's nested inside is silently ignored — no error, it just never shows up. Two unrelated, independent components should be rendered as siblings (wrapped together), not nested.

Common Mistakes

• Naming a component starting with a lowercase letter — React tries to treat it as an HTML tag and fails
• Two export default statements in one file — only one default export allowed per file
• Using a bare (no-brace) import for something that's actually a named export — silently imports the default again instead of erroring
• Expecting a component to render nested children automatically without it using props.children
• Passing multiple sibling elements to .render() without a single wrapping element

Review

• react is imported when a component needs core React features; react-dom/client is imported to connect to the actual DOM
• Function components are plain JS functions, named in PascalCase, that return JSX
• Components are exported from the file that defines them and imported wherever they're used — default exports are unnamed and singular per file, named exports use exact matching names in braces
• createRoot(domElement).render(<Component />) is what actually puts a component on the screen
• Multiple top-level components being rendered together need a single wrapping element

Components and Advanced JSX

Putting the pieces together — multi-line returns, variables and logic inside a component, conditional rendering, and event handlers.

Multi-line JSX Needs Parentheses

A single-line return doesn't need them — return <h1>Hello world</h1>; is fine as-is. The moment the JSX spans more than one line, it must be wrapped in ( ).

function QuoteMaker() {
  return (
    <blockquote>
      <p>The world is full of objects...</p>
      <cite>
        <a target="_blank" href="...">Douglas Huebler</a>
      </cite>
    </blockquote>
  );
}

Technically this only breaks if a line break comes right after the return keyword — JavaScript's automatic semicolon insertion (ASI) then inserts a semicolon right after return, silently turning it into return; followed by dead code. If the opening tag stays on the same line as return, it technically still works without parentheses — but wrapping in parentheses is the safe, expected convention and what checkpoints/autograders check for.

Logic Before the Return Statement

A function component can contain more than just a return statement — variable declarations and calculations can happen first, then get used inside the JSX that follows.

function RandomNumber() {
  // logic first
  const n = Math.floor(Math.random() * 10 + 1);
  // then the return, using that logic
  return <h1>{n}</h1>;
}

Common mistake — logic can't live INSIDE the return's parentheses:

function RandomNumber() {
  return (
    const n = Math.floor(Math.random() * 10 + 1);  // syntax error
    <h1>{n}</h1>
  );
}

The const declaration must come BEFORE return, never inside it.
                    

Conditional Rendering with if/else

Distinct from the ternary / && approaches covered earlier (see Advanced JSX) — here the if/else lives inside the component, before any JSX, and each branch returns a completely different element outright.

function TonightsPlan() {
  if (fiftyFifty) {
    return <h1>Tonight I'm going out WOOO</h1>;
  } else {
    return <h1>Tonight I'm going to bed WOOO</h1>;
  }
}

if (fiftyFifty) and if (fiftyFifty === true) behave identically when the value is already a boolean — the === true is redundant but not wrong.

Event Handlers

Defined as a regular function inside the component, then passed to a JSX element as a prop-like attribute (props are covered properly in a later lesson). Convention: name the handler handle + the event type, e.g. handleClick.

function SubmitButton() {
  function handleClick() {
    alert('Submission Successful.');
  }
  return <button onClick={handleClick}>Submit</button>;
}

No parentheses on the handler when passing it — onClick={handleClick} passes the function itself, so React calls it only once the click actually happens. onClick={handleClick()} would call it immediately, during render, which is almost never what's wanted.

Common Mistakes

• Multi-line JSX without wrapping parentheses — safe only if the opening tag stays on the same line as return, fragile otherwise
• Putting a variable declaration inside the return statement's parentheses instead of before it
• Reaching for a ternary/&& when what's actually needed is two full, separately-returned elements via if/else
• Passing an event handler as handleClick() instead of handleClick, triggering it immediately instead of on the event

Review

• Multi-line JSX returns should be wrapped in parentheses
• Variables and calculations can be declared inside a component, before the return statement, and then used within the returned JSX
• Components can return entirely different JSX elements based on an if/else placed before the return
• Event handler functions are defined inside the component and passed to JSX elements by reference — no parentheses — so React calls them only when the event fires

Creating a React App with Vite

Vite (pronounced "veet") is the modern, standard way to scaffold a React project locally — it replaces the now-sunsetted create-react-app. Requires Node v18+ or v20+ (check with node -v).

Create the Project

npm create vite@latest

# or, specifying options directly:
npm create vite@latest my-react-app -- --template react

Interactive prompts ask for a project name, framework (React), and variant (JavaScript or TypeScript).

Run It

Note: unlike the Codecademy in-browser exercises, nothing shows up
just by saving a file — `npm run dev` has to be running in a terminal
for the app to actually be served anywhere. Leave that terminal tab
open; open a second tab for any other commands.
                    

Key Files & Folders

Common Mistakes

• Forgetting to run npm install before npm run dev — the app won't start without dependencies installed first
• Closing the terminal tab (or hitting Ctrl+C) running npm run dev and then wondering why localhost:5173 stops loading — the dev server has to stay running
• Editing main.jsx when a lesson refers to "index.jsx" — Vite's default template names the entry file main.jsx; same file, different name

Components Render Other Components

What makes React powerful isn't any single component — it's how components reference and render each other. A component returning another component's JSX tag is treated as a parent/child relationship.

import Button from './Button';

function App() {
  return <Button />;
}

export default App;

This is the same import/export/return pattern already used throughout earlier lessons — the pattern just gets a name here: breaking an app into smaller components, each in its own file, and composing them together by importing and returning them from a parent component. Smaller pieces are easier to reason about individually and can be reused wherever needed.

// NavBar.js
function NavBar() {
  return <nav>...</nav>;
}
export default NavBar;

// ProfilePage.js — NavBar is a CHILD of ProfilePage here
import NavBar from './NavBar';

function ProfilePage() {
  return (
    <div>
      <NavBar />
      <h1>All About Me!</h1>
    </div>
  );
}
export default ProfilePage;

Review

• A React app can contain many components, spread across many files
• Components interact by importing and returning instances of each other
• This lets components be broken into smaller pieces, kept in separate files, and reused wherever needed

Props

Props are information passed from a parent component to a child — React's version of function arguments. Props always flow one direction: top to bottom, parent to child. A child can't pass props back up or modify the props it receives — they're read-only.

Passing and Accessing props

// Passing — give the component instance an attribute:
<Greeting name="Jamel" />
<Greeting myInfo={["Astronaut", "Narek", "43"]} />   // non-strings need curly braces

// Accessing — via the props parameter:
function Greeting(props) {
  return <h1>{props.name}</h1>;
}

// Or destructured directly in the parameter list:
function Greeting({ name }) {
  return <h1>{name}</h1>;
}

String values use plain quotes (name="Jamel"); anything that's actually JavaScript — numbers, booleans, arrays, objects, variables — needs curly braces (age={56}, haunted={true}).

Using props to Make Decisions

A prop doesn't have to be displayed directly — it can drive which JSX gets returned instead.

function LoginMsg(props) {
  if (props.password === 'a-tough-password') {
    return <h2>Sign In Successful.</h2>;
  } else {
    return <h2>Sign In Failed..</h2>;
  }
}

Passing Event Handlers as props

Functions can be passed as props just like any other value — commonly used to let a child component (e.g. a button) trigger behavior defined in its parent.

// Talker.js (parent) — defines the handler, passes it down
function Talker() {
  function handleClick() {
    alert('blah '.repeat(10000));
  }
  return <Button onClick={handleClick} />;
}

// Button.js (child) — receives it, attaches it to a real element
function Button(props) {
  return <button onClick={props.onClick}>Click me!</button>;
}

The capitalization trap — same word, two different meanings:

<button onClick={props.onClick}>      lowercase tag = real HTML element
                                        → onClick is special: React wires
                                          up an actual browser click listener

<Button onClick={handleClick} />      capitalized tag = your own component
                                        → onClick here is just an ordinary
                                          prop name/key — React does nothing
                                          special with it. It only becomes a
                                          real listener once THAT component
                                          passes it down to a lowercase
                                          element internally.

The rule is about the element's capitalization, NOT about whether the
attribute name "looks like" an event. A made-up name like `bananaSplit`
on a lowercase <button> does NOT create a listener — it must be a name
React actually recognizes (onClick, onChange, onKeyUp, etc.) AND sit on
a real DOM element for it to mean anything special.
                    

Real React/DOM Event Prop Names

Only these (and similar recognized DOM events) trigger real listeners when placed on a lowercase element. Full reference: React docs — common events or MDN — Event reference.

props.children

Every props object has a children property — it holds whatever was placed between a component's opening and closing tags. A component only renders that nested content if it explicitly places {'{props.children}'} somewhere in its own return statement — nesting alone does nothing on its own.

function List(props) {
  return (
    <div>
      <h2>{props.title}</h2>
      <ul>
        {props.children}
      </ul>
    </div>
  );
}

// Usage:
<List title="Living Musician">
  <li>Sonny Rollins</li>
</List>

Easy-to-miss detail: if a component has more than one child between its tags, props.children is an array. If it has exactly one child, props.children is that single element directly — not wrapped in an array. This is checkable with props.children instanceof Array, which is exactly how a component could decide whether to pluralize a title based on how many children it received.

Default Values for props

// Default in the parameter list (destructured):
function Example({ text = 'This is default text' }) {
  return <h1>{text}</h1>;
}

// Or default inside the function body:
function Example(props) {
  const { text = 'This is default text' } = props;
  return <h1>{text}</h1>;
}

The default only applies when the prop is undefined — i.e. nothing was passed at all. Explicitly passing text="" still counts as passing something, so it overrides the default and renders empty, rather than falling back to the default text.

Common Mistakes

• Forgetting curly braces on a non-string prop value (numbers, booleans, arrays, objects, variables)
• Assuming onClick (or any on... name) is special on a capitalized component — it's only special on a lowercase/native element, and only if the name matches a real recognized event
• Inventing an attribute name and expecting it to create a listener on a native element — the name must match a real DOM event React recognizes
• Expecting nested JSX to render automatically without the component using {'{props.children}'}
• Assuming props.children is always an array — it's a single element (unwrapped) when there's exactly one child
• Trying to mutate a prop directly — props are read-only; new values must come from the parent

Review

• Props pass data one-way, parent to child, and are read-only
• Pass with an attribute (<Comp prop="value" />), access with props.propName or destructuring
• Props can drive conditional rendering, not just display values directly
• Event handlers can be passed as props — reference only, no parentheses, so React calls them on the event rather than immediately
• handleX / onX naming is convention for readability; only a real event name on a lowercase/native element actually creates a browser listener
• props.children holds whatever's nested between a component's tags — single child unwrapped, multiple children as an array
• Default prop values can be set via destructuring — they apply only when the prop is undefined