React is a javascript library. It is very popluar. It helps to build user intefaces both in web and mobile application. We will show the features of react application by building a single page application For organizing single page application using React is one of the challenging task. Hence, we introduce React Boilerplate. It gives you a foundation of your web application.

Before you go through with react, we need to learn the basic of ES6 which you will get from here. More Importantly you will focus on the uses of arrow functions, classes, let, this, const, yield and so on.

Installation of Node JS in your system.

At the moment of writing this blog post, the current stable version of Node JS is 8.9.4LTS

# Using curl to retrive the installation script
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

Now, for install and compile the native addons from npm, we need to install build tools.

sudo apt-get install -y build-essential

2. Now we are going to create a folder in our home directory and download react boilerplate

# Choosing home directory
cd ~
# Create a directory for our solution and go inside the folder
mkdir react
cd react

# Downloading React Boilerplate from github
git clone https://github.com/react-boilerplate/react-boilerplate.git --depth=1

# Go Inside your React Boilerplate folder
cd react-boilerplate/

Install the node modules and run the application react boilerplate.

# Install node modules
npm run setup

# Build all the JS files
npm run build:dll

# Run npm
npm run start

Visit the http://localhost:3000 , you will get the default boilerplate running into your machine.

Now, you will see your initial structure for your react boilerplate application where folder structure similar like this.

    ├── app
    ├── appveyor.yml
    ├── Changelog.md
    ├── CODE_OF_CONDUCT.md
    ├── CONTRIBUTING.md
    ├── docs
    ├── internals
    ├── LICENSE.md
    ├── package.json
    ├── README.md
    ├── server
    └── yarn.lock

If you scroll down to learn about the react boilerplate, I am expecting that you learn Javascript, ES6 and ready to move on. Please enter to the app folder. You will see the app folder consist some files and folder. Please match it yourself.

    app/
    ├── app.js
    ├── components
    ├── configureStore.js
    ├── containers
    ├── global-styles.js
    ├── i18n.js
    ├── images
    ├── index.html
    ├── manifest.json
    ├── reducers.js
    ├── tests
    ├── translations
    └── utils

Now, If we go inside the container folder, we will find this folder structure

    containers/
    ├── App
    ├── FeaturePage
    ├── HomePage
    ├── LanguageProvider
    ├── LocaleToggle
    ├── NotFoundPage
    └── RepoListItem

If you go through the basic of React, you may searching for components. Now, the core components of react is representing inside App folder, which consisting the router. FeaturePage & HomePage are the two main components which is visited while we running application. RepoListItem is working for rendering repository by searching github username. We will discuss about that later on. First, we create a folder inside the containers folder and create a file name index.js. Now, write belows javascript code.

import React from 'react';
import H1 from 'components/H1';

export default class QueryPage extends React.Component{
    render(){
        return (
            <H1>
                I Love React
            </H1>
        )
    }
}

Add a Loadable.js file inside QueryPage Container. It will give loader until the page complete its template rendering.

import Loadable from 'react-loadable';

import LoadingIndicator from 'components/LoadingIndicator';

export default Loadable({
  loader: () => import('./index'),
  loading: LoadingIndicator,
});

Now first open the file in App/index.js import QueryPage.

import QueryPage from 'containers/QueryPage/Loadable';

Add the query page in especific router.

<Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/features" component={FeaturePage} />
    <Route path="/query" component={QueryPage} />{/*  Your first container where you put your code*/}
    <Route path="" component={NotFoundPage} />
</Switch>

Now visit the http://localhost:3000/query , you will get your desired query page.

This is for today. Next part we will learn about basic components.