As a developer I felt the need to learn ReactJs because it is a buzz-word in the market these days. Every job post you see has ReactJs mentioned somewhere. So, what would be the easiest and most efficient way to learn?

Note

Being a Senior developer this tutorial might have been biased and freshers might feel left behind. Please correct this document and send Pull Requests if you think you can make things simpler.

What the hell is Noje.js?

I found that knowing about NodeJs is the foundation; we are going to build a NodeJs app after all.

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

Meaning, its just an Implementation of JS language specification. Like CRuby, JRuby, Rubinus, CPython, JPython, etc are Implementations of Ruby and Python language specification.

What is NPM?

Like PIP, Composer, RubyGems, apt-get are package managers of Python, PHP, Ruby, Ubuntu/Linux Distro respectively, similarly npm is package manager for JavaScript. Its called Node Package Manager.

We will learn ReactJs using a simple framework called create-react-app. It will generate little bit of boiler-plate code for your ease. If you wish to learn ReactJs from scratch assemling libraries and server your self, see my older post here cbabhusal.wordpress.com.

App Skeleton generation

I assume that you know at least something about ReactJs framework. This document should work like a cheat-sheet to you; whenever you want to recall everything, you come here and have a nice time.

Using ‘create-react-app’ script

  $ npm install -g create-react-app

To create a new app, run:

  $ create-react-app my-app
  $ cd my-app

following directory structure will be generated:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

Now you can run your newly generated application with in-built webserver Webpack-dev-server by invoking the following command.

  $ cd my-app
  $ npm start

Then you go to the browser and type http://localhost:3000; the following image will appear on the browser window.

You will have to understand that any changes you will make in your application code will auto-reflect in the browser. You don’t have to restart the app-server neither reload your browser instance. Isn’t it awesome? Yeah!

Tips about the files above

You know that ES6 is not completely understood by all of the browsers, so code we write needs to be transpiled to legendary JS. So, the file index.js will be the ultimate standalone application file of yours.

Production build [You can skip this topic for now]

I would like to mention about building your application for production. Though will talk about deploying your app to heroku later in this article or in next coming ones.

$ npm run build

# > calculator@0.1.0 build /home/john/projects/calculator
# > react-scripts build
# 
# Creating an optimized production build...
# Compiled successfully.
# 
# File sizes after gzip:
# 
#   48.25 KB  build/static/js/main.99ae270e.js
#   288 B     build/static/css/main.cacbacc7.css

What did we just do?

We build/compiled our application for production. Now we only have to upload the contents of the directory /build.


Basic React App and Component Introduction

We now will build a simple TimerApp; which shows the current time.

Things we need to know about before we proceed

  • ECMA Script 6 - 2015

    This is that newer version of JS specification in practice.
    Learn More …

  • JSX templates

    An awesome library that allows you to define components in HTML like Markup syntax.
    Learn More …

  • React DOM Components

    The concept of Components is to apply the nature of Object Oriented Programming principles in view objects. It lets you think about every separate work deserving a separate component. This concept lets you organize components and build something different. It empowers code reuse, modularity and clean design.
    Read More …

    So in this tutorial we will keep our components in a separate directory called /components and use ES6 modules concepts to use those components where needed. Think about export and import keywords.

  • Javascript’s setInterval() Function

    You can execute a function once every interval you set; like 1000 refers to 1000ms or 1sec.
    Learn More …

First Target - Lets get going

Our first attempt would be to create a simple digital clock on our own. We will however first try in a single file skipping the concept of export and import because this can go messy pretty fast for beginners.

So, we start dirtying the file /src/index.js. We do not touch other code but write at the end of file.

ES5 way : Functional Components


  function Clock(props){
    return(
      <div className="clock">{props.date.toTimeString()}</div>
    );
  }

  function tick(){
    ReactDOM.render(<Clock date={new Date()}/>, document.getElementById('root'))
  }

  setInterval(tick, 1000);

If you now see the browser, you will find out there is a digital clock running.

In this example we create React Components using bare functions. Guys this works but this code is not scalable. These components cannot have/hold their own states, you have to feed state to them. Therefore, we will see about class type components in next topic.

Functional

Browser Output

ES6 way : Class Type Components

We now remove the code above from /src/index.js and add our new code from example below.

// in components/clock.js

class Clock{
  constructor(props){
    this.props = props;
  }
  
  render(){
    return(
      <div> {this.props.time.toDateString()} </div>
    )
  }
}

Tags

ReactJs  React  Ruby  Webpack  dev-server  setup  SPA  learn  single page app