React · Lesson 1 of 7

Introduction and Setup

What React is, how to create a project with Vite and how a first component works.

• Beginner
• 12 min read
• 3 objectives

React is a JavaScript library for building user interfaces. Instead of writing step-by-step instructions to change the page (find this element, set its text), you describe what the screen should look like for the current data, and React updates the real DOM to match. That declarative style makes big interfaces far easier to reason about.

Core ideas

• Components: small, reusable functions that return a piece of UI. You build screens by composing them, like Lego bricks.
• Props and state: props are inputs passed into a component; state is memory owned by a component. When either changes, React re-renders.
• The virtual DOM: React compares the new output with the previous one and applies only the minimal real DOM changes.

Create a project

Vite is the standard fast tool for starting a React app. You need Node.js 18 or newer.

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Open the local address it prints (usually http://localhost:5173). Edit a file and the browser updates instantly.

The project layout

• index.html: has one empty <div id="root">.
• src/main.jsx: mounts your app into that div.
• src/App.jsx: your first component.

// src/main.jsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Your first component

// src/App.jsx
function App() {
  return (
    <main>
      <h1>Hello, React</h1>
      <p>This UI is a function.</p>
    </main>
  );
}

export default App;

Component names must start with a capital letter; that is how React tells <App /> from a plain HTML tag like <div>. StrictMode runs extra checks in development, including rendering twice to reveal impure code.

// Write your solution here