How to Build a React App from Scratch with Vite (2026)

For years, Create React App was the default way to start a React project. It's now retired and no longer recommended. Vite has taken its place as the standard, and for good reason: it starts instantly, reloads changes in the browser almost immediately, and produces smaller, faster builds. You don't need to understand the internals to benefit. The short version: Vite serves your code to the browser in a smarter way during development, so you're not waiting around after every save. For a beginner, that fast feedback loop makes learning React noticeably more pleasant.

You need Node.js installed first. Check with node --version in a terminal; if you don't have it, grab the LTS version from nodejs.org. Now create the app. In your terminal, run: npm create vite@latest my-react-app Vite asks a couple of questions. Choose React as the framework, then choose JavaScript (you can pick TypeScript later once you're comfortable). This scaffolds a full project in a new folder called my-react-app.

Vite only creates the files. You still need to install the packages and start the server: cd my-react-app npm install npm run dev The npm install step reads the project's package.json and downloads React and Vite into node_modules. The npm run dev command starts the development server and prints a local address, usually http://localhost:5173. Open that address in your browser. You'll see the default Vite and React starter page. Leave the server running: any change you save now shows up in the browser almost instantly. That's hot module replacement, and it's the feature you'll come to love.

Open the folder in your editor. A few files matter most: index.html is the single page the whole app loads into. Notice it has one div with id root and nothing else. React fills that div. src/main.jsx is the entry point. It grabs that root div and tells React to render your app inside it. You'll rarely change this. src/App.jsx is the main component and where you'll spend your time. It's a function that returns JSX, which looks like HTML written inside JavaScript. This is the file to edit first. The rest (CSS files, the public folder, config files) you can mostly ignore while learning. Delete the boilerplate inside App.jsx and you're ready to write your own.

Replace the contents of src/App.jsx with something simple: function App() { return ( <div> <h1>My First React App</h1> <Greeting name="Sam" /> </div> ); } function Greeting({ name }) { return <p>Hello, {name}. Welcome to React.</p>; } export default App; Greeting is a component: a reusable function that returns a piece of UI. App uses it and passes name="Sam" as a prop, which is how a parent hands data to a child. The curly braces in {name} drop a JavaScript value into the markup. Save the file and watch the browser update. Change the name prop and it updates again.

Static UI is only half of React. The other half is state: data that changes and makes the screen react. Here's a counter: import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Clicked {count} times </button> ); } useState(0) sets up a piece of state starting at 0. It hands back the current value (count) and a function to change it (setCount). When you click the button, setCount runs, React re-renders the component, and the new number shows up. You never touch the DOM directly, and that's the whole point of React. From here, the path is more components, more state, and eventually routing and data fetching. Our /guides/how-to-learn-react-for-free lays out a free study plan, and /learn/frontend and /languages/react collect courses that go deeper.