Up until recently, you could create a React application using Create-React-App. It was a lightweight way to create React applications quickly and was supported by the React documentation. Create-React-App has been discontinued - it will still work I suppose, but it is no longer the recommended way to create React applications.
I first came across Vite while going through freeCodeCamp's new curriculum. About a week later, while furthering my React studies on Scrimba, they also suggested using Vite as a worthwhile replacement. After building a few projects, I definitely agree.
Vite is a build tool for creating React applications. Of course, I could try to create my own React applications using no build tool, but that can take a long time and there are many files to configure. If someone else has done this work already, I'm going to take advantage of that!
In order to use Vite, you need to install Node.js if you haven't already, and it needs to be a version higher than 18.0.0. Originally I had a higher version of Node installed (I think it was 22.0.0. or 23.0.0, I can't remember), and that caused some trouble with using Vite. Currently at the time I'm writing this, I'm using Node version 20.0.0 with zero issues.
Once Node is installed, do the following steps:
Navigate in your terminal to the folder you want your project to be stored in. For me, I usually change my directory to Desktop and store my project there.
Run
npm create vite@latestThis will start the tool's prompts. It will ask you just a few questions:
- What is the project's name?
- What library/framework are we using?
- What language do you want to focus on? (For example, when I choose React for question #2, it will then ask if I want to focus on JavaScript, Typescript, or a few other options).
Once these questions have been answered, Vite will build out the project. At the end, it will give you three commands to run in a row:
cd <project-name>npm installnpm run dev
That last command will be one you probably use a lot, as it is the command that starts up the live server so you can see your work rendered in the browser. I personally find myself starting and stopping the server as needed, usually when I need to use my terminal for something.
And that's it! In the folder you selected, your new Vite project will be created. At this point, you can go into the project itself and clear out all the default stuff (styles, text, images, favicons) and begin creating your JSX files, stylesheets, and link them together.
Documentation link: https://vite.dev/guide/
Top comments (0)