Building Modern Projects with React (2020)

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.

Topics include:
- Building more maintainable and robust React applications
- Installing React and other tools
- Adding Redux
- Dealing with side effects
- Libraries for dealing with side effects
- Styling React apps more effectively with styled-components
- Using React hooks
- React fragments
- Testing Redux, Redux-Thunk, Reselect, and styled-components

Concepts

0. Introduction

01 - React - Going from good to great
02 - What you should know
03 - Installing necessary software
04 - Exercise files
05 - What this course covers

1. Project Overview

06 - Why use the React ecosystem
07 - Meet the React ecosystem tools

2. Creating Your Basic Project

08 - Building a React project from scratch
09 - The React entry point
10 - Supporting ES6
11 - The Index.js file and app component
12 - Building and serving with webpack
13 - Hot-reloading with react-hot-loader
14 - Meet the sample app
15 - Creating the todoList component
16 - Creating the todoListItem component
17 - Creating the newTodoForm component
18 - Putting the app together

3. Adding Redux

19 - Why do you need Redux
20 - How does Redux work
21 - Adding Redux to a React app
22 - Creating Redux actions
23 - Creating reducers
24 - Connecting components to the store
25 - Running a React-Redux application
26 - Persisting the Redux store
27 - Redux DevTools
28 - Redux best practices
29 - Challenge - Adding a Redux flow
30 - Solution - Adding a Redux flow

4. Dealing with Side Effects

31 - Why do you need Redux Thunk
32 - How does Redux Thunk work
33 - Adding Redux Thunk to React
34 - Creating a thunk
35 - The Todos API
36 - Async thunks
37 - Adding another reducer
38 - Refactoring the todos 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

5. Selectors

43 - Why do you need selectors
44 - Creating selectors
45 - Combining selectors with Reselect
46 - More about selectors
47 - Adding selectors to components

6. Styled-Components

48 - Why do you need styled-components
49 - Creating a styled-component
50 - Converting CSS modules to styled-components
51 - Passing props to styled-components
52 - Extending styled-components

7. Testing

53 - Testing React ecosystems
54 - Testing reducers
55 - Testing Redux thunks
56 - Testing selectors
57 - Testing styled-components

Conclusion

58 - Next steps