8,436 total views, 1 views today
React JS tutorial, nowadays, the buzzword 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 head-on.
React JS Tutorial – 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 a component – any website home page
- React Component Types
- React Life cycle Methods (Diagram)
Getting started with react – React JS Tutorial
History of React – where did the name React in React.js come from?
Where did the name React in React.js come from? – Based on the changes in 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. For example, if 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 the 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 models or controllers, 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 the component. In the coming section, we’ll discuss more components and other stuff to React.
React JS Tutorial – History of React and benefits of React?
The History of React.js and Why Should We Use React.js – As we know, millions of people across the geography use Facebook – and a 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 it improve its 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 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 – it’s mainly to speed up the application performance or dynamic page load time. ReactJS uses a virtual DOM to speed up the rendering process.
React JS Tutorial – what are the prerequisites for 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 an 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 panic, just follow the below link, here you need to downgrade the node.js using the NVM tool(NVM tool can be downloaded from here.
For complete instructions to downgrade, please click here.
Reactjs components – React JS Tutorial
Understanding React.js Components – As we have pointed out in the introduction section component is the heart of the React JS now we’ll see it in detail. As far as components are concerned in React, they have the below characteristics,
Components data will be stored in the component’s state.
This state can be modified based on user action or other actions.
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 website 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 to 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).
Reactjs components – A real-time example of a component – any website home page
Reactjs components – 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 lifecycle – 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, 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 for example in a separate article.
Summary – what do we have here?
So here as part of part 1, we have learned the below basic getting started to React JS.
- Introduction to React.
- What name is React?
- History and why React?
- Prerequisites of React project.
- The component in React JS.
- A real-time example of a component – any website 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
Buy the premium version of SharePoint Online & Office 365 administration eBook from here: