When a build tool is named after the French word for "fast" (not the hunger-related kind), you can assume it's designed for one thing and one thing only: deploying projects as quickly and efficiently as possible. This is exactly what Vite is about, and it can be used not just with React but with other frameworks and tools like Vue, Svelte and even plain old vanilla JavaScript.
It works by running a super-fast development server using native ES modules in the browser, which means no heavy bundling during development and changes being reflected almost instantly. When it's time to put that sweet code into production, Vite uses Rollup to bundle and optimize it.
Step 1: Create Your Vite + React Project
To create a new React project using Vite, the easiest way is to use the command line. Simply go to the folder where you want the project to be located and run:
npm create vite@latest my-react-app -- --template react
This creates the boilerplate code and basic structure for your React project, such as the public and src folders, README and configuration files.
Step 2: Install the Right Dependencies
Creating a new project only creates a list of dependencies and packages the project uses (in package.json), it doesn't actually install them. For this crucial step to occur, you need to navigate to the folder of your newly created project:
cd my-react-app
and run:
npm install
This will install all the dependencies, sub-dependencies and packages required for the project to work (as listed in package.json) into the node_modules folder.
Step 3: Run the Dev Server 🚦
With the foundation firmly in place, you're probably eager to see the React app in action and perhaps make some changes of your own. I hear you, and doing this simply required getting the development server up and running with the following command:
npm run dev
Give it a few seconds, and the server should now be listening on http://localhost:5173/ (default as of this writing). Going to this address in the browser takes you to the "front page" of your project, which at this point mostly consists of the animated logos for Vite and React, as well as a clickable button demonstrating how to use state by incrementing its value with every click.
Step 4: Explore & Tweak Your Project Files
But you now have the power to change this and build something more interesting! To get started, open the project in VS Code or another IDE and start inspecting the project structure. The starter template is located in src/App.jsx and this is where you can make changes that are in most cases reflected on the website as soon as you change the code and save.
A simple yet predictable way is to add your own name to a <h1> or <p> tag, but you can probably come up with something more interesting than that! You at least now have a good starting point for building your very own React app. Another suggested approach is to go do some beginner tutorials (perhaps over at freeCodeCamp or W3Schools), then add the different components you build there to this project.
That gives you the opportunity to both have a library of components that you can edit as much as you want, and learn more about how everything interacts with each other. And finally, if you ever need a break from Vite and React (unlikely but possible) or just want to free up some RAM, Ctrl + C stops the server as easily as npm run dev starts it.
Top comments (0)