Overview
-
Explore a step-by-step guide to the powerful tools that surround React. Learn about when to use and how to integrate each tool.
Syllabus
-
Introduction
- React: Going from good to great
- What you should know
- Installing necessary software
- Exercise files
- What this course covers
- Why use the React ecosystem?
- Meet the React ecosystem tools
- 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
