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:

https://github.com/cloudacademy/voteapp-frontend-react

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 +1 voting functionality.

Vote. The Vote component is responsible for providing a clickable +1 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 +1 button, which, when clicked, generates an AJAX HTTP GET request to the API endpoint, languages, name, vote. The button element's 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. 

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 use case, 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 componentDidMount function.

Again, the componentDidMount 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 ProgrammingLanguage-specific details. Again, since the component state is being updated, a rerender of the component is performed. Meaning, in this case, the ProgrammingLanguage 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 ProgrammingLanguage class, to render out the vote +1 button and provide the voting AJAX calls and voting state management, etc., as again just previously reviewed. Finally, the ProgrammingLanguage 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 ProgrammingLanguage voting application. The VoteApp class is again written in JSX, and in terms of its visuals and behaviors, renders out the complete ProgrammingLanguage voting application, which consists of three static ProgrammingLanguage 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 into the HTML div element, tagged with the ID set to root. This development is located within the project's public index.html file as will be shown next. The index.html file provides the home page HTML structure. It is a standard, pure HTML file. The main point 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 the localhost 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 front-end 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.