Guest post from Walid Behlock Microsoft Student Partner at University College London

About me

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.

You are welcome to check my GitHub profile as well as my Linkedin and ask me any kind of questions.

Overview

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?

Before actually starting to introduce React, I will try to illustrate the problems that traditional JavaScript programming causes when building large web applications and how React approaches (and solves) these issues.

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.

This is how traditional JavaScript works: the wall can be considered to be the DOM (Document Object Model) of any Webpage and in this case, reloading the page every time just to apply a little change uses a lot of unnecessary computing power and doing DOM manipulation by hand is an error-prone manipulation.

This is where React comes into place: React is an efficient and flexible JavaScript library created by Facebook in 2013 that offers to the developer a virtual DOM to render his changes without actually having to reload the whole page every time. In order to do this, React stores the state of the DOM structure and when an update is made to the UI, it compares this structure with the new one and updates the changes that have been made.

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.

The easiest way to install it is to install Node since NPM comes already bundled in it. We can download Node from this website or we can use Homebrew to do so by running:

1. brew install node

from the command line. Once we have NPM installed, we are ready to get started.

Setting up the Project

Environment

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:

   1: npm install -g create-react-app 

   2: create-react-app github-popular 

   3: cd github-popular 

   4: npm start 

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.

You can also have a look at the ‘Create React App’ README.

By launching ‘npm start’, our browser should open a new window on a localhost server with this screen:

Project Files

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.

Editing ‘index.js’

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:

   1: // index.js // 

   2: var React = require('react'); 

   3: var ReactDOM = require('react-dom'); 

   4: require('./index.css'); 

● 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.

   1: class App extends React.Component { 

   2:  

   3: } 

● 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.

   1: class App extends React.Component { 

   2: render() { 

   3:  

   4:  } 

   5: } 

● Now this is where people often get confused:

   1: class App extends React.Component {

   2: render() {

   3: return (

   4: 
Hello World!

   5:     )

   6:   }

   7: }

In line 4, it seems that we are combining HTML with JavaScript which violates everything we have been learning on separation of concerns.

This line of code is not actually HTML but JSX, and this is the reason why we need Webpack and Babel to transpile this special syntax to traditional JavaScript.

JSX is really useful at building the UI since HTML is a language that is widely used and practical at building User Interfaces. You can read more about JSX here.

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:

   1: ReactDOM.render(); 

at the end of our JavaScript file. We are going to pass it two different arguments:

● The first one is our actual component: (this is also JSX).

● The second argument is where we want it to render:

document.getElementById('app')

(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:

   1: // index.js // 

   2:  

   3: var React = require('react'); 

   4: var ReactDOM = require('react-dom'); 

   5: require('./index.css'); 

   6:  

   7: class App extends React.Component { 

   8: render() { 

   9: return ( 

  10: 
Hello World!
 

  11:     ) 

  12:   } 

  13: } 

  14:  

  15: ReactDOM.render( 

  16: , 

  17: document.getElementById('app') 

  18: ); 

Editing ‘index.html’

In this html file, we are just going to copy a traditional html template:

   1:  

   2: 

   3: "en">

   4: 

   5: "UTF-8">

   6: 

   7: 

   8: 

   9: 
"app">

  10: 

  11: 

! 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:

   2:

   3: var React = require('react');

   4: var Popular = require('./Popular');

   5:

   1: // App.js // 

   6: class App extends React.Component {

   7:

   8: render() {

   9: return (

  10: 
'container'>

  11: 

  12: 

  13:

  14:    )

  15:   }

  16: }

  17:

  18: module.exports = App;

Our index.js file should now look like this:

   1: // index.js // 

   2:

   3: var React = require('react');

   4: var ReactDOM = require('react-dom');

   5: require('./index.css');

   6: var App = require('./components/App');

   7:

   8: ReactDOM.render(

   9: ,

  10: document.getElementById('app')

  11: );

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.

Languages bar

● 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:

   1: // Popular.js // 

   2:

   3: var React = require('react');

   4:

   5: class Popular extends React.Component {

   6:

   7: render() {

   8: return (

   9:

  10:   )

  11:  }

  12: }

  13:

  14: module.exports = Popular;

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: