Building Applications with React 17 and Redux
Learn how to use React, Redux, React Router, and modern JavaScript to build an app with React. Use Webpack, Babel, Jest, React Testing Library, Enzyme, and more to build a custom React development environment and build process from the ground up.
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 1m
- 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 2m
- Webpack: Plugins 1m
- Webpack: Loaders 2m
- Babel Intro 3m
- Configure Babel 1m
- Start Webpack via npm Script 2m
- 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 5m
- Instantiate Store and Provider 3m
- Connect Container Component 7m
- Step through Redux Flow and Try Redux DevTools 8m
- mapDispatchToProps: Manual Mapping 3m
- mapDispatchToProps: bindActionCreators 2m
- 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 6m
- 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 1m
- Create Manage Course Page 3m
- Implement Object Form of mapDispatchToProps 4m
- Configure Routing for ManageCoursePage 2m
- Convert Class Component to Function Component with Hooks 3m
- Create Course Form 2m
- Create Reusable TextInput and SelectInput Components 2m
- Call CourseForm on ManageCoursePage 6m
- Implement Centralized Change Handler 4m
- Add Save Course Thunk and Action Creators 2m
- Handle Creates and Updates in Reducer 2m
- Dispatch Create and Update 3m
- Redirect via React Router's Redirect Component 2m
- Redirect via React Router's History 2m
- Populate Form via mapStateToProps 8m
- 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.