Title | : | Setting up vite, React, TypeScript, eslint, prettier, vitest, testing-library and react-router |
Duration | : | 54:23 |
Viewed | : | 87,690 |
Published | : | 02-09-2022 |
Source | : | Youtube |
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. View the starter template we create in this video here: https://github.com/CodingGarden/react-ts-starter 💜 Watch live on twitch: https://twitch.tv/codinggarden 📩 Sign up for my mailing list: https://list.coding.garden/ 💖 Donate: https://coding.garden/donate 😍 Pledge: https://coding.garden/pledge 💬 Discord: https://coding.garden/discord 🎉 Stickers: https://coding.garden/stickers 💻 Gear List: https://coding.garden/gear 🔎 Search for more Coding Garden videos here: https://coding.garden/videos 🗣 View the Coding Garden FAQ here: https://github.com/CodingGarden/faqs 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:13:56 eslint parserOptions: project - fix eslintrc + tsconfig.json 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:50:54 fix main.tsx WrappedApp import 00:51:20 A note on unit tests vs integration tests 00:53:40 That's All Folks 00:54:06 catJAM
What is Vite? How does it work? Explaining all ... 25:08 - 10,600 |
Vitest with React Testing Library, Jest-dom & MSW 18:44 - 4,258 |
Why is Everyone Using Vite? 07:34 - 69,156 |
ESLint with VSCode, Prettier, Husky and React F... 35:03 - 104,292 |
You might not need useEffect() ... 21:45 - 108,860 |
React Unit Testing Tutorial With React Testing ... 19:12 - 7,016 |
Vite Crash Course | Faster Alternative To CRA 16:24 - 174,719 |
Why Vitest Is Better Than Jest 13:13 - 122,483 |