How react reacts-React Js fundamentals.
React is a javascript library that focuses on just one thing and that one thing is “Building user interfaces”. A UI is anything that lets a user interact with the machine. Since Web browsers understand JavaScript, we can use React to describe Web UIs.
React introduced and uses the concept of virtual DOM. Document Object Model is the browsers’ programming interface for HTML.
Virtual Dom:
In normal DOM what happens is if we update anything in our UI it renders the whole DOM, which is costly. So React comes into the picture with Virtual DOM to make the process faster. There are two states in the Virtual DOM. Previous state, that means before changes happen and After state, that means after changes happen. So, by using diffing or reconciliation algorithm React understands which nodes should be changed. React then changes only that nodes in the DOM. This is how Virtual DOM works. By using Virtual DOM React makes the updating operations faster enough!
Component:
React component is a javascript function that returns a react element.
In React component used to describe UI and it is reusable, composable and stateful. We generated many small components and put them into a bigger one. Its main benefits are components are reusable. In components, input is a set of props and the output is a description of a UI. A component can have a private state to hold data that can be changed over the life cycle of the components.
JSX:
JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function.
JSX is a javascript extension that allows us to write function calls in an HTML like syntax. O compiler that translates one form of syntax to another form is known as a transpiler. React has this type of transpiler known as TypeScript or Babel to translate JSX. When JSX is used the <tag></tag> syntax become a call to React.createElement(“tag”). The first letter of the component name is capital. A JSX compiler considers all name start with the lower case later as the name of HTML elements.
Props:
A react elements received a list of attributes when it gets rendered. This attribute is known as props. A function component receives this list as its first argument as an object with keys. receiving props is optional. Components must return a value. It cannot return undefined but null to cause the renderer to ignore its output.
Expressions in JSX:
You need to use a pair of curly brackets to write a javascript expression. You don’t use if condition but you can use a ternary expression. Anything that returns a value writes into {}.
Components vs Elements:
A react component is a template, a blueprint, a global definition. It can be either function or a class.
A react element is what gets returned from components. It’s an object that virtually describes the DOM nodes that components represent. In a function component, this object is returned by the function and in a class component, this object is returned by the components render method.
Benefits of components:
components make code readable, and easier to work with. It can be reused in the same application across multiple applications. We can also reuse it by using a different set of props.
Hooks:
Hooks is a special type of react function that can add extra features and declare states. All Hooks functions start with use. Some of them used to provide a stateful element like useState and others managed the side effects. React Hooks are so much powerful. It can only be used in function components, not in-class components.
UseState
UseState functions return an array with two items. One is used to keep initial data and store data over time and the other is using to set the data when needed.
Stateful and Stateless Components
The first question is what is state? The answer is, state means data that we import which is subject to change. Stateful components are the components which actually keep track of the changing data. And Stateless components are the components which print out the data they get from the parent component as props or render the same thing again and again.
Is React fastest?
React is not fastest but it is faster enough. If we compare Reacts performance in a small application where CRUD operations don’t happen that much we will not perfectly understand the power of React. It might happen that in small applications the actual DOM operations are much faster than React’s Virtual DOM. But in a large scale application where CRUD operations are frequently needed that’s where React comes into the picture. React uses Virtual DOM to identify the changes using diffing or reconciliation algorithm and after identifying, it modify the real DOM within a very short time. So, what we can say is that React is not fastest but it is faster enough!