How react works:
React is library not a framework, framework have some constraint that’s bring them some disadvantage. We can make UI design as per our requirement using react with the help of other libraries.DOM is document object model. t’s the browsers’ programming interface for HTML DOM are working as a tree model in form of structure, style and content.
ReactDOM.render and React.createElement method are the core API methods in a React application. ReactDOM.render arguments are what to render to the browser. & where to render that React element in the browser. React element is a virtual element that describe DOM.
React.createElement arguments are HTML tag, attribute, content etc. React only updates the main DOM tree what actually needs to be updated while it keeps everything else the same. It do the “partial” updates.
Reacts & Components:
All React components small or big are reusable. Props, side effects, private state are in React. When input changes, it changes the DOM, is it called React i.e. it gives the reaction. React hook functions only be applicable to functional components.
Functional vs class based component:
Class component is sometimes needed for advanced and very special cases of work. Component is a template of react & Element is the outcome of components. Components make or code more readable. React components can be reused in the same application and multiple applications.
Constructor
It is used for two purpose .a) Initialize local state by assigning an object to state. b) Bind the event handler to an instance.
The Component Lifecycle: Each component has lifecycle methods that you can override to run the code. commonly used lifecycle methods are: mounting, updating, unmounting, Error handling, other API, class properties, instance properties. Mounting means putting elements into the DOM. The next phase in the lifecycle is when a component is removed from the DOM. Rarely Used Lifecycle Methods are shouldComponentUpdate, static getDerivedStateFromProps, getSnapshotBeforeUpdate, static getDerivedStateFromError, componentDidCatch
React Performance optimization: installing the React Developer Tools for Chrome in computer. npm run buid will create a production build of our project. production.min.js are good for production of the application. Install the terser-brunch plugin for efficient Brunch production build. Install evenify terser uglifyify for efficient Browserify production build. Install rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser for Rollup production build. Webpack v4+ will minify our code by default in production mode.
How rendering works: setState() call informs React about the changing of state. After that React calls render() method to update the components in virtual DOM by comparing with the browser. If any changing is happened then React do the change accordingly to the browser DOM. Child components get the information that the DOM is re-renderd and their respective props has changed.