데브허브 | DEVHUB | ReactJS Beginner Course 2025 | Learn React By Building a Website
💙 Check Out My New Released React Course: https://www.webdevultra.com/react
Use the code EARLY100 to get 20% off if you are one of the first 100 people :)
Welcome to my beginner react course. In this course you will learn react in 1.5 hours. This is a beginner video and you don't need any prior react knowledge, although its welcomed :) I do recommend knowing the basics of JavaScript beforehand.
🌟 Support My Work: https://buymeacoffee.com/pedrow
📰 Join My Newsletter: https://www.pedrotech.co/newsletter
📖 Video Resources:
Code Repo: https://www.webdevultra.com/video-inf...
🚀 Courses & Tutorials:
Learn ReactJS By Building 6 Projects: https://codedamn.com/learn/reactjs-pr...
GraphQL Course for Beginners: https://codedamn.com/learn/graphql-fo...
💻 Check out my Blog: https://www.pedrotech.co
🐤 Follow me on Twitter: ( / pedrotech_ )
📸 Follow me on Instagram: ( / pedro.fmachado_ )
🧳 Follow me on Linkedin: ( / pedrotech )
👨💻 GitHub: https://github.com/machadop1407
📋 Business Email: pedro@pedrotech.co
Timestamps:
00:00:00 | Introduction & Course Overview
00:02:59 | React Concepts Overview (JSX, Components, Props, Virtual DOM)
00:03:31 | Environment & Project Setup (Node.js, VS Code, Vite)
00:08:47 | Project Structure Overview (vite.config.js, package.json, index.html, main.jsx, app.jsx, CSS & Assets)
00:15:52 | Starting UI & Quiz Component Creation
00:23:01 | Defining the Question Bank
00:23:59 | Rendering Quiz Questions & Options
00:27:56 | Adding Navigation Buttons
00:29:41 | State Management & Option Selection
00:34:47 | Tracking User Answers & Current Question State
00:41:30 | Navigation Logic (Prev/Next & Disabling Buttons)
00:45:38 | Dynamic Styling for Selected Options
00:53:05 | Conditional Next/Finish Button Label
00:56:55 | Creating Results Component
01:00:36 | Passing Props & Calculating Score
01:06:55 | Restart Quiz Functionality
01:17:14 | Conclusion & Next Steps
![[토비 살롱🌱] 해명하는 잼민이 - 토스페이먼츠 테크리드 김재민님](https://i1.ytimg.com/vi/xf66UH1fCz4/hqdefault.jpg)
![[FE] 리액트 - 37강: 임시 저장 목록 조회 시스템 구축하기 下](https://i2.ytimg.com/vi/a-1KZp2Infg/hqdefault.jpg)
