DEV Community

loading...
Cover image for Hello Vite + React!

Hello Vite + React!

richicodes profile image richi.codes ・2 min read

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

Discussion (14)

pic
Editor guide
Collapse
merichard123 profile image
Richard

This is fantastic!!! Thank you so much for sharing! I used create react app or NextJs for everything. I was under the impression that vite was only for Vue but wow I tried it after reading your post and ITS SO FAST!! It's my time to ditch CRA. Thank you!!

Collapse
edgecaststudio profile image
Travis Ealy

@richard . Have you used Vite with nextjs yet?

Collapse
merichard123 profile image
Richard

If you were meant to tag me then no I haven't used Vite with Next. I usually just use npx create-next-app I don't think vite has a NextJS template you could probably add it manually though.

Thread Thread
edgecaststudio profile image
Travis Ealy

Yea was just curious. Thanks for your reply. Appreciate it!

Collapse
swagwik profile image
Sattwik Sahu

Yes yes amen. Ditch CRA hail ViteJS

Collapse
richicodes profile image
richi.codes Author

Thanks to you for the support and comment the article! It's true that is fantastic and so fast!

Collapse
swagwik profile image
Sattwik Sahu

When I started out with React, I used create-react-app. It was way too bloated and took a grand chunk of my time to set up.

Then I got to know about parcel and I set up React projects from scratch. But this one looks like it sets up real quick and no preconfig required. Certainly giving it a try today! 🚀

Collapse
richicodes profile image
richi.codes Author

Did you try it!? Works for you? It's real quick and easy but I guess if you need some specific config you should learn how to do it but it seems easier and for sure is faster.

Collapse
swagwik profile image
Sattwik Sahu

Idk... It worked for me right out of the box! I didn't do any extra config for it but then THAT IS AWWWEEESOOOMEE!!! 🔥 🔥 🔥

ViteJS is ❤️❤️❤️ I'll definitely use this for all projects now and recommend it to everyone.

Thank you so much for introducing this lifesaver to poor little Devs like me 😭😭😭
God bless ya, gold-hearted one

Collapse
donaldbrower profile image
Donny Brower

Has anyone had issues with hot module reloading? I followed the guide, but HMR works kicks in maybe once every dozen tries.

Collapse
donaldbrower profile image
Donny Brower

Never mind! A reboot did the trick. Interestingly, the HMR for Parcel Bundler wasn't working either.

Collapse
webgunti05 profile image
webgunti05

Unable to create the app, below is the screenshot, could someone help me?

Collapse
richicodes profile image
richi.codes Author

I can't see the screenshot but if you follow the example step by step it should work. Try to send the screenshot again and I will try to help you.

Collapse
blessingartcreator profile image
Blessing Hirwa

This is what I was looking for.
Thanks a bunch!