React Is Simple :)

Before learning any library or technology, the first step we must ask ourselves 5W and 1H. This makes us use the library wisely. So in this article, we will see 5W and 1H about React.

What? : React is a JavaScript library for building user interfaces efficient manner.

Why? : we need to use React compared with other UI libraries or frameworks.

1. Composition: This follows DRY(Don't Repeat Yourself), dividing big pages into multiple chunks of components and re-using them.

2. Code Splitting: for further maintenance

3. Performance: Ensures faster rendering by using virtual-dom and diff algorithm.

4. Size: Less size of the package.

5. Compatibility: Easy to use this library with other frameworks or solutions.

6. SEO-friendly & Developer toolset like chrome and firefox addons.

When? React got released May 29, 2013

Who & Where? Jordan Walke & Facebook and community

How? it works: “Virtual-DOM” & “diff”

What is virtual-dom? The virtual DOM (VDOM) 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”. “diffing” algorithm: So that component updates are predictable while being fast enough for high-performance apps.

React implements a heuristic O(n) algorithm based on two assumptions:

• Two elements of different types will produce different trees.
• The developer can hint at which child elements may be stable across different renders with a key prop.

How “reconciliation” works?

• Elements Of Different Types: Matches the elements changing at root level ex: <div> to <p>, React vanishes all the old tree and builds a new tree from scratch.
• DOM Elements Of The Same Type: When the elements are same ex: <div> to <div> it will look for the attribute changes like id or name or className etc., <div id=”user1" className=”valid-user”> to <div id=”user1" className=”invalid-user”>, then it keeps the same underlying DOM node, and only updates the changed attributes.
• Component Elements Of The Same Type: When a component updates, the instance stays the same, so that state is maintained across renders. React updates the props of the underlying component instance to match the new element, and calls UNSAFE_componentWillReceiveProps(), UNSAFE_componentWillUpdate() and componentDidUpdate() on the underlying instance.
• Recursing On Children: When recursing on the children of a DOM node, React just iterates over both lists of children at the same time and generates a mutation whenever there’s a difference.
• Keys: When children have keys, React uses the key to match children in the original tree with children in the subsequent tree. ex: <li key=”todo-1”> <li key=”todo-2"> etc.,

For more info: https://reactjs.org/docs/reconciliation.html

“Thinking in React Components”: Always do “divide and conquer” methodology, to get more success ex:

Here we can see the entire page is divided into multiple components, so these can be called independently and we can re-use them, easy to manage.

The flow of React app:

1. Whenever we run commands like “npm start” or “npm run build” or “npm run test” etc., the controls come to the root folder package.json
2. In package.json it will check for the “scripts” section.

3. From the package.json scripts section controls goes to look for the entry, output, and HTML option point in webpack.config files. ex: when we do “npm run start”

public/index.html

4. From there the control triggers to src/index based on the “entry” point.

5. From here based on the routes or components dependency injection it will bundles all the components and stylings and renders to the <div id=” root”> element of the public/index.html

What? are the core concepts of React:

1. Lifecycle methods and Hooks
2. Component
3. Fragments
4. Parent and Child components with ‘data down and ‘event-up’ relationship
5. Conditional Rendering
6. Props and State
7. Type checks
8. Context
9. Profiler
10. Lazy & Suspend
11. Error Handling and Boundaries
12. HOC (Higher Order Component)

In the next part, we will see all these core concepts one by one along with some examples.

Continued Part-2: https://raghavendrank.medium.com/react-is-simple-part-2-2f7ced066ed7

Thanks,