What React Is

Course 1 · Ch 1

What React Is, JSX, the Virtual DOM, and Vite Setup

Why React exists, the syntax it introduces, and getting a project running locally

Plain JavaScript can absolutely build interactive pages — the JS course covered exactly that, manipulating the DOM directly with document.querySelector and friends. React is a library that changes how you build that interactivity: instead of writing step-by-step instructions for changing the DOM, you describe what the UI should look like for a given set of data, and React figures out the DOM changes needed to make that true.

The Problem React Solves

As an interface grows, manually keeping the DOM in sync with your application's data gets messy fast — every place a value changes, you have to remember every DOM element that depends on it and update each one by hand. React lets you write declarative UI code instead: "this is what the page looks like when count is 5" rather than "go find the counter element and change its text to 5." When the data changes, React re-renders the description and patches only the parts of the real DOM that actually changed.

JSX — HTML-Like Syntax Inside JavaScript

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

That <h1>Hello, world!</h1> isn't a string and isn't real HTML — it's JSX, a syntax extension that lets you write markup directly inside JavaScript. A build tool (covered below) compiles it down to plain JavaScript function calls before it ever runs in the browser. JSX looks like HTML but follows JavaScript's rules underneath, which leads to a few differences worth knowing immediately:

function UserCard() {
  const name = "Philip";
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Welcome back!</p>
    </div>
  );
}

className instead of class — class is a reserved word in JavaScript, so JSX uses the DOM property name instead.
Curly braces { } drop back into plain JavaScript inside the markup — {name} embeds the variable's value.
A component must return a single root element — wrap multiple sibling elements in one parent <div> (or a "fragment," <>...</>, when you don't want an extra DOM element).
Every tag must be closed — <img />, not <img>, even for elements that are self-closing in plain HTML.

The Virtual DOM, Briefly

Each time a component's data changes, React builds a lightweight in-memory description of what the UI should look like — the virtual DOM — compares it against the previous version, and applies only the differences to the real, much slower-to-update browser DOM. You don't write any of this comparison logic yourself; it's the mechanism that makes the declarative style from earlier actually fast in practice. The chapters ahead focus entirely on the part you do write: describing what the UI should look like.

A component is just a function

Every example so far is a regular JavaScript function that returns JSX. By convention, component names start with a capital letter (Greeting, UserCard) — React uses that capitalization to tell components apart from regular HTML tags like <div>.

Setting Up a Project with Vite

Vite is the current standard tool for starting a new React project — it sets up the JSX-compiling build step, a fast local dev server with live reload, and a production build command, all with one starting command:

# in a terminal, in the folder you want the project created in
npm create vite@latest my-app -- --template react

cd my-app
npm install
npm run dev

npm run dev starts a local server (usually at http://localhost:5173) that automatically refreshes the browser whenever a file is saved. A fresh Vite + React project includes a few starter files worth knowing immediately:

src/main.jsx — the entry point; renders the top-level <App /> component into the page's <div id="root">.
src/App.jsx — the starter component you'll edit first; this is where the demo counter button lives by default.
index.html — the one real HTML file in the whole project; everything else gets rendered into it by React.

Create React App is no longer the default choice

Older tutorials often start with create-react-app. It's been effectively superseded by Vite, which starts dev servers dramatically faster — new projects should use Vite unless there's a specific reason not to.

A Minimal Component, Start to Finish

// src/App.jsx
function App() {
  return (
    <div className="app">
      <h1>My First React App</h1>
      <p>If you can see this, JSX is rendering correctly.</p>
    </div>
  );
}

export default App;

export default App; makes this component importable from other files — main.jsx imports and renders it. Replacing the contents of App.jsx with the snippet above and saving is enough to see it appear instantly in the browser, thanks to Vite's live reload.

Concept	What it means here
JSX	HTML-like syntax that compiles to JavaScript function calls
Component	A function that returns JSX describing a piece of UI
Virtual DOM	React's in-memory comparison step before touching the real DOM
Vite	The build tool/dev server used to run and bundle the project

Coding Challenges

Challenge 1

Set up a new Vite + React project. Replace the contents of App.jsx with a component that renders your name in an h1 and one sentence about yourself in a p, wrapped in a single parent div.

📄 View solution

Challenge 2

Create a const variable holding your favorite number, and embed it inside a JSX expression using curly braces, alongside some surrounding text (e.g. "My favorite number is 7").

📄 View solution

Challenge 3

Write a second component function (e.g. Footer) that returns a small footer element with some text, then use it inside App's JSX alongside the existing content — App's return value should now include both pieces.

📄 View solution

Chapter 1 Quick Reference

React — a library for declaratively describing UI; React handles updating the real DOM
JSX — HTML-like syntax inside JS; compiles to function calls, not parsed as a string
className, not class — JSX attribute naming follows JS property names
{ } drops back into plain JavaScript inside JSX markup
A component returns exactly one root element (or a fragment <>...</>)
Vite — current standard tool for starting/running a React project (npm create vite@latest)
Virtual DOM — React's mechanism for updating only what changed, not the whole page
Next chapter: components and props — passing data into a component from outside