DEV Community

Sravanthi
Sravanthi

Posted on

Creating My First React Project with Vite: Understanding Every Command

#react #vite #beginners #javascript

Introduction

When I started learning React, almost every tutorial began with a few commands:

npm create vite@latest
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

I followed along, but I realized something: I didn't actually know what these commands were doing.

Questions like these came to mind:

  • Why do we use Vite?
  • Why do we need npm install?
  • Why do we run npm run dev?
  • What does code . mean?

So instead of just memorizing the commands, I wanted to understand why each one is needed.
In this article, I'll walk through creating my very first React project with Vite and explain each command along the way.

Creating the Project

I started by opening my terminal and running the following command:

npm create vite@latest react-intro
Enter fullscreen mode Exit fullscreen mode

Terminal showing npm create vite command

Let's break this command down.

  • npm : Node Package Manager. It helps install and manage JavaScript packages.
  • create : Creates a new project.
  • vite : Uses Vite to set up the basic structure of the React project, including the required files and folders.
  • @latest : Downloads the latest version of Vite.
  • react-intro : The name of my project folder. At this point, Vite has created the initial project structure for us.

Vite Created My Project... What's Next?

After a few seconds, Vite displayed this message.

Vite showing instructions to run cd react-intro npm install and npm run dev

It asked me to run three commands:

cd react-intro
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

When I first saw these commands, I wondered:
"Why do I need to run these? What do they actually do?"

Let's go through them one by one.

Moving into the Project Folder

The first command is:

cd react-intro
Enter fullscreen mode Exit fullscreen mode

The cd command stands for Change Directory.

Think of it like entering a newly built house.

Vite has already created the house (the react-intro folder), but I'm still standing outside.

Running

cd react-intro
Enter fullscreen mode Exit fullscreen mode

takes me inside the project folder so I can work with its files.

run cd react-intro

Installing Project Dependencies

After creating the project, Vite displayed the next commands I needed to run:

npm install
Enter fullscreen mode Exit fullscreen mode

Running npm install

After installation completes, you will notice a new node_modules folder created inside your project.

At first, I wondered why this step was needed. Vite had already created my React project, so why did I need to install anything?

The reason is that Vite creates the project structure and configuration files, but it does not download all the packages required for the application to run.

The npm install command reads the package.json file and downloads all the required dependencies for the project.

These dependencies are stored inside a folder called:

node_modules

The node_modules folder contains the packages that our React application needs, including React and other tools used during development.

After npm install finishes, the project is ready to run.

Opening the Project in Visual Studio Code

After installing the dependencies, I opened the project in Visual Studio Code to continue development using:

code .
Enter fullscreen mode Exit fullscreen mode

Terminal showing code to open in vs code

The .(dot) represents the current folder.

Since I was already inside my react-intro project folder, this command opened that project directly in Visual Studio Code.

React project opened in Visual Studio Code showing project files

Now I could see all the files and folders that Vite had created, including:

  • src
  • public
  • package.json
  • node_modules (created after running npm install)

From this point on, I used the VS Code integrated terminal to continue working on my project.

Running the Development Server

With the project open in VS Code, I opened a new terminal and ran:

npm run dev
Enter fullscreen mode Exit fullscreen mode

VS Code terminal showing npm run dev

This command starts Vite's development server and displays a local URL, usually:

http://localhost:5173

The port number may change if another application is already using that port.

VS Code terminal showing Vite development server running

Opening this URL in the browser lets you see your React application running locally.

Browser displaying the default React Vite application

One feature I really liked is that Vite automatically reflects my code changes in the browser whenever I save my files. This feature is called Hot Module Replacement (HMR), which makes development much faster because I don't need to refresh the browser manually.

Conclusion

Creating a React project is more than just copying commands from a tutorial.

Understanding what each command does helped me feel more confident while setting up my development environment.

The commands I learned:

  • npm create vite@latest react-intro : Creates a new React project using Vite
  • cd react-intro : Moves into the project folder
  • npm install : Installs the required project dependencies
  • code . : Opens the project in Visual Studio Code
  • npm run dev : Starts the local development server

This is the first part of my React learning journey. I'll continue documenting what I learn as I work towards becoming a full-stack developer.

What's next?

This is Part 1 of my React learning journey.

In the next article, I'll explore the React project structure and understand the purpose of folders like src, public, and files like package.json.

Thanks for reading!

Top comments (0)