Building Applications with React 18 and Redux
Learn how to use React, Redux, React Router, Jest, React Testing Library, and modern JavaScript to build powerful and fast web applications.
What you'll learn
React is a library with so much power, but so few strong opinions. So building something significant requires a large number of decisions and work to build the foundation.
- Learn how to use React Redux, React Router, and modern JavaScript to build powerful and fast React applications from the ground up.
- Use Webpack, Babel, ESLint, npm scripts, Jest, React Testing Library, Enzyme, and more.
- Create a rapid feedback development environment that runs linting and tests, transpiles modern JavaScript, runs a local webserver, opens the application, and reloads changes when you hit save.
- Deploy with a single command.
Table of contents
- Intro 2m
- Install Node 0m
- Open Initial Exercise Files 1m
- Visual Studio Code Intro 0m
- Prettier Intro 0m
- Configure Prettier 1m
- Review Initial Project Setup 1m
- Create Initial App Structure 2m
- Webpack: Intro 0m
- Webpack: Core Config Settings 4m
- Webpack: Dev Server 1m
- Webpack: Plugins 1m
- Webpack: Loaders 2m
- Babel Intro 1m
- Configure Babel 1m
- Start Webpack via npm Script 1m
- Debugging and Sourcemaps 1m
- Handling EADDRINUSE Error 1m
- ESLint Intro 0m
- Configure ESLint 5m
- Summary 1m
- Intro 2m
- Create Simple Add Course Form 4m
- Binding in Classes 3m
- Handle Submit 2m
- Create Course Action 2m
- Create Course Reducer and Root Reducer 7m
- Create Store 2m
- Wrap App in Redux Provider 1m
- Connect to Redux via React-redux Connect 7m
- Review Redux Flow and Redux Devtools 8m
- Connect to Redux via Hooks 7m
- mapDispatchToProps via Manual Mapping or bindActionCreators 5m
- mapDispatchToProps: Object Form 2m
- Action Type Constants 3m
- Summary 1m
- Intro 1m
- Why a Mock API? 3m
- Mock API Setup 9m
- Middleware and Async Library Options 4m
- Thunk Introduction 4m
- Remove Inline Manage Course Form 2m
- Add First Thunk 5m
- Handle Loading Courses in Reducer 1m
- Dispatch Actions on Load 2m
- Create CourseList 4m
- Practice Redux Flow - Load and Display Author Data 11m
- Centralize Initial Redux State 2m
- Summary 1m
- Intro 0m
- Create Manage Course Page 1m
- Configure Routing for Manage Course Page 3m
- Create Course Form 2m
- Create Reusable Input Components 2m
- Render Course Form 2m
- Configure Course State 1m
- Implement Centralized Change Handler 3m
- Load Authors from Redux via useSelector and useDispatch 4m
- Populate Form Based on URL Param 4m
- Add Save Course Thunk and Action Creators 2m
- Handle Creates and Updates in Reducer 2m
- Call Redux Dispatch to Save Course 2m
- Redirect via React Router Navigate 1m
- Review Implementation 1m
- Summary 1m
Course FAQ
You will learn how to use React and Redux, as well as React Router and JavaScript to build effective React applications using today's popular and useful technologies.
Since this is an intermediate level course, you should already know the basics of React. As such, you should also be familiar with JavaScript basics as well. If you need a refresher on the basics, check out this React course.
Redux is an open source JavaScript library and a tool that helps manage the state of applications. It helps manage the data you present to users and the way in which you respond to their actions. We will go into much more detail in the course itself.
Redux is most frequently used with React because React lets you describe UI as a function of state, and Redux is a flux implementation, so it creates update paths in JS applications.
Yes! We will build a real-world application with React and Redux from square one so you can better solidify the principles and concepts taught throughout this course.
About the author
Cory is the principal consultant at reactjsconsulting.com, where he has helped dozens of companies transition to React. Cory has trained over 10,000 software developers at events and businesses worldwide. He is a seven time Microsoft MVP, and speaks regularly at conferences around the world. Cory lives in Kansas City and is active on Twitter as @housecor.