Building Web Apps with React and Redux
Lab
Intermediate
1 h 0 m
2019-04-13
Lab Overview
In this lab, you will use React´╗┐, Redux, and Visual Studio Code to create an application that manages a collection of widgets. Widget data will be loaded from a REST service, displayed in an HTML table by a React component, and managed by Redux. You will use a library named React-Redux´╗┐ to bind React and Redux, and a library named Redux-Thunk to manage interactions with the REST service. And along the way, you will get a first-hand look at the face of modern web development.

Related Learning Path(s):
Web Developer
Objectives
  • Convert an existing React application to use Redux
  • Create a Redux store, complete with reducer functions
  • Connect Redux stores to React components with React-Redux
  • Manage asychronous REST calls with Redux-Thunk
Pre-Requisites
  • Familiarity with web development concepts (HTML, JavaScript, CSS)
Exercises
In this exercise, you will copy a starter project that uses React to a local folder on your hard disk and use the Node Package Manager (NPM) to install Redux, Redux-Thunk, and other packages required by the application.
The application that you built and ran in the previous exercise manages state itself. In this exercise, you will modify the application to use Redux to manage its state.
At this point, React is managing the application's user interface, and Redux is managing the application's state. The React WidgetTool component uses the Redux store, but the connection can be improved. In this exercise, you will use a library named React-Redux to simplify the code that connects the two together.
In the starter application, widget data was loaded from a REST service. In Exercise 2, data coming from the REST service was swapped out with mock data to allow Redux to be added incrementally. In this exercise, the REST service will be connected again, and Redux-Thunk will help Redux manage the asynchronous actions used to load data from the REST service.
In this exercise, you will restore the application's ability to edit widgets. You will do so by implementing new actions.
In this exercise, you will modify the application to support for adding and deleting widgets.
Real-Time Lab
Not Registered?
Create Account
Already Registered?
Login
What are Labs?

Labs provide a live environment to get hands-on experience using the same tools and services in the real world.


Learn More