Skip to content
hands-on lab

Create a Voting Web App using React

Intermediate
1h 45m
2,013
3.7/5
Start lab
Get guided in a real environmentPractice with a step-by-step scenario in a real, provisioned environment.
Learn and validateUse validations to check your solutions every step of the way.
See resultsTrack your knowledge and monitor your progress.
Lab description

Lab Overview

React is an open-source JavaScript library for building web-based user interfaces using a declarative and component-based approach. Building sophisticated and complex web UI's becomes a breeze when using React!

This Lab is designed to show you how to install and set up a React-based development environment, allowing you to compile and execute your own React-based web applications. The Lab will then walk you through the process of creating a custom programming language voting web application that involves making AJAX requests to a sample backend API service (provided).

For those interested, the Go-based CloudAcademy Lab Create an API with Go and Gorilla Mux guides you through creating the same sample backend API service as used within this lab.

Lab Objectives

Upon completion of this lab, you will be able to:

  • Install and configure a React-based development environment and respective toolset
  • Create and compile basic React web applications
  • Create a custom React web application which makes AJAX requests to a sample backend API service
  • Build basic React web-based applications using React

You should:

  • Be comfortable with basic software engineering and development principles.

Lab Environment

This lab will start with the following AWS resources provisioned automatically for you:

  • A single EC2 instance, named ide.cloudacademy.platform.instance, which will have a public IP address attached. This will be the instance that you will connect to using your local workstation browser.

To achieve the lab end state, you will be walked through the process of:

  • Using your local workstation browser to remotely connect to ide.cloudacademy.platform.instance
  • Download, install and configure the Create React App tooling
  • Create a default React web application using the Create React App tooling
  • Compile, execute and test a custom React web application which makes AJAX requests to a sample backend API service

 

Updates

January 31st, 2023 - Updated the instructions and screenshots to reflect the latest UI

Jan. 11th, 2022 -  Configured the use of yarn without root permissions

Dec 22, 2021 - Updated instructions to fix the outdated nodejs version issue

About the author
Avatar
Jeremy Cook, opens in a new tab
Content Lead Architect
Students
158,785
Labs
80
Courses
106
Learning paths
213

Jeremy is a Content Lead Architect and DevOps SME here at Cloud Academy where he specializes in developing DevOps technical training documentation.

He has a strong background in software engineering, and has been coding with various languages, frameworks, and systems for the past 25+ years. In recent times, Jeremy has been focused on DevOps, Cloud (AWS, Azure, GCP), Security, Kubernetes, and Machine Learning.

Jeremy holds professional certifications for AWS, Azure, GCP, Terraform, Kubernetes (CKA, CKAD, CKS).

Lab steps
Connecting to the CloudAcademy Web based IDE
Create a Basic React Web Application
Complete a Voting React Web Application
Test the Completed Voting React Web Application