React Tutorial for Beginners: From Setup to First App (2026)

Quick answer: React is a JavaScript library for building user interfaces out of small, reusable pieces called components. In 2026 the fastest correct way to start is with Vite: run npm create vite@latest my-app -- --template react, then npm install and npm run dev. You get a live-reloading dev server in under two minutes, and every UI you build is just JavaScript functions returning HTML-like JSX. This tutorial walks through the setup, explains the files you will actually touch, and builds your first component.

What React is (and is not)

React handles one job: keeping the screen in sync with your data. You describe what the UI should look like for any given state, and React updates the browser efficiently when that state changes. It is not a full framework — routing, data fetching and forms are handled by libraries around React, which is why React skills pair naturally with tools you may already know. If you have followed our TypeScript vs JavaScript guide, the good news is that React works perfectly with plain JavaScript, and TypeScript can be added later without rewriting anything.

Setup in two minutes with Vite

You need Node.js installed first — our install guide pattern applies here too: download the LTS installer from nodejs.org and accept the defaults. Then open a terminal:

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

Open the printed address (usually http://localhost:5173). Edit src/App.jsx, save, and watch the browser update instantly — that feedback loop is why Vite replaced the older Create React App tooling for beginners and professionals alike.

The three files that matter

Your first component

Replace the contents of App.jsx with this and save:

function App() {
  const student = { name: 'Asha', course: 'React' };
  return (
    <main>
      <h1>Hello, {student.name}!</h1>
      <p>Welcome to {student.course}. You are building real UI now.</p>
    </main>
  );
}

export default App;

That is a normal JavaScript function that returns JSX — an HTML-like syntax that compiles to plain function calls. The curly braces embed any JavaScript expression into the output. Components can use logic (variables, conditions, loops) before the return, which is what makes React far more flexible than templating languages.

Where to go next in this series

• Components and props — breaking UI into reusable pieces
• The useState hook — making your UI interactive
• Lists and keys — rendering collections correctly
• Events and forms — capturing user input

If you want an instructor reviewing your components and correcting habits as you build, Ampersand Academy teaches React development one-to-one with real projects as the curriculum.

Frequently asked questions