Getting started with React.js learning in 10 minutes

No comments

Nowadays, the buzz word in the industry is React, so today I thought of writing on React. In this article I will explain about the “getting started with React.js learning in 10 minutes”. At the end of Part 1 and Part 2, you will be confident to go to the next level of React.js learning. This will give you the right heads on.

Table of Contents:

  • Introduction of React.js
  • Where did the name React in React.js come from?
  • The History of React.js and Why Should We Use React.js?
  • What are the prerequisites to learning React.js?
  • Understanding React.js Components
  • Real time example of component – any web site home page
  • React Component Types
  • React Life cycle Methods (Diagram)

 

Introduction of React.js

Introduction of React.js – 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 as 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.

Where did the name React in React.js come from?

Where did the name React in React.js come from? – 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 stuff in React.

The History of React.js and Why Should We Use React.js?

The History of React.js and Why Should We Use React.js – As we know, millions of people across the geography use the Facebook – and significant no of users got increased when the mobile app revolution happened. At that point of time Facebook was facing 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 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 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.

What are the prerequisites to learning React.js?

What are the prerequisites to learning React.js? – 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.

And 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, 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 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.

Download node.js for windows 64 bit Operating System

  • 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,

ReactJS2

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.

Understanding React.js Components

Understanding React.js Components – As we have pointed in the introduction section component is heart of the react js now we’ll see in detailed. 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 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

Real time example of component in React

React Component Types

React Component Types – In core react.js, based on the way we write and render the component, this has been classified as below:

  1. Functional
  2. Class
  3. Container

Types of component in React js

React Life cycle Methods (Diagram)

React 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.

Example of component life cycle in React

Notes:

  • In the above whichever method ends with Will i.e. before the render method call.
  • In the above whichever method ends with Did i.e. after the render method call.
  • As shown above React component lifecycle has three categories – Mounting, Updating and Unmounting.
  • As shown above the render() is the most used lifecycle method.
  • As shown above the componentDidMount() happens as soon as your component is mounted.
  • As shown above the componentDidUpdate() happens as soon as the updating happens.
  • 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 below basic getting started of of React JS.

  • 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/