Welcome back. In this lecture, we are going to re-factor our presentation layer code to use React for client site rendering. Recalling that our current design uses suicide rendering using ASP.net raiser templates. So we are going to replace these and go with React. Now before we get started, I want to introduce you to ReactJS.NET. ReactJS.NET can be installed as modalware with a now ASP.NET MVC set up. What this means is that we can perform on-the-fly JSX to JavaScript compilation. If you are unfamiliar with JSX, JSX allows you to mix HTML directly within JavaScript. Therefore, JSX needs to be converted back into pure JavaScript before it will run within our browser. And this is why we are plugging ReactJS.NET into our modalware. When we go to call a page, ReactJS.NET will then transpile the JSX to pure JavaScript on-the-fly. Okay, let's now jump into individual studio and begin our refactoring. 

First thing we need to do is under store2018, under dependencies, under new year, right click. And we need to install our React.ASP.net third party library. Okay, we'll select this and add package. Additionally we need to install three other JavaScript related libraries to support our JSX to JavaScript compilation process. The first one is JavaScript engine switcher.core. We'll accept the license followed by JavaScript engine switcher.jnt, add package. And lastly JavaScript engine switcher.MS dependencyinjection, add package. Having completed this, we'll have imported four new libraries: React.asp.net, JavaScript engineswitcher.Jnt, JavaScript engineswitcher.extensions.MSdependencyinjection and JavaScript engineswitcher.core. Next, we need to update our modalware configuration. So within start up we firstly import the types that are important to us. Next, we need to update the configure series method signature. It now needs to return a data type of I service provider. Meaning that we also need to add in a return statement. Additionally we'll uncomment these to configure the services.addJS engine switcher and also the following block of code. 

Then within configure we need to make a call to Amp.userReact. This will initialize ReactJS.net. Okay. There are all the changes required in the start up file. We'll save that. Next within our controllers, if we open up the home controller, we are adding a new method. This one will be called React. And it will return an I action result by returning a view. Okay, we will save that. Next, if we take a look within views under home, I've already set up a new React.CS HTML file. Let's open this up. As you can see we are doing a number of things. We are specifying a custom layout, In this case underscore layout React. Secondly, we are adding in a script block that makes a call to page called SPA for single pay architecture.JSX. 

We can see that this file has been created in the dub dub dub root folder under JS. Opening up SPA.JSX here we can see the React components that we have created and for which our current home page is composed of. Let's quickly review the component structure in hierarchy of our store2018 page. The outermost component is the store2018 component. The store2018 component is then composed of a number of child components, including the NavBar, the JumboTron, the ProductList and the Footer components. The ProductList component is a container of multiple product components where each individual product component represents a product being sold on the store. Jumping back onto our source code, and scrolling down to the bottom, we can now see the same structure represented. Here we can see the shop2018 component. 

This component is the parent component of all other child components in this file. Let's take a closer look at the implementation of the shop2018 component. Here the shop2018 component is implemented as a class which extends the React.component class. It's composed of some JavaScript, a rendered method. Now this section here is considered JSX. It's a combination of HTML and JavaScript. And before we can send this to the browser as already mentioned, it needs to be transpiled back into pure JavaScript. Now one of the key responsibilities of the shop2018 component is for it to make AJAX calls back to our service components. The URL that it is going to call is retrieved here, calling this.props.consumer to call the account service. And this.props.products to call the inventory service. 

They were passed in as properties. Here the consumer properties are set to this. And the products property is set to this. The next thing to note is the composition of our shop2018 component. It is composed of the NavBar component, the JumboTron component and the ProductList component, and lastly the Footer component. So let's take a closer look at the ProductList component. Here you can see that we passing in a data property where this.state.products represents the data that was returned from our AJAX call. 

So again our ProductList component is a class that extends the react.component class. It has a random method and returns JSX. The random method calls map on the data that was passed into it and for each product, renders a product component. Setting the key property to product.id, the name property to product.name, the SKU property to product.sku, and the regular price property to product.regularprice. Let's now take a look at the product component implementation. 

Again, the product class extends the React.Component class It has a random method and it returns some JSX. Here, the simply rendering out each of those properties that were passed into it. The remaining React components in this file are pure presentation components. So you have the NavBar component, the JumboTron component, and finally the Footer component. Now before we recompile and test this we need to double-check our shop2018 component and ensure that the properties set on consumer and products are using the right URL's when this component renders on the client side it's gonna make AJAX calls back to our service components using this URL. So we need to make sure that our host and our port are correct for both URL's. Remembering that we used docker compose earlier on in our course to configure a local build and to enable us to quickly run up a local environment. We can see that the account servers are set to listen on the host port 8081 and forward to the container port port 80 and the inventory servers likewise is configured to listen on host port 8082 and forward to container port port 80. Therefore our current configuration here is indeed correct. 

The last piece of the puzzle that we need to put in place to allow AJAX calls to be initiated from the client side and to allow them to be responded to from our microservice components is to enable cross origin requests on each of our microservice services. So we will go ahead and do this now. So back within the visual studio under each of our service components, opening up the startup file, we'll enable the use of calls on each of them. We repeat this on the startup file with the inventory. And then finally again in shopping service. OK, at this stage everything is in place. 

We can now do a recompile and then we'll start up the full environment. Again, we will jump over into our terminal and here we'll run docker compose and build. This will rebuild all of our images complete with the new React presentation layer architecture. Again we'll speed this up and see what we get at the end. Okay, excellent so our build is completed. Let's ensure that we have no existing docker processes running locally. And then finally we'll run docker-compose up to bring on up in environment. Okay, the environment is now up and running. Let's jump back into our browser. And this time we'll navigate to local host, port 8000 slash home slash react. So the first time we go to this URL it's going to take a little bit longer than subsequent times. The reason being we do the JSX compilation on-the-fly.

 This is a one-off process, so subsequent requests will be a lot quicker. Here, we'll do a reload and it's really snappy so it's conveying very quick. Again, another reload. Okay, let's open up develop tools, and confirm and date that we are making AJAX calls. We will do a reload and here we go. So here we can see are making an AJAX call to slash API, slash consumers and if you look at the response, we can see the data that is being passed back from the microservice component. Likewise, we've made an AJAX call to the inventory service and here is the data again coming back. 

And one last thing we'll look at is the SPA.JSX file. And here we can see that indeed it is being compiled into pure JavaScript. So the JSX is being converted into pure JavaScript which runs in our browser. Now on production you wouldn't use ReactJS.net to do compilation on-the-fly. Instead you'd pre-compile this as part of your build phase. Okay, that completes this lecture. Go ahead and close it, and we'll see you shortly in the next one.