Getting Started with React

What this module covers

4 steps · React

1. Step 1. Getting Started with React

   React is a JavaScript library by Meta for building user interfaces, using a component-based architecture — each piece of UI is an isolated, reusable function. Key ideas: component tree, Virtual DOM, declarative rendering, one-way data flow. Modern projects scaffold with Vite (instant dev server start, sub-50ms HMR) rather than the older, slower Create React App: npm create vite@latest my-app -- --template react cd my-app && npm install && npm run dev A project has src/App.jsx (root component), src/main.jsx (entry point), and index.html. Your first component: function App() { return ( <div> <h1>Hello React!</h1> <p>My first component</p> </div> ); } export default App;

   Every React app is ultimately a tree of these small functions, each returning the JSX for its own piece of the UI — App is just the root of that tree. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Add a second element inside the div, like a paragraph.

2. Step 2. Quiz: Getting Started with React

   Answer these questions about React and Vite basics.

   Vite skips the upfront bundling step CRA relies on, and React uses a Virtual DOM to compute the minimum real-DOM changes needed on each update. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Answer the quiz below.

3. Step 3. Your First Component

   Build a Greeting component that accepts a name prop and renders "Hello, [name]! Welcome to React." with a styled heading.

   This is the smallest complete React component: a function, a prop, and JSX built from it — the pattern every other component in this course builds on. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does Greeting render the name inside a welcome message?

4. Step 4. Mini project: Getting Started with React

   Build a Greeting component that accepts a name prop and renders "Hello, [name]! Welcome to React." with a styled heading. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   This is the smallest complete React component: a function, a prop, and JSX built from it — the pattern every other component in this course builds on. This project stage asks you to apply the same idea without step-by-step scaffolding. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does Greeting render the name inside a welcome message?