Hi everyone,

Welcome to our very first React tutorial. In this tutorial series, we are going to make an introduction to React and learn how to create React.js applications. Before we dive into the good stuff, let me start talking with what React is, why it was developed, and why it is so popular:



React was created by a software engineer at Facebook. It was first deployed on Facebook's news-feed in 2011 and later on Instagram.com in 2012.  React Native, which enables native Android, iOS, and UWP development with React, was announced at Facebook's React.js conference in February 2015 and open-sourced in March 2015 [Wikipedia].

After the library was released as an open-source tool in 2013, it became extremely popular due to its revolutionary approach to programming user interfaces. Essentially, React is a JavaScript library for building user interfaces and combines the speed of JavaScript and uses a new way of rendering webpages, making them highly dynamic and responsive. It encourages the creation of reusable UI components which present data that changes over time.

Alright, so since we have a very basic knowledge of React and its history, we can start exploring how it works. There are some tools/libraries we are going to install to get things ready for React development. In fact, these tools are not absolutely required to be able to use React, however in order to get the most out of the features of ES6, JSX and bundling, we need them.

Before going into details of how to set-up everything to be able to use React, I would like to give the experienced ones the option of installing the project easily from my git repo without going through the following steps. For others who would like to follow the step-by-step guide, let's begin:

1 - Let's create a brand new project

Let's create a new folder and initialize our project using NPM (Node Package Manager makes it easy for JavaScript developers to share and reuse code, and makes it easy to update the code that you’re sharing, so you can build amazing things [Get NPM].)

$ mkdir react-tutorial-1
$ cd react-tutorial-1
$ npm init

And accept all the defaults for creating an npm project.

2 - Install Webpack & Babel

In React, even though it is supported, we are not going to be writing plain JavaScript code, but we are going to be writing our code in a flavour of JavaScript called JSX. We are going to use React with Babel to be use able to use ES6 and JSX in our JavaScript code. ES6 is a set of modern JavaScript features that make development easier, and JSX is an extension to the JavaScript language that works great with React.

Let's install Webpack via npm:

$ sudo npm i webpack --save

And create the Webpack configuration file:

$ touch webpack.config.js

Then open this new file and paste the following configuration:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/public');
var APP_DIR = path.resolve(__dirname, 'src/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module: {
    loaders : [
    {
      test : /\.jsx?/,
      include : APP_DIR,
      loader : 'babel-loader'
    }]
  }
};

module.exports = config;

The APP_DIR holds the directory path of the React application's source code directory and the BUILD_DIR represents the directory path of the bundle file output.

If you are familiar with C# or Java, you might have noticed the entry field of config variable. It represents the main entry point of the application, just like a main class in Java. Here the index.jsx in the src/app directory is the starting point of the application. The loaders property takes an array of loaders, here we are just using babel-loader. Each loader property should specify a file extension it has to process via the test property. Here we have configured it to process both .js and .jsx files using the regular expression.

Now that we have installed and configured Webpack, let's do the same for Babel:

$ sudo npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save

Then, create a file called .babelrc (Heads up: This file will be a hidden file for Linux users)

$ touch .babelrc

and add the following:

{
  "presets" : ["es2015", "react"]
}

3 - Install React & React-Dom

$ sudo npm install react react-dom --save

If everything went well, the installation of the required libraries is complete! Now it's time for the good stuff:

Let's begin by creating our index.jsx file under src/app folder and write our first React code:

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return <p> Hello React! We're learning React</p>;
  }
}

render(<App/>, document.getElementById('app'));

We also need to create the index.html file and place it under src folder:

<html>
  <head>
    <meta charset="utf-8">
    <title>React.js Tutorial - Codemio.com</title>
  </head>
  <body>
    <div id="app" />
    <script src="public/bundle.js" type="text/javascript"></script>
  </body>
</html>

Time to run it and see the result using the following command!

$ ./node_modules/.bin/webpack -d

Now, open index.html and you will see the "Hello React! We're learning React" text. But isn't this a bit impractical? I personally would not want to run the same command and refresh the page each time I make a change in my code. So what can we do about this? We can use our npm to automatically build whenever there is an update to our code! Here is how:

We just have to edit the package.json file and add the following line under "scripts":

//...  
"scripts": {
    "dev": "webpack -d --watch",
..//

Now, all we have to do is to type:

$ npm run dev

and whenever we make a change it will automatically build and all we have to do is to refresh the page. But how about the page reload part? Can't we automate that part as well? Sure we can but that is a bit more work and is out of scope of this tutorial but here is the link to get live reload integrated into your application.

Thank you guys for reading, I hope this post was helpful, in the following tutorials we are going to dive deeper into React's syntax. See you in the next React tutorial!