By 9,077 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 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 perspective..
Key-Highlights: React JS Tutorial
- 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
Introduction to React.js React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small, isolated pieces of code called “components,” as per React’s official website.
This represents the view part of the 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 a 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 React JS 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 who are interested in the library. It is also very efficient at updating the HTML document with new data, making it a perfect choice for data-driven web applications such as Facebook or Instagram.
History of React – where did the name React in React.js come from? React JS Tutorial
Where did the name “React” in React.js come from? – Based on the changes in the state of a component (the run-time value in the DOM), it re-renders the particular component automatically. I mean, it reacts to the changes in the DOM, so the name is React. For example, if you are displaying the customer details data in the page UI and, 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 applications are based on components, so the heart of React is the component. In the coming section, we’ll discuss more components and other stuff for React.
React JS Tutorial – History of React and benefits of React?
What is the history of React.js and why should we use it?As we know, millions of people across the globe use Facebook, and a significant number of users increased when the mobile app revolution happened.
At that point in time, Facebook was facing a performance issue with its application. In this context, Facebook had begun to consider how it could improve the performance of its application.They began working on it, and it was finally released in 2011.
So, this is relatively new to the market when compared with other technologies on 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.
Instagram later picks it up for use in their system.With time, React grew, and Facebook decided to make it open source in May 2013 at JSConf US. In 2015 at JSConf, React Native was announced, which enabled easy 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?
What are the prerequisites for learning React.js? When it comes to prerequisites for developer prior experience, before coming to React learning, the developer should have a fair knowledge or understanding of JavaScript and HTML.
And the prerequisites for the React development tool determine whether we develop using an online tool or editor or a local development environment in two ways.
If you opt to develop through an 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 on your local machine, you need to install the following 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.
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 that you will create, but if you download any GitHub React project, in most cases, this will not work. When you run the NPM start command, you will receive the version mismatch error, which expects a lower version number than 10.x. The exact error message is as follows:
“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 pointed out in the introduction section, components are the heart of React JS; now we’ll see them in detail. As far as components are concerned in React, they have the following characteristics:
- React Component is a reusable piece of code that includes HTML and Javascript.
- Component 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, a header, a footer, and the actual content.
In a 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 an actual content “component,” respectively.
A component can pass the data from parent to child through the props and state (in the coming section, we’ll discuss more about the props and state).
Reactjs components – A real-time example of a component – any website home page (React JS Tutorial)
Reactjs components – React Component Types (React JS Tutorial)
React Component Types: In core react.js, this is classified as follows based on how we write and render the component:
- Functional
- Class
- Container
React lifecycle – React Life cycle Methods (Diagram) – React JS Tutorial
React Life Cycle Methods (Diagram): React provides the developers with a set of predefined functions that, if present, are invoked around specific events in the lifetime of the component. Developers are expected to override the functions with desired logic for them to execute properly. I have illustrated this list in the below diagram.
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, the React component lifecycle has three categories: mounting, updating, and unmounting.
- As shown above, render() is the most commonly used life-cycle method.
- As shown above, componentDidMount() happens as soon as your component is mounted.
- As shown above, componentDidUpdate() happens as soon as the updating happens.
- I’ll explain each type of method, for example, in a separate article.
Summary – React JS Tutorial (How to learn React JS quickly)?
So, as part of Part 1, we learned the following fundamentals for getting started with React JS.
- Introduction to React
- What is the name of React?
- history, and why react?
- prerequisites of the React project.
- the component in React JS.
- A real-time example of a component is any website home page.
- What are the types of components in React?
- React Component lifecycle methods (diagram):
- React life-cycle methods diagram
References – React JS Tutorial (How to learn React JS quickly)
See Also: SharePoint Online Tutorial
You may also like the below SharePoint Online tutorials:
- 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:
About Post Author
