DEV Community

Cover image for Hello Vite + React!
richi.codes
richi.codes

Posted on

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

Top comments (16)

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

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

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

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
 
blessinghirwa profile image
Blessing Hirwa

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

Collapse
 
ultrox profile image
Marko Vujanic • Edited

You guys realize this is not the same thing as CRA?. Sadly configuration hell back, eslint, prettier etc, etc needs to be done manually.

Collapse
 
peterwitham profile image
Peter Witham

Literally just discovered this and now going to try it out. Thank you so much for sharing.