Building Modern Projects with React

Course details

Learn about some of the most important tools in the React ecosystem that help you simplify development and manage the complexities of state, side effects, structure, and styling. Instructor Shaun Wassell shows how to create a basic React project, and then explains how to add Redux, create thunks, use selectors, work with styled-components, perform testing, and more.

Learning objectives
Build more maintainable and robust React applications.
Install React and other tools.
Add Redux.
Use libraries to deal with side effects.
Style React apps more effectively with styled components.
Use React hooks and fragments.
Perform testing on Redux, Redux Thunk, Reselect, and styled components.

Concepts

0. Introduction

01 - Let's build modern projects with React
02 - What you should know

1. Project Setup

03 - Basic setup and exercise files

2. Project Overview

04 - Why use the React ecosystem
05 - Meet the React ecosystem tools

3. Creating React Projects from Scratch

06 - Building a React project from scratch
07 - The React entry point
08 - Creating a React script
09 - Using webpack to build a React app
10 - Adding more components

4. Creating Projects with Vite, Next.js, Remix, and More

11 - Create a project with Create React App
12 - Create a project with Vite
13 - Create a project with Next.js
14 - Create a project with Remix

5. Creating a Basic Project

15 - Meet the sample app
16 - Creating the TodoList component
17 - Creating the TodoListItem component
18 - Creating the NewTodoForm component
19 - Putting the app together

6. Adding Redux

20 - Why do we need Redux
21 - How does Redux work
22 - Adding Redux to a React app
23 - Creating Redux actions
24 - Creating reducers
25 - Loading data from the store
26 - Dispatching Redux actions
27 - Adding action payloads
28 - Challenge - Adding a Redux flow
29 - Solution - Adding a Redux flow
30 - Redux DevTools

7. Alternatives to Redux

31 - State management with Recoil
32 - State management with MobX

8. Dealing with Side Effects

33 - Why do we need Redux-Thunk
34 - How does Redux-Thunk work
35 - The Todos API
36 - Keeping track of the loading state
37 - Loading data with Thunks
38 - Refactoring the to-dos reducer
39 - Using Thunks to create server resources
40 - Using Thunks to delete server resources
41 - Challenge - Using Thunks to update server resources
42 - Solution - Using Thunks to update server resources

9. Selectors

43 - Why do we need selectors
44 - Creating selectors
45 - Combining selectors
46 - Using the createSelector function

10. Styled-Components

47 - Why do we need styled-components
48 - Creating a styled-component
49 - Passing props to styled-components

11. Testing

50 - Testing React ecosystems
51 - Testing reducers
52 - Testing selectors
53 - Testing styled-components

Conclusion

54 - Next steps for building with React