Get Started with React.js and React Router 6

Overview

Dive into a comprehensive crash course on React.js and React Router 6+, covering core concepts and advanced topics in frontend JavaScript development. Learn to create and structure React projects, build custom components, manage state with useState, handle user events, and implement conditional rendering. Explore essential features like props, CSS modules, and the useEffect hook for side effect management. Progress to more advanced concepts including lifting state, handling form submissions, and connecting to backend services. Master routing with React Router 6+, including layout routes, nested components, and dynamic routes. Gain hands-on experience through practical exercises and real-world examples, equipping you with the skills to build modern, responsive web applications using React.js.

Syllabus

: Introduction
: What Is React?
: React requirements
: Creating a React project
: Exploring a new React project
: Understanding how React works & the role of components
: Building & using a custom component
: Outputting dynamic values
: Reusing components
: Working with “props”
: Styling & working with CSS Modules
: Time to practice
: Preparing the app for “state”
: Listening to user events
: Adding & using “state” via useState
: Lifting state up
: The special “children” prop
: Rendering content conditionally
: Sharing components & more state management
: Adding form buttons
: Handling form submission
: Updating state based on previous state
: Outputting list data
: Connecting frontend & backend
: Sending a POST request
: Handling side effects with useEffect
: Handling “loading” state
: Understanding & adding “Routing”
: Adding routes with “React Router” v6+
: Adding layout routes
: Refactoring route components & more nesting
: Adding links & navigation
: Data fetching via “loader” functions
: Submitting data via “action” functions
: Adding dynamic routes
: Summary