No Compromise about performance. And Recharge your down battery 😊😎 — React JS
01.React is a JavaScript “library”
It is not exactly a “framework”.A JavaScript library for building user interfaces. Frameworks serve a great purpose, especially for young teams and startups. Frameworks are not flexible, although some claim to be. A framework usually wants you to code everything a certain way.
3 Types of React-based 1.Declarative 2.Component-Based 3.Learn Once, Write Anywhere
Write programs that do one thing and do it well. Write programs to work together.
— Doug McIlroy
02.How Virtual-DOM and diffing works in React
What is the DOM?
DOM stands for Document Object Model.
What is Virtual DOM?
virtual DOM is just a copy of the original DOM kept in the memory and synced with the real DOM by libraries such as ReactDOM. This process is called Reconciliation. Think of Virtual DOM as the blueprint of a machine, changes made to the blueprint don’t reflect on the machine itself.
How Virtual DOM works?
That’s where the concept of virtual DOM comes in and performs significantly better than the real DOM. The virtual DOM is only a virtual representation of the DOM. Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM.
03.Default props
What are Default props?
DefaultProps is a property in React component used to set default values for the props argument.
DefaultProps can be defined as a property on the component class itself, to set the default props for the class. This is used for undefined props, but not for null props. For example:
class Example extends React. Component {
render() {
return <h1>{this.props.text}</h1>;
}
}
// Set defaultProps equal to an object:
Example.defaultProps = {};
04.prop-types
Runtime type checking for React props and similar objects.PropTypes make sure the props objects pass the correct types to a component.
PropTypes is a library that helps in minimizing this problem in React by checking the types passed in the props object against a specification we set beforehand and to raise a warning if the types passed don't match the types expected.
05.Optimizing Performance
Many way Performance Optimization Techniques for React Apps.
For Example:
- Using Immutable Data Structures
- Function/Stateless Components and React. …
- Multiple Chunk Files. …
- Use React. …
- Avoid Inline Function Definition in the Render Function
- Throttling and Debouncing Event Action in JavaScript
- Avoid using Index as Key for map. ..
- Avoiding Props in the Initial States
9.Use Reselect in Redux to Avoid Frequent Re-render
10. Spreading props on DOM elements
6.JSX
What is JSX
JSX stands for JavaScript XML.
It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript