⭐ Learn Frontend Development with React and TypeScript for Beginners. 📖 Step-by-Step 🔍

This video will show you, step-by-step, how to use React for frontend development. You will learn the process of creating a simple calculator app with React and TypeScript from scratch. Through this video, you will understand over 80% of React concepts which you will use on a daily basis, including:

React fundamentals
Create re-usable React components
Repeat components with array
Render components based on conditions
Pass information down to child components with props
Add event listeners to elements
Manage state with useState hook
Maintain value between re-renders with useRef hook
Synchronize React states with external systems using useEffect hook
Style UI with CSS and React

Reference links:

React: react.dev/
Vite (build tool): vitejs.dev/
Pencil (wire framing tool): pencil.evolus.vn/
Figma (wireframing tool): www.figma.com/
GitHub site with source code: github.com/nerdicoda/calculator-react

Chapters:

00:00 Intro
02:30 Frontend vs backend development
06:28 What problem React solves?
13:50 How React works?
17:36 Set up React project
25:24 Create your first React component
28:09 Build and bundle React project
34:38 React browser extension
35:20 Enable Strict Mode
36:06 Create wireframes
37:15 Decompose frontend application
39:26 Nesting components
41:38 List elements
43:55 Customize components with Props
46:09 Conditional rendering
47:46 Respond to events
50:27 Update screen with useState hook
54:50 Lift state up
59:27 Single responsibility component
01:03:24 Handle user input
01:06:24 Maintain value between re-renders with useRef
01:08:25 Implement calculator input validation
01:15:45 Implement calculation logic
01:20:22 Synchronize with external system using useEffect hook
01:28:28 Save calculation history
01:33:10 Add CSS to React app
01:46:34 Test and improve the app
01:48:56 Summary