Description
What you’ll learn:
- 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
Syllabus:
- 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