Getting started with React JS

Photo by Ferenc Almasi on Unsplash

So finally after hearing too much about ReactJS I finally thought of giving it a go. So what is React JS? Well basically its a Javascript library that helps creating UI for the Web pages, effectively and allow re-usability. Enough said, lets get started..

First things first

As I started reading about it, I found most of the stuff quite familiar to Angular and Angular JS. If you dont have any background with Angular / Angular JS and have been using plain Javascript, you might take some time to gain understanding, a time lapse only long enough to have your coffee cool down !

To begin with all you need to do is go ahead and install Node (this is not a tutorial on Node). Once done just run the command

npm install -g create-react-app

This globally installs the boilerplate code for the react starter app. If this executes successfully, then create the React project. For this blog we shall be creating the React Clock which displays the time on the web page.

Go ahead and execute wherever you want on your machine:

create-react-app react-clock

This creates react-clock project ready to run. When the command finishes you shall see the react-clock project all ready to be run. To run the project just navigate to the folder and execute

npm start on the command line. If everything goes great, you shall see the output like below:

You can now view react-clock in the browser.

Local: http://localhost:3000/

What we are building

We shall be building a clock in the React that updates every second.. Lets code it first and the we shall see how things wire up ! I am using VSCode as my IDE but any would do. Open the “react-clock” project in your favorite IDE and you shall see the directory structure as below

Basically node_modules is where all the dependencies live. index.html is the start page for the app while src folder is where our code does. Inside the src folder you can see the App.js file which is where we shall be coding. Basically its the starting component for the app. We can have other components in our app too. A component bascially is an HTML tag with added functionality using its JS file and styling using its CSS file.

Now open up the App.js file and comment out the lines where this is written:

<p className=”App-intro”>

To get started, edit <code>src/App.js</code> and save to reload.

</p>

This is because here we shall throw our code for the clock.

In the App class, first add the variable “dateObject” and also state object as

state = {date: this.dateObject.toLocaleTimeString(),
   pageLoadedAt: this.dateObject.toLocaleTimeString()
};

Don’t worry what is happening right now… Now inside the render function in the same class where we had commented the HTML add the following code:

<p className=”App-intro”> Page loaded at: {this.state.pageLoadedAt}</p>
<p className=”App-intro”> {this.state.date}</p>

Now refresh the browser and you shall see something like this:

But our clock does not refresh yet. Now inside the App class make a function

updateClock() {this.setState({ 
   date: (new    Date()).toLocaleTimeString() })
}

This function shall update the state object. As the state object updates,

it tells the React app to update the HTML with the new values of state object.

But how do we call this function? The answer is simple. React provide event handler

that is called when the component has been rendered. Its called componentDidMount.

We give the functionality to this function. Write the function as

componentDidMount() {setInterval(() => {
   this.updateClock()
   }, 1000);
}

Now everytime, the component is rendered the “componentDidMount” is called and the updateClock updates the clock… Interesting right !

You can find the complete code at: https://github.com/umairk83/React-Magic