Setting up vite, React, TypeScript, eslint, prettier, vitest, testing-library and react-router

In this video I show how to setup a react app with vite, typescript, eslint, prettier, vitest, testing-library and react-router. We will use the base template for other react apps we create.

00:00:00 Intro
00:00:10 Hello Friends
00:01:26 generate vite + react + typescript app
00:02:15 generated app overview and cleanup
00:06:53 assets vs public folder
00:07:38 vite hot reloading and auto refresh
00:08:36 setup eslint
00:10:14 airbnb style guide
00:10:50 setup eslint airbnb config
00:12:58 setup eslint airbnb typescript config
00:16:02 fixing code with eslint
00:17:29 disabling eslint rules
00:19:10 setup prettier
00:21:20 setup eslint prettier config and plugin
00:23:54 vitest setup
00:27:17 testing-library setup
00:29:00 jest-dom setup
00:29:57 our first unit test
00:35:07 A note on testing / query methods
00:37:52 setup react-router v6
00:38:50 export "wrapped" App component
00:40:00 HashRouter vs BrowserRouter
00:41:15 setup Routes
00:42:13 setup "pages" directory
00:42:58 Home page
00:43:47 NotFound page
00:45:07 hash routes
00:45:30 Link component
00:46:17 NotFound test setup
00:48:08 Fix App exports
00:49:50 NotFound failing test
00:51:20 A note on unit tests vs integration tests
00:53:40 That's All Folks
00:54:06 catJAM

[hzkurgq]

I have been updating a react app that I 'inherited' and decided to use vite, vitest and eslint. I read through countless articles, all saying different things, all configuring their apps slightly differently. Then I found this video .... a presenter that speaks clearly, presents the content at a comfortable pace to follow along, doesn't rush or skip over important bits. One of the best coding tutorials I have come across. Thanks to this video, i was easily able to re-configure the app. Great job.

[abeljr]

I have set up my own boilerplate in the past using also vite and some linting packages. But this video is complete that it includes test packages for testing. Love it.

[ThomasPoth]

This video was very helpful for me. And there were no hiccups. I was able to code properly without any problems or weird bugs getting in my way. Thank you very much!

[isurumaldeniya]

Thank you CJ for the super helpful video.

[tiagonobrega]

This video was extremely helpful to me. Thank you for the great content man, you covered a lot of stuff and explained it all in a way that it was easy to understand!

[qjiosdk]

Good work man, one of the best videos on setting up a Vite project with Vitest + RTL.

[wellingtonostemberg]

Thank you too much!
You helped me solving a problem, nobody says that we need to add the file information on tsconfig -> include, this helped me a lot

[tukitukitsuki]

Amazing! This is the first time I have seen such a detailed video.

[maplestoryinchinese]

This is amazing! Quality content like this deserves so much more recognition.

[julianm]

Thanks, I was struggling so much with the setup, you made it really easy

[Andrei-pqqp]

This is gold. Excellent explanations. I love it.

[domoknows]

amazing tutorial. pretty much going to use this as my default starting vite project

[zb]

Thank you for this video - would love more on formatting and linting configuration, CI/CD automation tools, and more on testing.

[dbmitrich]

Thank you for this guide!
I found answers to some questions I had before.

[theprimecoder]

Thank you, I have been looking for this video for weeks.

[christiannikolov]

So glad you uploaded it can't wait to get my hands on it.

[Hattrick]

thank you for this video, really appreciate you taking the time to walk through everything! I'm working through The Odin Project and am currently on the React testing lessons. They teach you how to use create-react-app to build applications (which has Jest and the react testing library configured out of the box), but I much prefer Vite. This video includes everything that I need to know to still follow the curriculum despite the differences in tech used.

[neddev]

You are so damn efficient at writing code! It's a pleasure to watch ;)

[elenafromny]

OMG! I tryied to set up jets for 2 days and now I found this video, thank you a lot!

[ievlevdmitriy]

Amazing! I've already shared this video to my friends. Thank you for your excellent job!