Building Modern Projects with React

Explore a step-by-step guide to the powerful tools that surround React. Learn about when to use and how to integrate each tool.

Introduction

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

1. Project Overview

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

2. 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

3. 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

4. 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

5. Selectors

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

6. 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

7. Testing

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

Conclusion

• Next steps