Hello Vite + React!

richicodes

richi.codes

Posted on February 17, 2021

Hello Vite + React!

First of all introduce what is Vite ?

Vite is a Next Generation Frontend Tooling created by Evan You, the creator of the open source JavaScript framework Vue.js.

Why React?

So if it's from Vue.js you might wonder... how come I use it to create a React project if it represents that it would be the direct competition? Well, because Vite is an authoring tool, totally agnostic and the tool itself guides us to create a React application as we will see below.

And I can already tell you that the result is impressive, the speed with which it is created and the speed with which you can start working on your project.

How to get started?

yarn create @vitejs/app
Enter fullscreen mode Exit fullscreen mode

create vite

Put the name of the project.

In my case richi.codes

name project

Choose the template:

Scaffolding project in /richi.codes....
? Select a template: ... 
  vanilla
  vue
  vue-ts
 react
  react-ts
  preact
  preact-ts
  lit-element
  lit-element-ts
Enter fullscreen mode Exit fullscreen mode

I choose React.

select template react

And that's it!

We already have our project created now we just need to install and run it.

  cd richi.codes
  yarn
  yarn dev

 Done in 130.42s.
Enter fullscreen mode Exit fullscreen mode

Ready really fast

ready in 725ms

Conclusion

I have to say that compared to create-react-app, Vite is really faster and the result is amazing. It also seems that the project size is smaller than create-react-app, so if you are going to create a new project, Vite is really an option to consider.

running

💖 💪 🙅 🚩
richicodes
richi.codes

Posted on February 17, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Hello Vite + React!
javascript Hello Vite + React!

February 17, 2021