Nowadays, the buzz word in the industry is React, so today I thought of writing on React. At the end of Part 1 and Part 2, you will be confident to go to the next level of React learning. This will give you the right heads on.
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 stuff in React.
History and why React?
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.
Prerequisites’ of React project
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:
- js and NPM – install the Node.js from this link.
- Visual Studio code – There are plenty of IDE, one of the popular one is Visual Studio Code. You can download it from here.
- 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 heart of the react js now we’ll see in detailed. As far as components are concerned in React, they have the below characteristic,
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
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:
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.
- 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.
- 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):