Notes on some React JS library fundamental topics
I have written here a summary about some topics of react JS library.
You can guess from the article heading. React JS is a library not framework. It is declarative that means we tell react what we want but don’t need to care about how to do it. React introduced a smart idea of Virtual DOM.
Document object model(DOM) is the browser’s programming interface for HTML documents that treats them as a tree structure. In react JS when we do render it makes a virtual DOM of Browser’s DOM. When we change code in react then it again makes a virtual DOM and compare these two DOM and update the Browser DOM. Actually how virtual DOM and diffing works in React Js.
React uses diff algorithm to compare between virtual DOM using two assumptions:
1. different types of elements will produce different tree sturcture.
2. React will use key property to avoid regenerate a unchanged tree.
React does changing list of elements by comparing virtual dom and diff algorithm and then do render and change the browser dom to complete the work in one write cycle without any reflow.
In react js we can code html, css, js in a file. This is beacuse of jsx which is a jvascript extension not a template language. The react will internally use Babel to transpile jsx to React.createElement(component, props, …childeren) function.
So a react component is a JS function that returns a react element. This component name to be started with capital letter otherwise react thinks it is a html tag.
So a react component is a blueprint. A global definition. This can be either a function or a class (with a render method). React element is an object that virtually describes the DOM nodes that a component represents. So react element are just objects in memory, and we can’t change anything about them. React internally updates, creates, destroys objects to figure out the DOM elements tree that needs to be rendered to the browser. React hooks make functional component stateful. React hooks usually start with use word. Such as useState() which returns a getter and setter method in an array.
So hooks are a call to special functions in react functional component. We can not use hook in class component.
React wraps the DOM event objects with an object of its own to optimize the performance of events handling. Inside an event handler, we can still access all methods available on the DOM event object.
In react we can share state of a component to others. To share state with child components we can shift state to parent component. We can also share props from parent to children components. React has a important terms conditional rendering.
To increase react app performance we should code properly at first. While coding we should look at developer tool suggestion to optimize code which is helpful. Without this for functional component we can use useMemo, useCallback hooks.
Lazy loading is one of the best technique to speed up the load time. React.lazy function renders a dynamic import as a regular component. It makes easy to create components and render them using dynamic imports. It takes a function as a parameter.
To know better about react js you can visit react js official document section which is a very good source to learn basics also do google to get easy and informative article.
