6,605 total views, 2 views today
Nowadays, the buzz word in the industry is React, so today I thought of writing on React. In this article, I will explain the real-time example of the React component (Learn the basics understanding of React 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
- A real-time example of component – any web site home page
- React Component Types
- React Life cycle Methods (Diagram)
Introduction of React.js
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 a 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 components and other stuff to 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 Facebook – and significant no of users got increased when the mobile app revolution happened. At that point in time, Facebook was facing the performance issue of its 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?
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:
- Node.js and NPM – install the Node.js from this link.
- Visual Studio code – There are plenty of IDE, one of the popular ones in the 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 running 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,
“Your dev environment is running NodeJs version v10.13.x which does not meet the requirements for running this tool. This tool requires a version of NodeJS that matches >= 8.9.4 <9.0.0”
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 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,
Components data will be stored in the 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 a render method when creating a component.
Let’s take the example of a typical web site home page – this will have left navigation, top navigation, header, footer, and the 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 reacting 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. A component can pass the data from parent to child thru the props and state(in the coming section we’ll discuss more props and state).
A real-time example of component – any web site home page
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:
React Life cycle Methods (Diagram)
React Life cycle Methods (Diagram) – React provides the developers with 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.
- As shown above, the React component life-cycle has three categories – Mounting, Updating, and Unmounting.
- As shown above, the render() is the most used life-cycle 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 a separate article.
Summary – what we had here?
So here as part of part 1, we have learned the below basic getting started to React JS.
- Introduction to React.
- Why the name is the React?
- History and why React?
- Prerequisites’ of React project.
- The component in React JS.
- A real-time example of component – any web site home page
- Types of the component in React?
- React Component lifecycle methods(Diagram):
- React life-cycle methods diagram
- Office 365: Getting started with SharePoint PnP PowerShell – installation
- In 2 steps convert a classic SharePoint page to modern using PnP
- Office 365: Retrieve hub sites and associated sites using PnP Powershell
- Create a modern team site using PnP PowerShell in SharePoint
- In 4 steps access SharePoint online data using postman tool
- SharePoint admin center: Learn SharePoint online administration in an hour – step by step
- SharePoint REST API: GET vs POST vs PUT vs DELETE vs PATCH
- Office 365: Understanding the hub site in SharePoint online