⭐ 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: https://react.dev - Vite (build tool): https://vitejs.dev - Pencil (wire framing tool): https://pencil.evolus.vn - Figma (wireframing tool): https://www.figma.com - GitHub site with source code: https://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