A Simple idea about React.

1) What is React?
React is a JavaScript library that works with Front-end. It helps a developer to build a user interface using its components. Some people think that React is a framework. But there is a fine line of difference between framework and library. The framework is not that much flexible but Library is.

2) Why React is so popular?
React was a game-changer in the field of web development. It made the communication between developer and browser more clearer. It is fast. And it came up with the idea of virtual DOM. (Document object model).

3) Virtual DOM —
It is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation. This method allows the contextual API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event management, and manual DOM updating that you would otherwise have to use to construct your app.

4) JSX —
It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript. It makes it easier for us to create templates. Instead of separating the markup and logic in separated files, React uses components for this purpose. We will learn about components in detail in further articles.

5) Components —
We can define components as classes or functions in React. The components are the building blocks of any react application and many of them are part of a standard react app. Simply put, a component is a JavaScript class or function that takes optionally inputs (prop) and returns a React element that defines how the UI segment should look.

6) Props —
It is an intance property of React. Props stand for “Properties.” They are read-only components. It is an object which stores the value of attributes of a tag and works similar to the HTML attributes. It gives a way to pass data from one component to other components. It is similar to function arguments. Props are passed to the component in the same way as arguments passed in a function.

7) Performance Optimization —
> Use the Production Build.
> Profiling Components with the DevTools Profiler.
> Virtualize Long Lists.
> Avoid Reconciliation.
> No Mutating Data.

8) Conditional Rendering —
Conditional rendering is a term to describe the ability to render different user interface (UI) markup if a condition is true or false.
> if…else
> switch
> Element Variables
> Ternary Operators
> Using Logical expression.
> Immediately Invoked Function Expressions (IIFEs)
> Enhanced JSX Libraries (babel-plugin-jsx-control-statements)
These are some way of conditional rendering.

9) Event Handling —
Using the Event Handlers, user behavior and browser actions can be managed and verified. Things should be achieved while loading a page every time. Things to do when the tab is closed
Action to be taken when a person clicks on a button
Content to verify when data is entered by a customer.

10) Hook — UseEffect() -
When you call useEffect in your component, this is effectively queuing or scheduling an effect to maybe run, after the render is done. After rendering finishes, useEffect will check the list of dependency values against the values from the last render, and will call your effect function if any one of them has changed.