10 Important tropics everyone must be know it about React

Hello Friends, Today, I am going to talk about 10 important React topics must be know that better to learn about React . I am excited. I think you are also excited. So, let’s start.

|React is not a Framework, it is a Library

Most of the people common confusion which is the best Framework or Library. I have always supported the library because Developers make a framework for specific work. we can not change easily. But Library is a freedom work place. You can divide part by part which we need. It is main different from the Library and framework.

React is not a Framework, it’s a Library. That’s why we can easily take the components we need and make an app according to our choice.

|Props

“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another. But the important part here is that data with props are being passed in a uni-directional flow. (one way from parent to child).

props data is read-only, which means that data coming from the parent should not be changed by child components.

|React App Performance Optimizing

Some processes to optimize the React app development. our React app’s performance cannot be better for many reasons. So, we have to follow the optimizing rules follow to optimize our react app. Optimize rules follow then React app performance is better.

|Document Object Model (DOM)

Document Object Model (DOM) is the object-oriented representation of an HTML or XML document. It defines a platform-neutral programming interface for accessing various components of a webpage, so that JavaScript programs can change document structure, style, and content programmatically

|React Virtual DOM

I have explained DOM previously. Now, I am going to talk about React virtual DOM. Virtual DOM exists which is like a lightweight copy of the actual DOM. So for every object that exists in the original DOM, there is an object for that in React Virtual DOM. It is exactly the same, but it does not have the power to directly change the layout of the document. Manipulating DOM is slow, but manipulating Virtual DOM is fast as nothing gets drawn on the screen.

|Context API

React context API is a way to essentially create global variables that can be passed around in a React app. This is the alternative to “prop drilling”, or passing props from grandparent to parent to child, and only those components can use it, which are provided these.

|State

It is a React special thing. We can save the state of a variable and can also update it by using the React state. If we use a normal variable, we cannot change it while rendering, but using state we can do it using the state function that is provided to update the state variable.

|UseState

UseState is a Hook that allows you to have state variables in functional components. You pass the initial state to this function and it returns a variable with the current state value (not necessarily the initial state) and another function to update this value.

|Callback Refs

React also supports another way to set refs called “callback refs”, which gives more fined control over when refs are set and unset. Instead of passing a Ref attribute created by createRef(), you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere.

|React JSX

React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, however, following are some pros that come with it.

• It is faster because it performs optimization while compiling code to JavaScript.
• It is also type-safe and most of the errors can be caught during compilation.
• It makes it easier and faster to write templates, if you are familiar with HTML

|React Handling Events

Without event handlers in React as just in any other framework, we would not be able to create awesome responsive web applications that respond to a user’s every touch. Event handling is very important as it ensures React keeps track of every action performed by the user. Actions such as resizing a window, clicking a link or scrolling through a page are detected and processed by event handlers.