To create the starter files for any React.js project, I’ve always used the npm command create-react-app. It does exactly what it says on the box, creating all of my initial template files as well as a local development server and environment. I’ve grown frustrated over the years because setting up a basic barebones app takes about 3-4 minutes. Recently, I learned about a faster approach to setting up React apps that has all of the nice features that create-react-app provides. It makes use of a programme named Vite. Vite is a build tool similar to Webpack (create-react-app uses Webpack under the hood)
So, where do we begin?
Vite was created with Vue.js in mind, but it has since been tweaked to work with other frameworks, including React.js. All we have to do in our situation is change the keyword following ‘—template’ from vue to react. Don’t forget to change the app’s name to whatever you like. Assuming we’re using version 6.x of npm, we’ll run the following command:
npm init vite@latest vite-react-app –template react
Then we’ll cd into our directory and install the rest of the startup files before starting the development server:
cd vite-react-app
npm install
npm run dev
If you go to the browser, you’ll be able to see what I’m talking about As shown below, a React logo with a countdown and a button should appear.
Then, Start Hacking the world
conclusion
Vite impressed me with its speed. Installing and running on a local server took me 55 seconds. I haven’t done any heavy programming with Vite yet, but it appears to be a good tool. I can’t say whether I’ll utilise it on any larger projects in the future because it’s too early. There are a few alternative ways to install React.js with Vite.
NOTE
Vite offers templates for building apps in the frameworks listed below.
vanilla
vanilla-ts
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts
