1. Home
  2. Training Library
  3. DevOps
  4. Courses
  5. Building A Cloud Native Application

React Frontend

The course is part of this learning path

Building and Deploying a Cloud Native Application
course-steps 4 certification 1 lab-steps 6

Contents

keyboard_tab
Introduction
1
Introduction
PREVIEW3m 32s
Quick Demonstration
Architecture Review
5
Go API
9m 54s
Test and Validation
Summary
12
Review
1m 15s
play-arrow
Start course
Overview
DifficultyIntermediate
Duration51m
Students72

Description

Introduction

This training course is designed to help you master the skills of designing and building cloud native applications.

Observe first hand the end-to-end process of building a sample cloud native application using React, Go, MongoDB, and Docker. By taking this course you'll not only get to see firsthand the skills required to create a robust enterprise grade cloud native application, but you'll also be able to apply them yourself as all code and deployment assets are available for you to perform your own deployment:

https://github.com/cloudacademy/voteapp-frontend-react
https://github.com/cloudacademy/voteapp-api-go
https://github.com/cloudacademy/language-vote-app

Learning Objectives

What you'll learn:

  • Understand the basic principles of building cloud native applications
  • Understand the benefits of using React for frontend web development
  • Understand the benefits of using Go for backend api development
  • Understand the benefits of using MongoDB as a database system
  • And finally, you’ll learn how to package and run microservices as lightweight containers using Docker

Demonstration

This training course provides you with several hands on demonstrations where you will observe first hand how to

  • Build a React based web frontend
  • Build a Go based API
  • Deploy and configure a MongoDB database
  • Deploy the full end-to-end application to Docker running locally

Prerequisites

  • A basic understanding of web based software development
  • Previous exposure to containers and containerisation - in particular docker

Intended Audience

  • Anyone interested in learning how to architect cloud native applications
  • Anyone interested in using modern development tools such as React, Go, MongoDB and Docker
  • Anyone interested in containerisation
  • DevOps Practitioners

Transcript

- [Instructor] Okay, welcome back. In this lecture, I'll provide a code review of the key components that we created to build the React-based frontend. Just a quick note to remind you that all of the source code that makes up the React-based frontend, is available for you to claim from the following location. 

For starters, let's quickly consider why the frontend was developed using React. By doing so, we'll understand the benefits it provides. React is an extremely popular JavaScript framework, which facilitates building component-based web frontends. It is highly favored by frontend developers, primarily through the fact that it promotes reusability through component reuse. It provides JSX, which is a syntax feature where you can interlace JavaScript and HTML together, which is really useful for, again, building reusable components. It uses a virtual DOM for rendering, which provides a performance improvement for rendering times within the browser. And it provides useful features to manage and maintain state across components. 

So, how exactly is the frontend composed? Let's break down the application into its individual components. VoteApp, the main component. It is responsible for rendering the overall view of the voting application. 

The VoteApp component imports the programming language component and renders it once per language. As seen here, it is used three times, from left to right, once for the Go language, once for the Java language and once for the Node.js language. Programming language.

The ProgrammingLanguage component is responsible for communicating with the API service, using Ajax calls to request all of the details specific to an individual programming language on the initial load of the application. All of the received data, is then rendered out to the screen, within the component's render function, completing the initial load of the application. 

The ProgrammingLanguage component imports the Vote component, which provides the actual plus one voting functionality. Vote, the Vote component is responsible for providing a clickable plus one voting button, which, when clicked by an end user, generates an Ajax call to the vote API endpoint. The vote API endpoint in turn increments the vote count against the programming language within the MongoDB database. Finally, if we highlight all of the components together at the same time, we get the following view, which should now make it clear as to the overall composition. Let's now briefly examine the React JavaScript and JSX code, that has been used to build our voting application. In particular, we'll review the following set of files, Vote.js, ProgrammingLanguage.js, VoteApp.js, index.js, index.html, .env and the Dockerfile. 

The Vote.js file contains the implementation of the Vote class which encapsulates the actual voting functionality. The Vote class is written in JSX code and in terms of visuals and behaviors, simply renders out the plus one button, which, when clicked, generates an Ajax HTTP GET request to the API endpoint. Languages, name, vote. The button elements onclick event handler calls the handleClick function. The handleClick function leverages the third-party Axios library to make the actual Ajax request to the API. The other semi-interesting point when working with this library to make Ajax calls, is the setup and configuration to manage CORS or cross origin resource sharing, and in the sample code is used here. This is done by setting the Access Control Allow Origin header for HTTP posts to the value asterisk, which is short-form for all origins. 

