Learn React

This is the ideal starting point for anyone eager to learn modern React basics in the most interactive, hands-on way possible. Throughout this course, you'll tackle over 170 interactive coding challenges and build six exciting projects. If you're tired of React courses that leave you staring blankly at an empty editor screen, you're in the right place! Here, you'll **actually build React projects by the end**, giving you the confidence and skills to tackle real-world applications. Section 1: Static pages (project: ReactFacts site) In this introductory section, you'll get familiar with React basics, including components, JSX, and styling. You’ll create a simple ReactFacts site, learning about composable and declarative code, React elements, and best practices for building static pages in React. Topics covered: - Intro to React - Why React?: Composable & Declarative - React Elements - JSX - Creating custom components - Fragments - Styling with Classes Section 2: Data-Driven React (project: Travel Journal) Next, you’ll discover how to make your React apps dynamic by introducing reusable components, props, and data-driven rendering. In the inspiring Travel Journal project, you’ll map data to components, handle static assets, and use props to personalize the user experience. Topics covered: - Reusable components - Props - Evaluating JS inside JSX - Handling static assets - Mapping data to components Section 3: React State (project: Chef Claude) This module introduces you to React's state management, allowing you to handle events, manage complex state, and create responsive forms. The Chef Claude project will help you see the difference between props and state, implement conditional rendering, and dynamically style components based on user interaction. Topics covered: - Event listeners - Props vs. State - Creating & changing state - Complex state - Forms & form actions - Conditional rendering - Setting state from children - Dynamic styles Section 4: Side effects