Lets React !

Umair Khan
Sep 1, 2018 · 3 min read

Ok so, I just came across this “Medium” platform… To give it a try I am publishing a blog on programming with React JS. Lets begin:

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

Umair Khan

Written by

Just a humble being who is passionate about Software Development, loves Data Science, finds pleasure in Psychology & discovers world in music !

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade