Creating Your First React App

Table of Contents +

In the last lesson, Setting Up React Environment, you got Node and npm ready on your machine. Now comes the fun part: turning that setup into a real, running React app you can open in your browser.

So far React has been words on a page. After this lesson, it becomes something you built yourself. Let’s make it.

🤔 Why Use a Tool to Create a React App?

Here is the problem. A modern React app is not just one file, so it needs a lot of pieces working together before it can even run:

  • It needs a build step that turns your JSX into plain JavaScript the browser can read.
  • It needs a small server to show your work.
  • It needs a sensible folder layout, the right packages, and a way to refresh the page the moment you save.
  • Doing all of that by hand is slow, and it is easy to get wrong.

So instead of building it piece by piece, we use a tool that does it for us in one command. That tool is Vite:

  • Vite is a project starter and a development server, all in one.
  • It creates a ready-to-run React app for you.
  • Then it reloads that app instantly while you work, so you see changes right away.

Note

You may have heard of Create React App (CRA). It was the old way to start React projects. It still works, but it is slow and the React team no longer recommends it. Vite is the modern choice, so that is what we will use.

🧩 What “Creating an App” Actually Means

Think of Vite like a meal kit for cooking. The kit hands you the ingredients already measured out, the pan, and a card with the steps. You still do the cooking, but you skip the trip to the shop. Vite does the same thing for code, so it hands you a working project folder and you start writing React right away.

So what do you actually get when you run the create command?

  • Vite gives you a folder with a few starter files.
  • It also gives you a list of the packages your app needs.
  • Then it adds the settings that connect everything together.
  • From there, two more commands install those packages and start your app.

🛠️ Build It Step by Step

First, open a terminal in the folder where you keep your projects. Then follow these steps in order. Each command builds on the one before it.

  1. Create the project

    This command tells Vite to make a new project named my-app using its React template. The template is just a starting blueprint with React already wired up.

    Terminal window
    npm create vite@latest my-app -- --template react

    Here is what each part is doing:

    • The @latest part means “use the newest version of Vite”.
    • The --template react part tells it you want a React app, not Vue or plain JavaScript.
    • When it finishes, you will have a new folder called my-app.

  2. Move into the project folder

    Your terminal is still sitting in the old folder. You need to step inside the new one so the next commands run in the right place.

    Terminal window
    cd my-app

    cd means “change directory”. After this, everything you type happens inside your app’s folder.

  3. Install the packages

    The create step listed which packages your app needs, but it did not download them yet. This command reads that list and downloads everything into a folder called node_modules.

    Terminal window
    npm install

    This can take a little while the first time, so give it a moment. You only do this once per project.

  4. Start the app

    Now start the app. This command runs a local development server. That is a small web server running on your own computer, just for you.

    Terminal window
    npm run dev

    When it is ready, it prints a web address. Open that address in your browser and you will see your React app live.

After the last command, your terminal will show something like this.

Output 

  VITE v7.0.0  ready in 412 ms


  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Now open http://localhost:5173/ in your browser. A couple of things to know here:

  • The number 5173 is just the door Vite uses by default, and we call that door a port.
  • If you see the spinning React logo and a counter button, your first React app is running.
  • That is it. You made it.

Tip

Leave the npm run dev terminal running while you work. As long as it stays open, your app keeps updating every time you save a file. To stop it, press Ctrl + C in that terminal.

📋 What Each Command Did

Here is the whole flow in one view so it sticks.

Command What it does
npm create vite@latest my-app -- --template react Builds a new React project folder named my-app.
cd my-app Steps into that new folder.
npm install Downloads all the packages the app needs.
npm run dev Starts the local server so you can see the app.

⚠️ Common Mistakes

A few small things trip up almost everyone the first time. Watch for these.

  • Forgetting to cd into the folder. If you run npm install while still in your old folder, npm gets confused. There is no project there. Always move into my-app first.
  • Skipping npm install. If you jump straight to npm run dev, it fails. The packages were never downloaded. Install first, then run.
  • Dropping the double dash. The -- before --template react matters. It tells npm to pass that option along to Vite.
Terminal window
# ❌ Wrong — missing the -- so the template flag gets ignored
npm create vite@latest my-app --template react


# ✅ Right — the -- passes the flag through to Vite
npm create vite@latest my-app -- --template react
  • Closing the terminal and wondering why the page stopped loading. The app is live only while npm run dev is running. Close it and the address stops working.

✅ Best Practices

  • Pick a short, lowercase name with no spaces for your project, like my-app or todo-list. Spaces and capital letters cause trouble later.
  • Keep your projects in one tidy folder on your computer so they are easy to find.
  • Run npm run dev from inside the project folder, never from somewhere else.
  • If something looks broken, stop the server with Ctrl + C and run npm run dev again. A fresh start fixes many small issues.

🧩 What You’ve Learned

  • ✅ Modern React apps need a build tool, and Vite sets one up for you in one command.
  • ✅ Create React App is the older way and is no longer recommended; Vite is the modern choice.
  • ✅ The four-step flow: create with Vite, cd into the folder, npm install, then npm run dev.
  • ✅ npm run dev starts a local server and gives you an address like http://localhost:5173/ to open in your browser.
  • ✅ Keep the dev server running while you work so the app updates every time you save.

Check Your Knowledge

Test what you learned. Pick an answer for each question, then click Check.

  1. 1

    Which tool does this lesson use to create a modern React app?

    Why: Vite is the modern, fast project starter the React community now recommends over Create React App.

  2. 2

    What does the npm install command do?

    Why: npm install reads the project's package list and downloads everything into the node_modules folder.

  3. 3

    After running npm run dev, where do you usually see your app?

    Why: Vite starts a local server and prints an address like http://localhost:5173/ that you open in your browser.

  4. 4

    Why do you need to run cd my-app before npm install?

    Why: cd moves your terminal into the new project folder so the next commands act on the right project.

Score: 0 / 4

🚀 What’s Next?

You have a running app, but right now it is a mystery box of files. Next we will open it up and see what each file and folder is actually for.

Understanding React Project Structure

Previous Setting Up React Environment Next Understanding React Project Structure

Share & Connect

Share on LinkedIn