Building Modern Projects with React

Introduction

• Let's build modern projects with React
• What you should know

1. Project Setup

• Basic setup and exercise files

2. Project Overview

• Why use the React ecosystem?
• Meet the React ecosystem tools

3. Creating React Projects from Scratch

• Building a React project from scratch
• The React entry point
• Creating a React script
• Using webpack to build a React app
• Adding more components

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

• Create a project with Create React App
• Create a project with Vite
• Create a project with Next.js
• Create a project with Remix

5. Creating a Basic Project

• Meet the sample app
• Creating the TodoList component
• Creating the TodoListItem component
• Creating the NewTodoForm component
• Putting the app together

6. Adding Redux

• Why do we need Redux?
• How does Redux work?
• Adding Redux to a React app
• Creating Redux actions
• Creating reducers
• Loading data from the store
• Dispatching Redux actions
• Adding action payloads
• Challenge: Adding a Redux flow
• Solution: Adding a Redux flow
• Redux DevTools

7. Alternatives to Redux

• State management with Recoil
• State management with MobX

8. Dealing with Side Effects

• Why do we need Redux-Thunk?
• How does Redux-Thunk work?
• The Todos API
• Keeping track of the loading state
• Loading data with Thunks
• Refactoring the to-dos reducer
• Using Thunks to create server resources
• Using Thunks to delete server resources
• Challenge: Using Thunks to update server resources
• Solution: Using Thunks to update server resources

9. Selectors

• Why do we need selectors?
• Creating selectors
• Combining selectors
• Using the createSelector function

10. Styled-Components

• Why do we need styled-components?
• Creating a styled-component
• Passing props to styled-components

11. Testing

• Testing React ecosystems
• Testing reducers
• Testing selectors
• Testing styled-components

Conclusion

• Next steps for building with React