Announcing Skill Me Up Live! Sign up today and save 60% on your first month using offer code LIVETRAINING at checkout.
Building Web Apps with React
Lab
Beginner
1 h 0 m
2019-04-13
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.
Objectives
  • 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
Pre-Requisites
  • Familiarity with web development (HTML, JavaScript, CSS)
Exercises
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 https://github.com/typicode/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?
Login
What are Labs?

Labs are where you can get hands on experience from what you have learned from lectures. You get to work in real time in virtual machines at your pace.