Conquer Core Modern React — Fast & Easy with Game Projects - 게임 프로젝트로 쉽고 빠르게 공략하는 핵심 모던 리액트 [Coloso, Lee Dohaeng (이도행)]
- Publisher
- Coloso
- Product Type
- Video Course
- Author
- Lee Dohaeng (이도행)
- Language
- Korean, English Subtitles, Official Korean Subtitles
- Duration
- 12:00
- Release date
- May 8, 2024
- Skill level
- Project Files
- Yes
- Product Price
- $130
Modern React with TypeScript: Learn by Building Games and Real Projects
Master React’s Core Principles Through Six Hands-On Applications
Get up to speed with the essentials of TypeScript, then develop a practical understanding of modern React by building interactive games and production-style applications.Technical Director Lee Do-haeng draws on experience at LINE Games, Zigbang, NCSOFT, Nexon, and ESTsoft to explain React’s distinctive approach in a clear, systematic way.
Instead of memorizing syntax, you’ll examine how React works, understand declarative interfaces and immutable state, explore essential Hooks, and apply each concept through progressively more advanced projects.
By the end of the course, you’ll have experienced the complete development cycle—from planning and component design to API integration and deployment.
Who Is This Class For?
This course is recommended for:- Junior developers who want to learn modern React with TypeScript
- Aspiring frontend developers looking for practical project experience
- Job seekers who want to strengthen their portfolios
- Developers from game, mobile, embedded, or other fields who want to transition into frontend development
- React beginners who find declarative UI and component-based architecture confusing
- Developers who understand basic JavaScript but want a more structured React learning path
Why Take This Class?
1. Learn React Through Enjoyable Game Projects
Understand React by building interactive applications rather than studying theory in isolation.Simple game mechanics make it easier to see how components, state, effects, events, and reusable logic work together. Each project reinforces concepts that can be applied directly to production applications.
2. Master React and TypeScript Through Complete Workflows
Experience the full development cycle:- Set up a professional development environment
- Structure projects and components
- Create interfaces with TSX
- Manage state and side effects
- Build reusable custom Hooks
- Integrate external libraries
- Connect backend APIs
- Package applications
- Deploy completed projects
3. Understand React’s Principles, Not Just Its Syntax
Develop a clear mental model of:- Declarative UI
- Components and elements
- Immutability
- Props and state
- Pure functions
- Rendering
- Hooks
- Side effects
- Reusable stateful logic
- Client and server components
- Frontend and backend integration
What You’ll Build
1. Quiz Application
Practice TSX, conditional rendering, props, attributes, and component composition.2. To-Do List and Trello-Style Board
Begin with a simple stateful to-do list, then expand it into a drag-and-drop board using react-dnd.3. Tic-Tac-Toe
Divide a game into reusable components, connect its rules, manage state, and implement win-condition logic.4. Reaction-Speed Test
Use Hooks and a custom useTimeout implementation to build a responsive reaction game.5. Cookie Clicker
Plan and build a complete game, connect its components through Hooks, package it, and publish it with GitHub Pages.6. AI Chat Application
Use Next.js to build a ChatGPT-style application, connect an AI API through a backend route, and deploy the completed frontend and backend with Vercel.Smaller exercises—including a counter and custom Hook practice—support the six main projects.
About the Instructor
Technical Director Lee Do-haeng
Lee Do-haeng has built a broad development career across game, software, property-technology, and platform companies.More than half of his professional career has been spent in engineering-lead or team-lead positions. He also mentors junior developers and supports their long-term career development.
Curriculum
Section 01 — Why React Became a Frontend Standard
01. Modern Frontend Development 101
- Trace the evolution of frontend development
- Understand the browser wars
- Explore the era of MVX architectural patterns
- Examine how React changed frontend application development
02. Why Developers Should Learn React and TypeScript
- Understand why React remains an important development skill
- Explore the benefits of combining React with TypeScript
- Learn how React concepts can benefit developers outside frontend engineering
- Identify the practical and career advantages of the React ecosystem
Section 02 — Getting Started with React
03. Setting Up the Development Environment
- Install Node.js and Visual Studio Code
- Create the initial project
- Configure ESLint
- Configure Prettier
- Prepare an efficient coding environment
04. TypeScript Essentials in 20 Minutes
- Learn TypeScript declaration syntax
- Understand essential TypeScript types
- Extend and combine types
- Explore more advanced typing patterns
- Apply TypeScript concepts within React projects
05. React Styling Essentials in 10 Minutes
- Review the fundamentals of CSS styling
- Understand classless CSS
- Introduce Pico CSS
- Apply Pico CSS to a React interface
06. React Elements and Components
- Understand the difference between React elements and components
- Explore why immutable updates matter in React
- Learn how React describes and renders interfaces
- Divide an application into reusable components
- Build a counter application
07. Creating Your First TSX Component: Quiz Application
- Understand JSX and TSX
- Write expressions inside TSX
- Apply conditional rendering
- Work with attributes and props
- Group elements with React Fragments
- Build a simple quiz application
08. Functional Components: To-Do List
- Trace the evolution of React components
- Compare stateless and stateful components
- Understand pure functions and immutability
- Manage application data through functional components
- Build a to-do list
09. Building Tic-Tac-Toe
- Break the game into React components
- Connect interactions and state
- Implement win-condition logic
- Complete the full Tic-Tac-Toe game
Section 03 — The Heart of React: Hooks
10. Understanding Hooks
- Examine why Hooks transformed React development
- Learn the Rules of Hooks
- Understand where Hooks can be called
- Review the major built-in Hooks
- Recognize common Hook-related mistakes
11. Understanding useState and useEffect
- Learn how useState manages component state
- Understand how useEffect handles side effects
- Explore the concepts behind their internal behavior
- Practice state updates and effect dependencies
- Identify common infinite-loop and stale-state problems
12. Practicing the Built-In Hooks
- Explore additional built-in Hooks
- Understand when each Hook should be used
- Apply Hooks through focused exercises
- Compare different approaches to stateful logic
13. Building Custom Hooks
- Understand why custom Hooks are useful
- Extract reusable stateful logic
- Build a useTimeout Hook
- Build a useClickEffect Hook
- Apply custom Hooks within components
14. Building a Reaction-Speed Test
- Plan the reaction-speed game
- Manage the game’s state and timing
- Use the custom useTimeout Hook
- Measure and display the user’s response time
- Complete the interactive game
15. Expanding the To-Do List into a Trello-Style Board
- Review the to-do list from Lesson 8
- Introduce react-dnd
- Implement drag-and-drop interactions
- Organize tasks into multiple columns
- Expand a simple application into a more advanced interface
Section 04 — Building Cookie Clicker
16. Planning the Cookie Clicker Game
- Understand the structure of an incremental clicker game
- Define the core gameplay loop
- Plan the game’s components and state
- Review the completed project before development begins
17. Creating Cookie Clicker Components
- Set up the project
- Build the basic user interface
- Divide the game into reusable components
- Prepare the structure for gameplay logic
18. Connecting Hooks to Cookie Clicker
- Connect state and effects across the game
- Implement clicking and progression mechanics
- Coordinate components through Hooks
- Complete the Cookie Clicker application
19. Deploying Cookie Clicker with GitHub Pages
- Understand GitHub Pages
- Prepare a React project for production
- Package the application
- Configure the project for GitHub Pages
- Publish the completed game online
Section 05 — Building Your Own AI Chat Application
20. Planning the AI Chat Application
- Review the project’s goals
- Plan the layout and user experience
- Define the frontend and backend structure
- Examine the completed application before development
21. Building Components with Next.js
- Set up the project with Next.js
- Build the fundamental interface and components
- Understand server-side rendering
- Introduce Server Components
- Examine the relationship between React and Next.js
22. Connecting Hooks and AI APIs
- Create an API credential for ChatGPT or Claude
- Build a backend API connection
- Keep API credentials out of frontend code
- Connect the interface to the backend
- Manage requests and responses with Hooks
- Complete the working chat application
23. Deploying the Application with Vercel
- Understand the Vercel deployment workflow
- Prepare the frontend and backend for production
- Configure environment variables
- Deploy the completed application
Last edited:
