Meet the React ecosystem tools

React: Going from good to great

What you should know

Installing necessary software

Exercise files

What this course covers

Why use the React ecosystem?

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

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

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

Why do you need selectors?

Creating selectors

Combining selectors with Reselect

More about selectors

Adding selectors to 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 React ecosystems

Testing reducers

Testing Redux thunks

Testing selectors

Testing styled-components

Next steps