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

Introduction

React - Going from good to great
What you should know
Installing necessary software
Exercise files
What this course covers

Project Overview

Why use the React ecosystem
Meet the React ecosystem tools

Creating Your Basic Project

Building a React project from scratch
The React entry point
Supporting ES6
The Index.js file and app component
Building and serving with webpack
Hot-reloading with react-hot-loader
Meet the sample app
Creating the todoList component
Creating the todoListItem component
Creating the newTodoForm component
Putting the app together

Adding Redux

Why do you need Redux
How does Redux work
Adding Redux to a React app
Creating Redux actions
Creating reducers
Connecting components to the store
Running a React-Redux application
Persisting the Redux store
Redux DevTools
Redux best practices
Challenge - Adding a Redux flow
Solution - Adding a Redux flow

Dealing with Side Effects

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

Selectors

Why do you need selectors
Creating selectors
Combining selectors with Reselect
More about selectors
Adding selectors to components

Styled-Components

Why do you need styled-components
Creating a styled-component
Converting CSS modules to styled-components
Passing props to styled-components
Extending styled-components

Testing

Testing React ecosystems
Testing reducers
Testing Redux thunks
Testing selectors
Testing styled-components

Conclusion

Next steps