🚀 Learn React by Projects: Build & Test a GitHub User Search App with TailwindCSS 🌟

Veröffentlicht am: 01 August 2024
auf dem Kanal: coding with LuLu

172

Welcome to "Learn React by Projects," your ultimate guide to mastering React through practical, hands-on projects! In this engaging tutorial series, designed for absolute beginners, we'll build a complete GitHub user search application. Along the way, you'll learn how to set up a project, style it with TailwindCSS, manage state with Context API and Reducers, and write comprehensive unit tests.

challenge: https://www.frontendmentor.io/challen...

font: https://fonts.google.com/specimen/Spa...

code source:
starter: https://github.com/luluCodingWizard/u...
section 1: https://github.com/luluCodingWizard/u...
section 2: https://github.com/luluCodingWizard/u...
section 3: https://github.com/luluCodingWizard/u...
section 4: https://github.com/luluCodingWizard/u...
section 5: https://github.com/luluCodingWizard/u...
section 6: https://github.com/luluCodingWizard/u...
section 7: https://github.com/luluCodingWizard/u...
section 8: https://github.com/luluCodingWizard/u...

Timeline:
00:00 requirements & project overview
02:06 section 1: Project Clean up
04:00 add tailwindCSS to create react app project
07:05 section 2: UI structure
07:39 Import Font
09:47 create Header component
12:16 tailwindCSS Configuration
17:10 Switching theme
27:40 section 3: Theme Custom Hook
32:28 section 4: unit test Header Component
41:04 unit test useTheme Custom hook
47:30 section 5: Github user search
01:01:04 section 6: Refactor to Reducer & context Api
01:19:25 section 7: unit test user search Context
01:28:41 unit test User Search component
01:33:57 section 8: Build user details component

By the end of this tutorial, you'll not only have a fully functional GitHub user search app but also a solid understanding of key React concepts and testing practices. Plus, you'll have a beautifully styled app thanks to TailwindCSS.

Make sure to follow along, and don't forget to check out the GitHub repository (link will be added later) for the complete source code.

#LearnReact #ReactTutorial #ReactProjects #GitHubAPI #TailwindCSS #ContextAPI #ReactHooks #WebDevelopment #FrontEndDevelopment #JavaScript #CodingForBeginners #ReactTesting #CreateReactApp #ReactComponents

Auf dieser Seite können Sie das Online-Video 🚀 Learn React by Projects: Build & Test a GitHub User Search App with TailwindCSS 🌟 mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer coding with LuLu 01 August 2024 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 172 Mal angesehen und es wurde von 12 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!