React is a popular and powerful Javascript library for developing user interface . It is an open source Javascript Library also known as react.js or ReactJS. It is maintained by Meta whis was formerly facebook. React is use for frontend development of web application and different types of web projects. It’s easy to learn and use. React only reacts if there are any change in component.
Learn React
If you want to be an expert frontend developer than start to learn react. If you have the basic knowledge of javascript and frontend development, you can start the react from right now. It will not take more time from you. It will take maximum 7 days to learn React. There are available source in online to learn react. https://react.dev/ is the best source to learn react. In this article we will discuss about the important and basic terms of React.
How React Work?
Before start to learn react it’s very good to know “How react is work”? React depend on virtual DOM which is a copy of a real Javascript DOM. The virtual DOM contains only the necessary information which are used to render a UI. The task of virtual DOM is immediately reload the reflect of new change. If there is any change at data state, React compares the virtual DOM with the actual DOM to figure out the change. React only update the change in the virtual DOM. React does not need to re rending the whole UI. That’s why React is very fast.
Basic terms of React
During learning React, we will get some important terms of React and if we must have to understand them properly for react development. If we understand the basic terms of React it would be very easy for us to understand React. We will discuss about some term here:
Components:
As a developer, components is the most important thing in React. Component is independent and reusable. One component can be used in many places at React Project because it is independent. Component is almost similar like Javascript function but a component is always independent.
Props:
Properties are called “Props” in React development. This is another popular term in React development and it stands for “properties”. Props are responsible to pass data from one component to another component. Remember, this data passing in a unidirectional flow from parent to child. If you are familiar with other programming language, its like function argument.
State:
React components has a built-in state object. The state is an object where you can store the information or data during create a react application. State contains the real time data or information of a webpage.
Hooks:
Hooks added in the later version of React and available from React 16.8; After added Hooks class components are no needed in React. Hooks replace the class component. Function starting with “use” keyword are consider at Hooks. Hooks allow to use state and other features of react without writing a class. Actually hooks is a reusable function in React.
JSX:
JSX is a Javascript extension and it allows you to write HTML in a Javascript file. It is very helpful to build an interactive UI by React.
Route:
Routing define the rendering of the page at frontend. Based on Routing react load pages or component at frontend. There are two types of routing in React APP. One is called Public and another one is Protected.
Lazy Loading:
Lazy loading is a design pattern. React use lazy load to make application/web more faster.
SPA:
‘Single Page Application’ is often called SPA. Spa is a popular term of React development. Based on client demand a single page is rendering different components. The objective of SPA is to increase the speed and maintain the responsiveness.
Elements:
Elements is a small part of code in React. It’s define what should be in the UI. This is the Smallest unit in React coding.
DOM
DOM stands for Document object Model. It treats an HTML or XML file in a tree structure. DOM is widely used in web application, Frontend development and data scraping.
In next article we will start the coding with React. We will learn How to use state, How DOM is using in React, How to implement Routing, How to create components, How to use a component. Stay with learnbyread!!!