10 important items of React
1. React
React is a library of JavaScript. It works under the Hood. That means, it takes help other libraries (node, npm, babel, dom) and works together. It is use only for creating User Interfaces. A developer can design the UI by small components with HTML text. The small components are attached together in a parent component and create a full project.
2. Making components using classes in React
React supports making components with JavaScript class syntax. But there should be use render and return the tasks.
Example:
import React, { Component } from ‘react’;
class Component extends Component {
render() {
return (
<div>This is my component.</div>
);
}
}
export default Component;
3. Making components using functions in React
A react component becomes simplest form for using old JavaScript function. But after using ES6 it become most simple.
Example:
import React from 'react';function App() {const component = 'It is a Function Component!';return <h1>{component}</h1>;}export default App;
4. DOM
DOM means Document Object Model. It is an abstraction of a structured text. There are two types of DOM. They are;
I. Real DOM
II. Virtual DOM
Real DOM is created by only straightly HTML code. But, Virtual DOM is created by JavaScript with HTML code.
5. Real DOM
Code:
Result:
It is a real DOM. Here the coding is visualizing in the body and also the output is visualizing in the browser.
6. Virtual DOM
Code:
Result:
It is a virtual DOM. Here the coding is not visualizing in the body and but the output is visualizing in the browser. The code is written by JavaScript language. But after ES6 this type of coding is become very easy to write.
React mostly follows ES6 to write this type of code.
7. JSX
JSX stands for JavaScript Extension. It is an extra layer of a function. In the JSX method, A developer write a code according to HTML format but the compiler change that code and return a new code but the result of written code is same.
JSX method provides the simple coding pattern for the developer. The compiler breakdown that code and return the output according the developer’s coding.
Example:
The JSX code:
<MainButton color=”red” shadowSize={3}>
Click
</MainButton>
After compile the code is:
React.createElement(MainButton,{color: 'red', shadowSize: 3},'Click')
8. defaultProps
defaultProps is a fixed value. It defined by the developer. It is used for undefined props. But, using defaultProps the null props can’t removed.
Example:
MainButton.defaultProps = {
color : “red”
}
return() = {
<MainButton>< MainButton />
}
After creating the defaultProps, If the color is not defined by the developer in a specific part. Then the color will be set by default to “ red ”
9. React.PropTypes
React.PropType is a process which is used for declaring values.
In programming language if we declared number/character then we use int/char. But, in React we have to follow this way:
elements: PropTypes.oneOfType([PropTypes.string,PropTypes.number,PropTypes.instanceOf(Message)]
10. Optimizing Performance of React
React has some clever technologies to reduce the slowness of an app’s UI. The technologies are given bellow in listed:
I. Creating single build file
II. Creating transer-brunch
III. Globally install a few plug-ins
As like:
Envify, uglifyify
IV. For rollup
Install a few plug-ins
As like:
Replace, commonjs, terser
