Section 1
1. What are components and why is React all about them?
2. How to add markup to JavaScript with JSX
3. JavaScript in JSX with curly braces: outputting dynamic data & working with expressions in JSX
4. Create a React project with Vite
5. Building a first custom component
6. How to configure components with props: passing data to a component via props
7. The concept of "composition": pass components as data to other components via props.children
8. Set an element attribute/prop that depends on it’s children element props via children.props
9. When and how to create multi-component files: splitting a component into multiple components
10. Thinking in React
11. Keeping components pure
12. JSX limitations & workarounds: React.Fragment or shorthand <></>
13. React Portals
Section 2
1. Introduction to styling React components
2. Adding basic CSS styling
3. Adding dynamic inline styles
4. Setting CSS classes dynamically
5. Introducing styled components
6. Using CSS modules
Section 3
1. Rendering lists of data: the key prop
2. Rendering conditional content
Section 4
Some things on the screen update in response to user input. In React, data that changes over time is called state. You can add state to any component, and update it as needed.
In this section, you'll learn how to write components that handle interactions, update their state, and display different output over time.
1. Responding to events & working with event handlers
2. State: a component’s memory
3. How component functions are executed: render & commit
4. State as a snapshot in time
5. Queueing a series of state updates: state scheduling & batching
6. Updating objects in state
7. Updating arrays in state
Section 5
As your application grows, it helps to be more intentional about how your state is organized and how the data flows between your components. Redundant or duplicate state is a common source of bugs.
In this section, you'll learn how to structure your state well, how to keep your state update logic maintainable, and how to share state between distant components.
1. React uses a declarative way to manipulate the UI
2. Choosing the state structure
3. Sharing state between components: lifting state up
4. How to control whether the state gets preserved or reset
5. Extracting state logic into a Reducer with the useReducer hook
6. useReducer vs useState for state management
7. How to pass information without “prop drilling”: passing data deeply with Context
8. Making Context dynamic: scaling up with useState or useReducer
9. Adding two-way binding
10. Learning the "rules of Hooks"
Section 6
1. How to “remember” information without re-rendering: referencing values with refs
2. How to access DOM elements managed by React with the ref attribute: manipulating the DOM with ref
3. Accessing another component’s DOM nodes: React.forwardRef() and useImperativeHandle hook
4. useRef & uncontrolled components
Section 7
1. How to synchronize components with external systems: Synchronizing with Effects
2. How to remove unnecessary Effects from your components: You might not need an Effect
3. How an Effect’s lifecycle is different from a component’s: Lifecycle of reactive Effects
4. How to prevent some values from re-triggering Effects: Separating Events from Effects
5. How to make your Effect re-run less often: Removing Effect dependencies
6. What to add & not to add as dependencies to useEffect()
7. Adding nested properties as dependencies to useEffect()
Section 8
1. How React really works: ReactJS vs ReactDOM
2. A surprising optimization trick with children
3. Preventing unnecessary re-evaluations with React.memo() (memoize components)
4. Preventing function re-creation with useCallback() (memoize functions)
5. A first summary
6. Skipping expensive re-calculations with useMemo() (memoize objects)
Section 9
1. Introducing error boundaries
Section 10
1. How to share logic between components: Reusing logic with "custom Hooks"?
Section 11
1. What is so complex about Forms?
2. A custom hook for handling forms in React: react-hook-form
Section 12
1. Server-side Routing vs Client-side Routing
2. Routing: Multiple Pages in Single-Page Applications
3. Defining & using: routes createBrowserRouter(), <RouterProvider> component, path & element property
4. Navigating between pages with <Link> component
5. Working with <NavLink> component
6. Navigating programmatically with useNavigate hook
7. Navigating programmatically with <Navigate> component
8. Layouts & nested routes: children property & <Outlet> component
9. Working with index routes
10. Defining dynamic path segments (path parameter) & using them with useParams hook
11. Defining & using optional path segments
12. Understanding absolute & relative routes paths
13. Setting and reading a query string (search params) with useSearchParams hook
14. Get the current route with useLocation hook
15. Showing error pages with errorElement property & useRouteError hook
16. Data fetching with a "loader" function & useLoaderData()
17. Dynamic routes & "loader" function object parameter with request & params properties
18. The useRouteLoaderData() hook & accessing data from other routes
19. Error handling within a "loader" function: json() & useRouteError
20. Reflecting the current navigation state in the UI with useNavigation hook
21. Submitting forms & send data with "action" function and <Form> component
22. Submitting data programmatically with useSubmit hook
23. Updating the UI state based on the submission status with useNavigation hook
24. Validating user input & outputting validation errors with useActionData hook
25. Reusing "action" functions via request.method
26. Calling "action"/"loader" functions without causing a navigation (route transition): the useFetcher() hook
27. Deferring data fetching with defer() function, <React.Suspense> & <Await> components
28. Controlling which data should be deferred and which data should be loaded before navigation
29. More about the <Await> component
30. More about the <Suspense> component
Section 13
1. Redux vs React Context
2. How Redux works
3. Creating a Redux store with createStore()
4. More about createStore() function
5. Attaching payloads to actions
6. Working with multiple state properties
7. How to work with Redux state correctly
8. Redux issues vs Redux Toolkit
9. Introduction to Redux Toolkit
10. Redux Toolkit: working with multiple slices
11. Redux & side effects (and asynchronous code): Action Creator Thunk
12. Exploring the Redux DevTools
Section 14
1. Alternative 1: Using the Context API (and why NOT to use it instead of Redux)
2. Alternative 2: Using a custom Hook - create an abstract store hook that manage the wide-state data
3. Alternative 2: Using a custom Hook - create a concrete store & using the abstract store
4. Optimizing the custom store hook
5. Managing multiple state slices with the custom store hook
Section 15
1. Client state vs Server state
2. What is React Query (aka TanStack Query)?
3. Setting up React Query: QueryClient() & <QueryClientProvider>
4. Setting up React Query DevTools
5. Fetching data with useQuery() hook
6. React Query Defaults and automatic refetching
7. Disabling/pausing queries (lazy queries) with enable option & refetch function
8. How to fetch data programatically with useQuery() hook (for example, when a button is clicked)
9. Query fails, thrown errors and query retries
10. Mutating data with useMutation() hook
11. Query invalidation with invalidateQueries method
12. Manually set data into the React Query cache via setQueryData function
13. Manually remove data from React Query cache with removeQueries function
14. Prefetching data with prefetchQuery method
Section 16
1. How to reuse code in React?
2. The Render Props pattern
3. The Higher-Order Components (HOC) pattern
4. The Compound Component pattern
Section 17
1. Understanding & adding Lazy Loading (Dynamic Imports)