When the response is received back from the API, the internal state of the Vote component is updated. In this case, the Vote field is incremented. Any time the state gets updated, within a React component, a rerender of the component is performed. Meaning in this case, the Vote count as displayed within the browser is updated to the current count. The API host and port are configured within the .env, short for environment file, located in the project's root folder. Finally, the Vote class is exported at the bottom of the file, making it available to be used by the programming language class. The ProgrammingLanguage.js file contains the implementation of the programming language class, which encapsulates the look and feel for a single programming language. 

The programming language class is again written using JSX, and in terms of visuals and behaviors, simply renders out the details, such as usekeys, rank, home page and logo, specific to the programming language in question. These details are first retrieved using an Ajax HTTP GET request, sent to the API endpoint language's name. This is done when the component first loads, or more specifically when it first mounts as per the code contained within the component DidMount function. 

Again, the component DidMount function leverages the same third-party Axios library to make the actual Ajax request to the API. When the response is received back from the API, the internal state of the ProgrammingLanguage component is updated, and in this case, the language field is set to contain all of the programming language specific details. Again, since the component state is being updated, a rerender of the component is performed. Meaning, in this case, the programming language details are displayed within the browser. 

The Vote class, which we previously reviewed is imported into the ProgrammingLanguage.js file and its functionality is depended upon by the programming language class, to render out the vote plus one button and provide the voting Ajax calls and voting state management, et cetera, as again just previously reviewed. Finally the programming language class is exported at the bottom of the file, making it available to be used by the VoteApp class contained within the VoteApp.js file which we'll review next. 

The VoteApp.js file contains the implementation of the VoteApp class, which encapsulates the overall look and feel of the full programming language voting application. The VoteApp class, is again written in JSX, and in terms of its visuals and behaviors, renders out the complete programming language voting application, which consists of three static programming language components. One for Go, one for Java and one for Node.js. This top-level component tracks no state, it really just depends directly on the behaviors as encapsulated within the ProgrammingLanguage component, hence the reason why it is imported as part of the import statements, at the top of this file. Finally, the VoteApp class is exported at the bottom of this file, making it available to be used within the main index.js file. This is reviewed next. 

The index.js file first imports the VoteApp class within the import statements at the top of the file. The index.js file then makes a call to the main ReactDOM render function which is used to render out the entire VoteApp component and its sub-components until the HTML div element, tagged with the ID set to root, this development is located within the project's public index.html file as we'll be shown next. The index.html file, provides the home page HTML structure. It is a standard, pure HTML file. 

The main points of interest regarding this file, is the div element tagged with the ID set to root. This is the div element, into which React at runtime will render out the full VoteApp component. The react.env file, is located in the project root folder, and contains and isolates all of the environment specific configuration, as used within the application. In the case of our application, we have one environment variable, which is used to store the host and port of the API service to which Ajax calls are being directed towards, from the frontend. 

In the locally hosted demonstrations, I provide towards the end of this course, I'll update the single environment variable to be local host port 8080 and then perform a new React build to generate the final state of static public serviceable assets. Keep in mind that the value stored and configured within the React.env file are utilized and injected into their placeholders within the relevant JSX files, in our case the vote and programming language JavaScript source files at build time. 

It's important to understand that this happens at build time and not runtime. Since we're all about building and deploying a cloud native application involving containerization, we're going to use a Dockerfile to encapsulate the Docker build commands, used to build a container image for the frontend microservice. A Dockerfile is provided and will be used by the Docker build command to create and compile a Docker image, containing the final React-based frontend. This microservice will contain and serve up all of the optimized static HTML, JavaScript and CSS files. 

The Dockerfile, as you can see, is very simple. And should be easy to understand and interpret. In any sense, it uses the official public Docker Nginx image as its base, and then simply copies in the contents of the files, located within the local build folder. The local build folder is populated as a result of performing a React build, we'll demonstrate this later on by using the command yarn build. Again, more on this later, when we perform our demonstrations. The Dockerfile will then be referenced when we run a Docker build command. 

Okay that completes this lecture on our brief code review of the important React-based frontend components. 

Go ahead and close this lecture and we'll see you shortly in the next one where we'll perform a quick code review of the API.

About the Author

Students11957
Labs28
Courses65
Learning paths14

Jeremy is the DevOps Content Lead at Cloud Academy where he specializes in developing technical training documentation for DevOps.

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

Jeremy holds professional certifications for both the AWS and GCP cloud platforms.
 

Covered Topics