Vite Crash Course | Faster Alternative To CRA

In this video, we will talk about the Vite JavaScript build tool. We will also compare it to Webpack as well as Create React App.

💻 Blog Post:

⭐ All Courses:

💖 Show Support

👇 Follow Traversy Media On Social Media:

Timestamps:

0:00 - Intro
1:13 - Vite vs Traditional Module Bundlers
3:50 - Vite vs Create React App
7:14 - Setting Up a Project
8:21 - File & Folder Structure
11:27 - Creating a React Component
12:23 - Environment Variables
13:50 - Using Sass
14:50 - Build For Production & Preview
15:19 - Plugins

[bryan]

HOW this is the third time I needed to learn a particular language quick and when I get ready to study it, you've released a video

[anonymousontheinternet]

Just got started with Vite. Wanted a really quick intro so I could jump into it and not have to waste time watching a 2hr tutorial. This was perfect. Anything I need, I'll learn on the way.

[voidmind]

The developer experience is so much better! No more having to wait for the code to rebuild, and often you won't have to reload the whole component tree

[isaacqadri]

The future of frontend tooling is here, thank you Brad. <3

[krupeshanadkat]

You just made my life so cheerful ❤

I was in little panic when i heard new react docs got rid of cra & now they have mentioned to use next js by default. CRA official github repository also seems inactive. I did not want to learn Next js right now, but would still love to enjoy react on new projects without setting up things manually. This video really gave me confidence back.

[RustyNox]

Hey Brad, this was really useful to me, thank you for the long-form content on Vite, super clear explanation, love your style!

[haciendadad]

Thanks Brad! A replacement for CRA has been a long overdue! Vite looks really cool and excited to use it; starting today.

[anshuraj]

Anything taught by you simply gets into my head in a go. Thanks for such crystal clear lectures.

[ward]

I am glad I found this clip. I actually didn't enjoy Vite at first. Felt confusing... you know why? With webpack and other solutions got used to the fact that I have to define paths to bundle-able assets, a lot of other boilerplate config beforehand, specific production config and optimizations that you have to set up - I was looking for that in Vite and got super confused when I found nothing like it.
This has been the best switch I have done in build tools, ever.

[padeen]

Exactly at the moment when I wanted to search for "vite tutorial" this showed up. Great timing!

[yahayaoyinkansola]

Vite is really cool, i love the way it is so lightweight, giving the developer more control, and making the dev experience more enjoyable

[brianressler]

I needed something that I could use to quickly build out a concept without all the bells and whistles of nextjs and I ran into Vite. This video was godsend. I was kind of overthinking it since I am also still learning some React and WebPack fundamentals in the background. After watching your video, I am realizing how simple getting a Vite project up and running is and I can still finish learning react since nothing is syntactically different at least as of now.

[arianh]

It was a great video in order to get our hands dirty using Vite 👏🏻💯

[setfbiker]

It always feels special when I see a notif about a new video from you.

[Salah-YT]

thank u so much Mr Brad it was an amazing video about Vite Thank u so much, and I did %50 the javascript course on ur website so I love it thank u so much for all staff

[estherinyang]

I wish I could like this a million times. Thank you so much!

[Ryan-Phillips.]

Would be nice with more Vite tutorials. Like setting up navbar and routing.

[Ryguy]

excellent tutorial, I followed along without a single issue. thank you so much.

[rafaelalstent]

Thank you so much for making a informative video about a good replacement for CRA.
The video is great, we have the theory and the practice. Couldnt ask for more.
Thank you c:

[elhaambasheerch]

"Through out this video It might seem like I'm bashing CRA but actually I'm just talking about vite", COLD.