Introduction to ReactJS

ReactJS is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components.

ReactJS is only the VIEW Layer and yet it is popular because it provides flexibility, modularity and scalability in UI development.

ReactJS is written using ES6 and JSX which cannot be directly run on the browser but it is a more user understandable format. This code is transpiled to a single ES5 .js file which runs on the browser.

Webpack/ Babel are required to transpile the ES6 + JSX code in which React is written, to ES5 code which is run in the browser.

What is JSX?

JSX is a syntax extension for JavaScript. It was written to be used with React.

JSX code looks a lot like HTML. If a JavaScript file contains JSX code, then that file will have to be compiled. That means that before the file reaches a web browser, a JSX compiler will translate any JSX into regular JavaScript.

A basic unit of JSX is called a JSX element, which looks exactly like HTML but is found in a javascript file. JSX elements are treated as JavaScript expressions. They can go anywhere like any JavaScript expressions can go i.e. a JSX element can be saved in a variable, passed to a function, stored in an object or array. Read more on JSX here.

Understanding my first React app.js

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

ReactDOM is the name of a JavaScript library. This library contains several React-specific methods, all of which deal with the DOM in some way or another.

ReactDOM.render is the most common way to render JSX. It takes a JSX expression, creates a corresponding tree of DOM nodes, and adds that tree to the DOM.
The first argument should be a JSX expression, and it will be rendered to the screen. The second element acts as a container for ReactDOM.render’s first argument to indicate where to render it.

Getting started with a new app

Prerequisite : Latest version of NodeJS
Install create-react-app. You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code and create your app.

npm install -g create-react-app 
create-react-app myreactapp 
cd myreactapp 
npm start

Application ready and rolling on http://localhost:3000.


Components and Props

Components are the basic blocks of React. Using components, the UI can be split into reusable pieces handled one at a time.
Components are like JavaScript functions. They take up props as input and return element to be rendered as output.
Components can be defined as functional components as below for the Hello world example:

function Welcome(props) {  
 return <h1>Hello, {}</h1>;

OR They can be defined as ES6 class as below:

class Welcome extends React.Component { 
  render() {     
return <h1>Hello, {}</h1>; 

These components can be used as the tags to build elements and render on the UI as shown below:

function Welcome(props) { 
  return <h1>Hello, {}</h1>; } 
const element = <Welcome name="Gyaan" />; 
ReactDOM.render(   element,   document.getElementById('root') );

 Points to remember : Components and Props

  1. Remember to always start component names with Capital letters to clearly differentiate from the standard DOM tags(div, h1 etc.)
  2. Also a good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component.
  3. All React components must act like pure functions with respect to their props. Pure functions do not modify the value of their props.

Benefits of Class component over functional component:

Class component provides additional features to the component such as local state and lifecycle hooks which help in modifying the props and actionizing the lifecycle of the component.

It’s very easy to convert Functional component to Class; the steps here can be followed.


We have now created our first application using ReactJS and also know the basic building blocks of ReactJS. In our future blogs, we will get into details of handling different type of UI elements in ReactJS.

References and Resources:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s