Let’s discuss some topic about React

What is React: React is a JavaScript library, not a framework. It is used to build user interfaces on the front-end. This open-source project created by Facebook. React creates interactive UIs. It is declarative, component-based, also supports server-side by node js, and allows developers to create large web applications that can change data, without reloading the page.

JSX: JSX stands for JavaScript XML. JSX is actually closer to JavaScript not HTML. It is a JavaScript syntax extension that allow to write JavaScript and HTML together. It is not like template language, it’s easy to learn. Browser can’t understand JSX syntax, cause it is not a plain javascript. Babel transpile JSX to React.createElement.

Components: React is a components based javascript library. Almost everything in react consists of components. Componets usually two types one is class components another is functional components.

Props: In react components like function and props like argument. Props stands for properties. Props use for passing data form one components to another. It is uni-directional (only flow data from parent components to child components).

State: React state stores dynamic data. It is a react build in object. It can not modify directly. For modifying react state used a method call setState(). When data change it re-render virtual DOM for which part is changed, don’t re-render whole DOM. That’s why react is fast and scaleable.

Virtual DOM: DOM stands for Document Object Model. When in react update happened it re-render the virtual DOM, not the actual DOM. After that it update the actual DOM. For this reason react is faster.

React Hook: For setState in functional components react hook is used. This hook idea made easy to use setState and useEffect mathod. In class components setState is used by this keyword, but in functional components has no this keywords. That’s why hook form use and in can declare in components. It makes code more cleaner and usable.

Context: Using props we can send data from one components to another components. But this components must have the relation parent and child. If we want sent data that is not a child components that time we can use context. Context allow to pass data manually at every level. At first we declare data in higher level that we want share than it will be passed any level if it needed. Context is used components, such as the current authenticated user, theme, or preferred language.

Conditional Rendering: React JSX allow conditional rendering. If else condition can use in react components by curly braces. Ternary operator can use. And (&&) operator for inline condional rendering use, if the condition is true then it will be executed otherwise not.