My first React JS Application

After giving an introduction to React Js, I have thought of making my hands dirty by starting with writing a simple React Js application. This article is about sharing those steps involved in creating my first React JS application. This article is aimed at complete beginners like me who are starting with React JS. Without further ado, lets get started.

React JS needs help from some third party technologies for it’s running, even though it is a JavaScript technology. The technical help includes the following

  • React compiler – Helps us to transform the React oriented code to basic JavaScript code so that our browser understands how to run the application⦁ React compiler – Helps us to transform the React oriented code to basic JavaScript code so that our browser understands how to run the application
  • Babel JS – Transform the JSX code into basic JavaScript code⦁ Babel JS – Transform the JSX code into basic JavaScript code
  • Browserify – Lets us use the require style coding for React JS environment
  • Webpack – Bundles the front end code into optimized bundles that speeds up the application
  • Webpack Dev Server – A webpack based development server that helps in front end web development



Since I am a beginner, I started to get my hands on the create-react-app application. The create-react-app is a Node JS based application that helps us to set up a React JS development environment in a single shot instead of installing all the above applications in a single shot. So lets go ahead and install the create-react-app application (Assuming that Node JS platform is installed). The following command installs the create-react-app application in our system.

npm install -g create-react-app

Running the application

Now we have the create-react-app installed globally in our system. Lets go ahead and create a basic React JS application. Issue the following command to do that

create-react-app sample-application

Here sample-application is the name of the React JS application that we are going to create. After issuing the above command, a basic React JS application is setup. We can navigate inside the created folder and then give the following command to run the application.

npm start

This will open the sample React Js application in a browser window.

Doing some coding

The create-react-app makes it so simple to set up a basic React JS application and run it. Without a single line of coding, we are able to set up a React JS application. But what’s the fun in creating an application without doing a bit of coding. So lets tweak the created application with the following code and get some experience on the React JS programming style. Lets go ahead and delete all the contents in the src folder of the created sample application. After that create a JavaScript file named index.js with the following code

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Article extends React.Component {

    constructor() {
        super();
        this.markAsRead = this.markAsRead.bind(this);
        this.state = {
            isRead: false
        };
    }

    markAsRead() {
        this.setState({
            isRead: true
        });
    }

    render() {
        let isReadClass = (this.state.isRead) ? 'read' : '';
        return (
            <div className="page-article">
            <h1 className={"article-heading " + isReadClass}>
                {this.props.post.title}
                <span className="mark-as-read" title="Mark as Read" onClick={this.markAsRead}>&#10003;</span>
            </h1>
            <span className="article-content">{this.props.post.content}</span>
            </div>
        );
    }
}

class Page extends React.Component {

    articles = [
        {
            title: 'Article title 1',
            content: 'Article content 1'
        },
        {
            title: 'Article title 2',
            content: 'Article content 2'
        },
        {
            title: 'Article title 3',
            content: 'Article content 3'
        },
        {
            title: 'Article title 4',
            content: 'Article content 4'
        },
        {
            title: 'Article title 5',
            content: 'Article content 5'
        }
    ];

    render() {
        
        return (
            <div>
                <h1 className="page-heading">This is a page Heading</h1>
                {this.articles.map(function (article) {
                    return <Article key={article.title} post={article}/>
                })}
            </div>
        );
    }
}

ReactDOM.render(<Page/>, document.getElementById('root'));

Also create another stylesheet named index.css and paste the following content



html, body {
  margin: 0;
  padding: 0;
  background: #E4E4E4;
}

.page-heading {
  text-align: center;
  padding-bottom: 50px;
  border-bottom: 1px solid #ACACAC;
}

.page-article {
  background-color: #ffffff;
  margin: 10px 100px;
  box-shadow: 2px 2px 3px rgba(145, 142, 142, 0.7);
  padding-bottom: 10px;
}

.article-heading {
  background-color: #98c6ff;
  padding: 5px;
  font-family: consolas;
  position: relative;
}

.article-heading.read {
  background-color: #ff0000;
}

.mark-as-read {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 10px;
  top: 10px;
  font-size: 20px;
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
  cursor: pointer;
}

.mark-as-read:hover {
  background-color: #000000;
  color: #ffffff;
}

.article-content {
  padding: 5px;
  text-align: justify;
  margin: 10px;
}

Once the above code contents are pasted our application looks like the one shown in the below screenshot.

sample react js application

Create react app sample application

The application shows a blog application with five sample hard coded articles. Each article is accompanied by a mark as read button on the right hand side. This button when clicked will mark the current article as being read and is indicated by a color indicator.

Code Explanation

The index.js is the main part of our application. It defines the React JS components that render the corresponding HTML contents in the application loading point. This file contains a Page Component that renders a list of Article components. The Page component contains the data for the Article component in a hard coded array form. In the future this data may be retrieved from a remote database. For now it’s a hard coded array. This array is looped and each data which is an Article object is fed as the input. This data is obtained in the Article component via this.props.

So in the Article component this.props.post refers to the current iterated object in the article array that is passed to it. The Article component also has something called a state that maintains the current state of the application. Each article has a mark as read button towards the right, which when clicked will change the state of the application. Once the state changes, the app contents gets re-rendered. In output, the state change is indicated by a color change in our sample application. I will be explaining more about state and props in my future video tutorials



Conclusion

This article gave an overall idea of how to set up the development environment for react and then starting up with the development process by making a sample application. This would give an overall feel about what is react, how to start with the development process. We will be discussing more about react in our future video tutorials.




No Comments


You can leave the first : )



Leave a Reply

Your email address will not be published. Required fields are marked *