Guest post from Walid Behlock Microsoft Student Partner at University College London
I have always loved to solve problems of all kinds and have developed a passion for technology since my youngest age. I have previously participated in international Robotics competitions and attended many talks and events related to hardware and software.
I am currently studying Electronics and Electrical Engineering at UCL and I am the Projects Director of UCL TechSoc. In my free-time, I like to practice endurance sports, listen to music and meet new people.
In this tutorial, we are going to follow the plan below:
● Introduction to React
● What are we going to build?
● Setting up the project
● Developing the project
● Introduction to Microsoft Azure
● Deploying our project to Azure
● Additional resources
Let us now start with a detailed introduction to React.
What is React?
Imagine that you are paid to paint a wall in blue every day. From day to day, a minor change is made to the design (for example, you should add a yellow circle in the middle of the wall today) but you only have the option to repaint the whole wall repeatedly. So, every day, you repeat the same work which is time and effort consuming just to apply this little modification.
In the case of our previous example, React would have allowed us to paint this tiny circle directly in the middle of the wall.
Let us now look at what we are going to be doing with React.
What are we going to build?
In this tutorial, I am going to walk you through building a GitHub Popular application which classes the most popular repositories on GitHub in general or by language by using the GitHub API to fetch info about all the repos.
The navigation bar allows us to toggle between different programming languages.
I have also created a GitHub repo for this tutorial. You can find it here: https://github.com/WalidBehlock/github-popular
Dependencies and requirements
Before starting with the development of this project, we will first need to set up our workspace by installing:
● NPM (Node Package Manager): NPM allows us to manage different modules and know what modules versions are installed on our system. It makes it easier to install different packages without having to go to the specific websites or repos every time.
from the command line. Once we have NPM installed, we are ready to get started.
Setting up the Project
The first thing we need to do to start building our React app is to set up our development environment.
The easiest way to create a React app is to head to the directory where we want to store our app and execute these commands through command line:
By using ‘Create React App’, we are installing all the tools that are needed to get started with React.
If you want to get more info about what is happening under the hood when executing this command, you can read about Webpack and Babel which are two of the most important packages that are being installed.
By launching ‘npm start’, our browser should open a new window on a localhost server with this screen:
After having successfully installed the React modules, we will configure our project folder.
Let’s first head to our ‘github-popular’ folder that we just created. We can see that some files are already present in this folder:
● The ‘node_modules’ folder contains all the module files and dependencies
● The ‘package.json’ file is what defines the specific dependencies that need to be used in our project
● ‘src’ contains the code written by the developer
● ‘public’ contains the bundled code for production
● ‘.gitignore’ tells GitHub what files to ignore
Let us start from scratch and create a folder named ‘app’ in our ‘github-popular’ folder (github-popular -> app). This folder will be the base of our app and will replace ‘src’.
In this folder, we are going to create three important files:
● An ‘index.html’ file which sets up our webpage.
● An ‘index.css’ file which will store the CSS code of our platform which gives styling to our website.
● An ‘index.js’ file which is where our React components are going to live.
At this point, our setup looks like this:
Now that our project is set up, we will now start writing our first lines of React.
Requiring modules and files
We head to our project folder and open the ‘index.js’ file in our preferred code editor (I will be using VS Code in this tutorial). We then write:
● In line 3, we are requiring React into our project.
● In line 4, we are requiring ReactDom since we will render our React project into the DOM.
● In line 5, we are requiring our index.css file which will be included in our application when everything bundles (thanks to webpack).
! Requiring the modules is mandatory in every React project.
Building the App Component
● We first start by initializing our class name (‘App’ in our example) and we tell it to extend a React component.
● The render method is then used to associate a specific UI to our component: everything that goes into this method will represent our component in the DOM.
● Now this is where people often get confused:
Rendering the component
What we are now going to do is take our main component and render it to the DOM:
We go ahead and write:
● The first one is our actual component: <App /> (this is also JSX).
● The second argument is where we want it to render:
(Note that we are going to include a div element with an id of ‘app’ in our html file later).
Our final result should look like this:
In this html file, we are just going to copy a traditional html template:
! Notice that we created a div with an id of ‘app’ line 9 as stated earlier.
Creating the Platform
Our next step is to start building our GitHub Popular Platform.
Organizing the project
To get more organized, we are going to create a ‘components’ folder inside our ‘app’ folder (github-popular ->app ->components). This folder will store our website pages.
In this new folder, create an ‘App.js’ file and move the ‘App’ component created earlier to this new file. We get this:
Our index.js file should now look like this:
The purpose of our ‘index.js’ file is now to require all the necessary files and render our ‘App’ component that is in the ‘components’ folder. It is the main file that will be calling all the other components.
● We will start by creating a file called ‘Popular.js’ inside of our ‘app’ folder (github-popular ->app ->Popular.js) and write the same basic code as before:
The ‘module.exports’ command allows us to import our file (in this case ‘Popular.js’) from a different file.
● Now we will create an array to store the different programming languages that are going to be used in the navigation bar.
To do this, we write:
inside of our ‘render’ method (outside the return element).
After having initialized our languages, we need to show them on our webpage, this means, the DOM. To do this, we are first going to create a ‘list item’ for every language in our array and map over all the languages. We are then going to display them on the screen:
Now if we refresh our app we get this:
We will now add some code that sets up the initial state of our component (‘All’ should always be the default “language” of search when our page is first loaded) and a way to change that state. We add a ‘constructor’ method as well as an ‘updateLanguage’ method inside our React Component.
What will now happen is that whenever one of our list items is clicked, it will trigger the ‘updateLanguage’ method which will set the correct state.
This looks good but it will be better with some styling. Let’s copy and paste this code in our ‘index.css’ file:
Our language bar is now done and our final result looks like this:
Before going on with the tutorial, let us look back at what we are trying to achieve:
We can see that we still have the Profiles grid to program in our ‘Popular.js’ file. This profiles grid will send AJAX requests to the GitHub API to allow us to class the profiles by popularity for the selected language.
The first thing we’re going to do is to modify our ‘Popular.js’ file to be able to welcome a new component in our App.
Let’s start by creating a new class called ‘SelectLanguage’ and as usual let it extend a React Component and have a render method. In this method, we’re gonna paste the UI of our languages bar.
● We will now add Prop types to this class. Prop types are used to document the properties passed to components. This module get installed directly with ‘Create React App’. To use it, we should first require it at the beginning of our file like any other module.
We are then going to pass the ‘state’ in the style statement as a ‘prop’ as well as the ‘updateLanguage’ method in our click handler:
Now we can see that we have created two prop types (selectedLanguage) and (onSelect). These two prop types should be required after the class.
● We can now go to ‘updateLanguage’ and return our ‘SelectLanguage’ component passing it ‘selectedLanguage’ and ‘onSelect’.
A little trick: if everything that is contained in a component is a render method, we can create a function instead of it. This is what we’re going to do here. However, we must pay attention to the ‘this’ keyword which we can’t use anymore. To fix this, we will pass ‘props’ as the first argument of this function. This function is known as a ‘stateless functional component’ since it does not have a state anymore and is a component that executes a function.
Our code should now look like this:
To fetch info from GitHub (in our case the popular repos), we need to be able to make AJAX requests.
To do this, we must install a powerful library called ‘Axios’ to our project. We open our command line and write:
Let’s go ahead and create a folder called ‘utils’ in our ‘app’ folder.
Inside this folder let’s create a file called ‘api.js’ (github-popular -> app -> utils -> api.js). This file is going to contain all the API requests that we are going to make in our app.
● Let’s open this file and start by requiring the ‘axios’ library.
● The next step is to be able to export an object from this file that will contain all the methods that are needed to interact with an external API.
● The first method that we’re going to have is the ‘fetchPopularRepos’ method which is going to a take in a language and ping the GitHub API to return us back with the most popular repos for that language.
Let’s break this code down:
● In line 8, ‘encodedURI’ encodes the URL that we hit for the GitHub API and is human readable to a new URL that is understandable by the browser. Take a look at the query here (located after the URL):
“q=stars:>1+language:'+ language + '&sort=stars&order=desc&type=Repositories')”
This allows us to fetch all the repos that have more than one star for a specific language then sort them by descending order.
● We then return the invocation of ‘axis.get’ and pass it our URI. This is going to return us a promise (you can read more about promises here).
Creating the RepoGrid component
Let’s now head to our ‘Popular.js’ file and require our API file that we just created.
In the ‘updateLanguage’ component, we call ‘api.fetchPopularRepos’ and we are going to pass it the selected language ( api.fetchPopularRepos(lang) ) along with its function:
Let’s now create a lifecycle event called ‘componentDidMount’ that is going to be called by React whenever the component loads to the screen and it is in this component that we are going to make our AJAX requests. In it, we will invoke
Now let’s create a brand-new component called ‘RepoGrid’ in our render method and pass it our repos:
and create a RepoGrid function that is going to receive some props and return an unordered list to map over all our repos:
Now to map over all our repositories we add ‘props.repos.map’ and give it a class to be able to style it in our CSS file.
We finally add all the items that need to be displayed in our App such as the rank, avatar and number of stars. The final code for ‘RepoGrid’ looks like this:
! Since we are using prop types, we do not have to forget to add prop types to our file by writing:
If we refresh our page we get an error. This is because we are trying to render ‘RepoGrid’ before getting an actual response from the GitHub API. To fix this, we add a condition:
to our ‘render’ method. What this does is that it checks if the repos have been rendered. If it does, it displays the RepoGrid, if not, it displays “LOADING” on the screen.
Finally, let us add a bit of styling to the grid in our ‘index.css’ file:
We have now finished building our Website using React. When switching between the different programming languages, our pages does not reload entirely but specifically fetches the new repos to our grid.
The next step is to upload our project to the cloud and more specifically to Microsoft Azure so that it can be accessed through a URL.
What is Microsoft Azure?
Microsoft Azure is a cloud provider that offers all kind of products such as storage, backup, Virtual Machines, SQL databases and all kind of cloud services. With an availability in forty different regions, Azure is ahead of all other cloud providers and serves 90% of Fortune 500 companies.
It is absolutely FREE to get started with Azure for students via Microsoft Imagine Access http://imagine.microsoft.com
Getting started with Azure
Once that is done, head to the Azure Portal by following this link: portal.azure.com
You will be greeted by this screen: This is your dashboard.
Deploying the platform (Portal)
In this tutorial, we will deploy our Website to the cloud using the Azure Portal.
The first step is to click on the ‘+’ icon labeled by ‘New’ in the sidebar, then on ‘Web+Mobile’ and ‘Web App’ (New -> Web+Mobile ->Web App).
We have many options to fill now:
● In ‘App name’ enter the name you want to give to your website.
● ‘Applications Insights’ helps you diagnose quality issues in your Web Apps.
● Now click on ‘Create’.
Our WebApp will now be deployed in no time.
Uploading our React Project through GitHub
When our platform has been successfully deployed, we will find this screen for the management of our platform.
If we click on the URL to the right of the screen, our browser will open a webpage saying that our App Service has been successfully created.
Let’s now go to the sidebar and to the ‘Deployment Credentials’ tab.
We create a new Username and Password and click on ’Save’.
Now we head to (QuickStart -> ASP.NET -> Cloud Based Source control -> Deployment options -> Setup -> Choose source) and then choose our preferred source.
In this case, we will be using GitHub.
● The first step is to give Azure permission to our GitHub account.
● We then choose our Project’s repo as well as its branch and then click on OK.
That’s it! Our platform is now up and running on the cloud. You can see that we were able to deploy our Website to Azure in a few minutes.
We then got introduced to Microsoft Azure and the variety of services that it offers and uploaded our Website to the cloud. Microsoft Azure doesn’t only allow us to upload already made projects but it also give us powerful tools to build, deploy and manage our apps. From Websites to .NET apps to Internet of Things projects, the possibilities of creation with Azure are endless.
React Official Website: https://facebook.github.io/react/
TylerMcGinnis React Fundamentals course: https://learn.tylermcginnis.com/p/reactjsfundamentals
Microsoft Azure: https://azure.microsoft.com/en-us/
Microsoft Imagine Access http://imagine.microsoft.com
Microsoft Imagine Azure https://azure.microsoft.com/en-us/offers/ms-azr-0144p/
React Tic-Tac-Toe tutorial: https://facebook.github.io/react/tutorial/tutorial.html
Framework for building native UWP and WPF apps with React:
Microsoft Developer Network: https://msdn.microsoft.com/
Node.js on Azure: https://azure.microsoft.com/en-us/develop/nodejs/
JSX documentation: https://jsx.github.io/