React JS fundamental concept
1. What is react?
React is a javascript library for building UI. It is a declarative, efficient, and flexible javascript library. Every reacts application build depends on components. It’s also components-based architecture. It’s a virtual DOM that depends on elements’ behaviors.
2.Virtual DOM
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.
3.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.
4.JSX
In a React app, we do not create a HTML element by our own either directly with HTML or with JavaScript, rather we tell React to do it with JSX (JavaScript Extension). Instead of writing React components using the React.createElement syntax, we use a HTML like JSX syntax and then use a “transpiler” (e.g. Babel or TypeScript) to translate it into React.createElement calls. So a React component is a JavaScript function that returns a React element (usually with JSX). When JSX is used, the <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.
5.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.
6.States
The state contains data specific to a component that may change over time. The state is user-defined, and it should be a plain JavaScript object. The states should not be modified directly, rather with special function. States may be updated asynchronously, you should not rely on their values for calculating the next state. This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it. Define a new variable introduces a new state and changing the value of that variable mutates that state. A component may choose to pass its state down as props to its child components. Simple state implementation with state hook is given below:
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.
8. Styled-components
Styled-components is a library for React and React Native that allows you to use component-level styles in your application that are written with a mixture of JavaScript and CSS
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.
10.Context API:
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.
