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
