ProgramGuru

Setting Up React

Setting Up React

A browser can read ordinary JavaScript, but the JSX used throughout this course needs a build tool. A dependable local project lets you edit a component and check the resulting screen after each change.

For learning client components, use a small React project with Vite. Node.js runs the development tooling, npm manages dependencies and the browser runs the resulting application. These are separate roles; installing React alone does not open a webpage.

  1. Explain

    Create a React JavaScript project and start its development server.

  2. Trace

    Explain how main.jsx connects App.jsx to the page.

  3. Apply

    Build the project and identify the files intended for deployment.

Set Up React: follow the relationship

  1. Edit App.jsx

    Write the school welcome component in the source folder.

  2. Transform JSX

    The development tool turns JSX into browser JavaScript.

  3. Load the page

    The entry file mounts App in the HTML root element.

Read this relationship alongside the complete code. This diagram explains the flow; it does not execute React.

Build the mental model

Create the project, install its dependencies, start its development server and then edit the existing App.jsx entry component. Keep the template’s entry file that mounts App. Replacing only App.jsx avoids accidentally removing the connection between React and the page.

Create the learning project

First install a currently supported Node.js release that meets Vite’s requirements. At this lesson’s review, Vite requires Node 20.19+ or 22.12+; a template may require a newer version. Check the tooling’s warning before continuing.

Open a terminal in a folder where you want the project, then run the commands below. The create command requests the React JavaScript template rather than a TypeScript template. Installing dependencies may require internet access. Keep package-lock.json so the resolved dependency versions can be reproduced.

After the start command, open the local address printed by the tool. Edit src/App.jsx using the complete component below. If startup fails, read the error for a missing dependency or unsupported Node version before changing the component. The optional build command checks production bundling after the development screen works.

npm create vite@latest school-react -- --template react
cd school-react
npm install
npm run dev
# After verifying the local screen, stop the server and build:
npm run build

Read the complete React example

The example below is the full contents of App.jsx. The template already contains package configuration, an HTML root element and a main.jsx mounting file. Those project files are prerequisites supplied by the template, not hidden imports required by this component.

React · JavaScript with JSX

import React from 'react';
export default function App() {
  return <main><h1>React classroom</h1><p>Your project is ready.</p></main>;
}

Expected screen and behavior

Initial screen: React classroom Your project is ready.

Connect the source to the screen

React · main example

import React from 'react';
export default function App() {
  return <main><h1>React classroom</h1><p>Your project is ready.</p></main>;
}

The development server transforms JSX and reloads changes while you work. A production build prepares files for deployment instead. The address printed by the tool identifies your local server; use that address because an occupied port may cause the tool to choose another one.

Avoid the common mistakes

Use a supported Node.js version that meets the current Vite requirements. Avoid older tutorials that make Create React App the default starting point. A local development server is not a production hosting arrangement, and a successful build does not prove that every user interaction works.

Practice before reading the solution

React · starting example

import React from 'react';
export default function App() {
  return <main><h1>React classroom</h1><p>Your project is ready.</p></main>;
}

Replace the starter screen with a school course welcome page.

Predict the initial visible text and explain which values determine it. Then inspect the worked solution below. Change one relevant input in your local project and check whether the screen follows your prediction. A working screen should be checked for the intended meaning, not merely the absence of an error.

Worked practice solution

The worked screen includes a heading and a plain paragraph, so it verifies both the component export and visible rendering. If the old starter screen remains, check the file you edited, the saved changes and the address in the browser.

React · JavaScript with JSX

import React from 'react';
export default function App() {
  return <main><h1>Welcome to River School</h1><p>We will build a student directory.</p></main>;
}

Expected screen and behavior

Initial screen: Welcome to River School We will build a student directory.

Check your reasoning

Choose the explanation that matches React and JavaScript behavior. Review the reasoning for each alternative before moving on.

What does the development server do?
Choose one answer. You can try again.

Answer and explanation

Transform and serve the application for local development

Correct. It supports trying the app while editing its source.

Use the idea in the next lesson

For learning client components, use a small React project with Vite. Node.js runs the development tooling, npm manages dependencies and the browser runs the resulting application. These are separate roles; installing React alone does not open a webpage.

Continue with Your First Component. Revisit JavaScript Prerequisites for React when the relationship between inputs and the resulting screen needs another look.

Read the primary reference: React documentation on Setting Up React.

Reaching the recap and completing the quizzes are separate milestones.

    Next lesson: Your First Component →