How to Create a React App Using Vite for the First Time
HARUNA ZAKARIA
Introduction
If you're starting with React and looking for a fast and easy way to set up your project, Vite is a great tool to use. Vite is a modern build tool offering a much faster development experience than older tools like Create React App. In this guide, we’ll walk through how to create a React app using Vite for the first time.
Prerequisites
Before you start, make sure you have the following installed on your computer:
Node.js and npm: You can download them from nodejs.org
A code editor: VS Code is highly recommended
Basic knowledge of JavaScript
Install Vite Using npm
There are two main ways that you can install vite in your terminal;
- Open your terminal or command prompt and run the following command:
npm create vite@latest
You’ll be asked a few questions:
Name your project (e.g., my-react-app)
Choose a framework: Select React
Choose a variant: Pick JavaScript (or TypeScript if you prefer)
npm create vite@latest my-first-react-app -- --template react
This second option is just a straight from the first one and it allows you to run everything at a go.
Navigate to the Project Folder
After the setup, move into your new project folder using:
cd my-react-app
Replace my-react-app with whatever name you gave your project.
Install Dependencies
Once inside the project folder, install the required dependencies by running:
npm install
This will set up everything you need to get started.
Start the Development Server
Now you’re ready to see your app in action. Start the server by running:
npm run dev
You’ll see an output like:
VITE vX.X.X ready in X ms Local: http://localhost:5173/
Open in Your Browser
Open your browser and go to http://localhost:5173/. You should see the default Vite + React welcome page, like in the picture below.
Start Building Your App
Open your project in your code editor (like VS Code). You’ll see files like
main.jsx and App.jsx.
You can start editing App.jsx to begin customizing your React app.
For example, change the text inside the <h1> tag to:
<h1> Hello, Vite + React! </h1>
Save the file, and your browser will update instantly thanks to hot module replacement (HMR).
Conclusion
That’s it! You’ve successfully created your first React app using Vite. This setup is fast, lightweight, and perfect for getting started with modern React development. Now it’s time to start building and experimenting with your app.
For more info, check out:
Subscribe to my newsletter
Read articles from HARUNA ZAKARIA directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
HARUNA ZAKARIA
HARUNA ZAKARIA
Hello everyone, I enjoy helping other people, and I believe one of the best ways I can accomplish this is through sharing my knowledge and life experiences. As a result of this, I decided to take advantage of this forum to impart my knowledge and experience to other people who might choose to travel the same route as myself. The challenge then becomes: What is this path? I am Mr. Haruna Zakaria, a professional with extensive training and expertise in teaching and content creation. I have a special mix of skills that enable a flexible approach to problem-solving and creativity thanks to my extensive expertise in each discipline. I am currently doing my National Service as an ICT instructor at Nahdah Islamic JHS, an Islamic school in the Northern region. As a teacher, I'm passionate about establishing a welcoming and stimulating learning environment that supports my pupils' development and develops their curiosity. I offer creative thinking and adaptability to the classroom that motivates kids because I have expertise in teaching a range of disciplines, including social studies, mathematics, and ICT. I am flexible and creative in the classroom, which encourages pupils to investigate new concepts and take responsibility for the lessons. I also noticed that technology will have a significant impact on how the next generation is educated, therefore in addition to my teaching job, I forced myself to learn software engineering. I've used a ton of different learning environments to practice my software engineering abilities, but thus far ALX SE has been the most effective. ALX has taught me that, as a software developer, I must always come up with novel solutions to issues, and those solutions must have a positive effect on people's lives. I have extensive knowledge of several different platforms and programming languages as a software developer. I provide knowledge in creating complex apps and resolving complicated problems. To every project, I contribute technical proficiency together with a dedication to effectiveness and optimization. and as a content writer, I've chosen to join this platform in order to share what I've learned and the experience I've had so far with everyone else with as much efficiency as I can. I create content on the things I learn every day because it helps me remember them and it also makes it easier for me to find solutions when I run into problems. As a result, my work offers direction to both myself and anyone else traveling the same route but unsure of where to locate tools to make the journey easier. I've honed my skills as a content writer by creating interesting and educational articles that engage readers' interests. I will be creating content for a variety of audiences and technologies with an emphasis on attention to detail, creativity, and audience interaction. My unique combination of abilities makes me a valuable member of any team or project.