Building Modern Projects with React

Building Modern Projects with React

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 3h 41m | 661 MB

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
Table of Contents

1 React Going from good to great
2 What you should know
3 Installing necessary software
4 Exercise files
5 What this course covers
6 Why use the React ecosystem
7 Meet the React ecosystem tools
8 Building a React project from scratch
9 The React entry point
10 Supporting ES6
11 The Index.js file and app component
12 Building and serving with webpack
13 Hot-reloading with react-hot-loader
14 Meet the sample app
15 Creating the todoList component
16 Creating the todoListItem component
17 Creating the newTodoForm component
18 Putting the app together
19 Why do you need Redux
20 How does Redux work
21 Adding Redux to a React app
22 Creating Redux actions
23 Creating reducers
24 Connecting components to the store
25 Running a React-Redux application
26 Persisting the Redux store
27 Redux DevTools
28 Redux best practices
29 Challenge Adding a Redux flow
30 Solution Adding a Redux flow
31 Why do you need Redux Thunk
32 How does Redux Thunk work
33 Adding Redux Thunk to React
34 Creating a thunk
35 The Todos API
36 Async thunks
37 Adding another reducer
38 Refactoring the todos reducer
39 Using thunks to create server resources
40 Using thunks to delete server resources
41 Challenge Using thunks to update server resources
42 Solution Using thunks to update server resources
43 Why do you need selectors
44 Creating selectors
45 Combining selectors with Reselect
46 More about selectors
47 Adding selectors to components
48 Why do you need styled-components
49 Creating a styled-component
50 Converting CSS modules to styled-components
51 Passing props to styled-components
52 Extending styled-components
53 Testing React ecosystems
54 Testing reducers
55 Testing Redux thunks
56 Testing selectors
57 Testing styled-components
58 Next steps