1. What is react?
While making an app with React, developers don’t have to worry about manipulating the browser DOM. What they have to do is only update the states (we will be learning it later in this article) of the app and tell React what to do and rest goes to React. React does the heavy lifting of manipulating the DOM, but in the simplest way. It manages a virtual DOM tree of the entire app in the memory.
When any changes are to be made to the real DOM by any event, it generates a new virtual representation of the updated tree. Now React has 2 versions of the tree in memory! React does not discard what has already been rendered in the DOM tree in the browser. Instead, it will compare the 2 virtual versions of the tree that it has in memory, compute the differences between them, figure out what sub-trees in the main tree need to be updated, and only update these sub-trees in the real DOM in the browser. And, this concept makes React very efficient to work with a browser’s DOM tree.
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.
React.createElement syntax, we use a HTML like JSX syntax and then use a “transpiler” (e.g. Babel or TypeScript) to translate it into
<Tag></Tag> syntax becomes a call to
React.createElement("tag"). The first letter must be a capital one and it is a requirement since we will be dealing with a mix of HTML elements and React elements. Browsers don’t have to deal with JSX at all and React does not have to deal with it either! Only the compiler does. We send the raw html and css to the browser.
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.
7. Inline styling
In React, inline styles are not specified as a string. Instead, they are specified with an object whose key is the camelCased version of the style name, and whose value is the style’s value, usually a string.
9.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.
Context-API is another method to pass some data from components. We know props can pass data from parent component to child component. But sometimes we need to pass data from child to parent or others components that are not the same. In this situation, we use Context-API & easily pass data from every component in our react app.