React Project Tutorial for Beginners (Hooks, Context API, Tailwind, TypeScript, Authentication)
👉 IMPORTANT: Sign up for Kinde authentication here: https://bit.ly/3QOe1Bh (paid sponsorship). Disclaimer: this is a sponsored video (paid). It's your responsibility to evaluate safety, accuracy and other relevant parts of the reviewed product.
👉 NEW React & Next.js Course: https://bytegrad.com/courses/professi...
Final code: https://github.com/ByteGrad/todo-app
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 NEW React & Next.js Course: https://bytegrad.com/courses/professi...
👉 Professional JavaScript Course: https://bytegrad.com/courses/professi...
👉 Professional CSS Course: https://bytegrad.com/courses/professi...
👉 Web development roadmap 2024 & 2025: https://email.bytegrad.com
👉 Email newsletter (BIG update soon): https://email.bytegrad.com
👉 Discord: all my courses have a private Discord
⏱️ Timestamps:
00:00 Intro
02:10 Project setup
04:12 Fresh React app look-around
12:25 Tailwind CSS setup
16:52 Google font
19:54 Kinde setup
21:33 Creating components + styling with Tailwind
59:43 Reusable button component
1:03:50 Props
1:15:15 List / map (initial todos)
1:31:05 Manipulate styling (line-through)
1:33:25 useState hook (toggle, delete)
2:10:18 Event bubbling
2:13:45 Counter (prop drilling)
2:27:07 Add todo
2:29:08 Controlled input
2:35:38 Conditional rendering (empty state)
2:39:15 Restrict functionality for guest users
2:42:05 Better app structure
2:56:43 TypeScript in React
3:26:00 State management: State / derived state / event handlers
3:33:40 Folder structure: lib folder (types)
3:35:15 Context API for state management
4:03:45 Custom hook (for Todos Context)
4:10:02 useEffect: Data fetching in React
4:17:20 useEffect: Persist data in localStorage
4:32:12 Add authentication
4:50:21 Deploy to Vercel
4:54:07 Build (npm run build)
5:02:49 Outro
#webdevelopment #reactjs #nextjs
Note that my videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. You agree by watching the videos that you are solely responsible for any mistakes in your code.
This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561 .
.
TOP resource to LEARN AI for Developers - https://datacamp.pxf.io/RGyxrR (paid sponsorship & ByteGrad Sp. z o.o. gets commission)
