Getting Started With ReactJS - Part One

Introduction

 

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.  It lets you compose complex UIs from small and isolated pieces of code called “components”, as per React official website.  This represents the view part in MVC framework.  This is not a framework like AngularJS, but just a library like jQuery.  Many people get confused on this part and consider React as a framework instead of the library; this is wrong.  It is a popular open-source JavaScript library that performs data viewing, with the help of HTML.  Some people call it ReactJS or React.js, so don’t get confused.  As it is developed by Facebook, it is also popularly known as “Facebook React.js.”  Currently, it is maintained by Facebook and community developers that are interested in the library.  It is also very efficient in updating the HTML document with new data, making it a perfect choice for data-driven web application, such as Facebook or Instagram.

 

Why the name is React?

 

 Based on the changes of the state of a component (run time value in the DOM), it re-renders the particular component automatically.  I mean, it reacts to the changes of the DOM, so the name is React.  Example: you are displaying the customer details data in the page UI – in run time you have changed something in the customer data source (maybe in customer table), then automatically those changes will be reflected in the browser, without reloading or refreshing the page.

 

As mentioned earlier, React is just a UI part of MVC – we cannot implement full-fledged web application just using React.  For other model or controller, we need to integrate another framework.  This is one of the drawbacks of React.

 

React application is based on the component, so the heart of React is component.   In the coming section, we’ll discuss more about components and other things in React.

 

History and why React?

 

As we know, millions of people across the geography use the Facebook – and a significant no. of users got increased when the mobile app revolution happened.  At that point of time, Facebook was facing a performance issue of their application.  In this context, Facebook had started to think about how can they improve their application performance?  And they started working on it.  Finally, it came to the market in 2011.  So, this is relatively new to the market when compared with other technologies in the market.  Jordan Walke, a software engineer at Facebook created the library.  The first use case of React was in Facebook’s newsfeed in 2011.  Later on, it is picked up by Instagram to use it in their system.  With time, React grew, and Facebook decided to make it an open source in May 2013 at JSConf US.  In 2015, JSConf, React Native was announced which enabled easy development, with Android and iOS development.  In the same year, React Native was open-sourced to help it grow.  So, we understood the history and purpose of React – its mainly to speed up the application performance or dynamic page load time.  ReactJS uses a virtual DOM to speed up the rendering process.

 

Prerequisites' of React project

 

When it comes to prerequisites for developer prior experience, before coming to React learning, the developer should have fair knowledge or understanding of JavaScript and HTML.

 

Prerequisites for react development tool decides in two ways – whether we choose to develop using an online tool/editor or local development environment.

 

If you opt to develop thru online editor, there is no need to install anything on your local machine.  Below is one of the online React development editors.

 

For the development of React from your local machine, you need to install the below software:

1. js and NPM – install the Node.js from this link. 
2. Visual Studio code – There are plenty of IDE, one of the popular one is Visual Studio Code. You can download it from here.

Notes

• While installing the Node.js from the above link, you can choose the below version.
  
  
  
  
• The node.js 10.16.0 version works fine with the new application, which you will create.  But, if you download any github react project, in most of the cases this will not work – during runing the npm start command you will get the below version mismatch error – which will expect lower than 10.x version, the exact error message will be as below,

 

 

If you face this issue, don’t be panic, just follow the below link.  Here you need to downgrade the node.js using NVM tool(NVM tool can be downloaded from here.

 

Complete instruction to downgrade, please click here.

 

Component in React JS

 

As we have pointed in the introduction section component is the heart of the react js.  Now, we’ll see in detail.  As far as components are concerned in React, they have the below characteristic,

• React Component is an independent, reusable code and it contains HTML + Javascript.
• Components data will be stored in component's State.
• This state can be modified based on user action or other action.
• When a component state is changed React will re-render the component to the browser.
• We must implement render method when creating a component.

Lets take the example of typical web site home page – this will have left navigation, top navigation, header, footer and actual content.  In traditional html or asp.net application, we’ll develop this using some sort of left/right, header, footer, or some sort of section or panel controls, but in react each section of the page, we need to develop a separate component for the said scenario.  We need to have left navigation, top navigation, header, footer, and actual content “component” respectively.  Component can pass the data from parent to child, thru the props and state(in the coming section we’ll discuss more about props and state).

 

Real time example of component – any web site home page

 

 

 

Types of component in React?

 

In core react js, based on the way we write and render the component, this has been classified as below,

• Functional
• Class
• Container
  
  
  

React Component life cycle methods(Diagram)

 

React provides the developers a set of predefined functions that if present, is invoked around specific events in the lifetime of the component.  Developers are supposed to override the functions with desired logic to execute accordingly.  I have illustrated this list in the below diagram.

 

 

Note

1. In the above whichever method ends with Will i.e. before the render method call.
2. In the above whichever method ends with Did i.e. after the render method call.
3. I’ll explain each type of method with example in separate article.

Summary - what we had here?

 

So here as part of part 1.  We have learned the basic getting started of of React JS, below.

• Introduction to React.
• Why the name is the React ?
• History and why React?
• Prerequisites' of React project: 
• Component in React JS:
• Real time example of component – any web site home page:
• Types of component in React?
• React Component life cycle methods(Diagram):

References

 

https://reactjs.org/