Building Web Apps with React
1 h 0 m
Lab Overview
In this lab, you will use React and Visual Studio Code to build an application for managing a collection of widgets. Data will be loaded locally at first, then later from a REST service, and displayed in an HTML table rendered by React components. After implementing basic functionality for creating and listing widgets, you will add functionality for editing and deleting widgets.

Related Learning Path(s):
Web Developer
  • Create and render React components
  • Work with component data, including props and state
  • Compose components into higher-order components
  • Integrate REST services into React applications
  • Familiarity with web development (HTML, JavaScript, CSS)
Rather than start from scratch, you will begin with a "hello world" project that has been created for you. This will enable you to start learning quickly without spending time creating boilerplate infrastructure. In this exercise, you will copy the starter project to a local folder and use Visual Studio Code to modify it to display a table of widgets. As you do, you will get a first look at the React component model.
In the previous exercise, a static table of widget data was displayed. In this exercise, the widget data will be passed into the component via props. Props hold parameters passed to components, and roughly correspond to attributes on HTML elements. Understanding props is a key step in becoming a React programmer. Let's dive in.
Most web applications use forms to collect user input. React uses a *controlled component* approach to collecting form data and keeping the model synchronized with the UI. In this exercise, you will add a form to the app that enables users to create new widgets. And you will learn about component state, which is another fundamentally important concept in React programming.
Thus far, the application you are building codes all of the UI pieces as one component. In this exercise, you will decompose the UI into several components.
In this exercise, you will modify the widget table to support deletions and inline editing.
The final exercise will have you connect the WidgetTool component to a REST service that manages widgets and supports classic CRUD operations. The REST service is provided for you in the starter project and was implemented using the JSON Server library, which creates REST services from JSON files. It's a fast and simple way to create a REST service for development purposes.
Real-Time Lab
Not Registered?
Create Account
Already Registered?
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