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.
You are welcome to check my GitHub profile as well as my Linkedin and ask me any kind of questions.
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.
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:
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.
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:
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:
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:
● The first one is our actual component: (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:
This post first appeared on MSDN Blogs | Get The Latest Information, Insights, Announcements, And News From Microsoft Experts And Developers In The MSDN Blogs., please read the originial post: here