What Is React?
How React works:
React works by creating virtual dom. When a component creates, its corresponding virtual dom also creates and compares with another dom. If elements or content changed only this portion will change not a full component. For this, page reload is not needed to go from one component to another component. This reason react is called a single-page application.
import React from ‘React’
This code will not run, give an error
The solution is uppercase the first letter and this is <Mydiv/>
sometimes, some components need to pass data to the other component. For this purpose they use props. They can pass many data at a time and also need curly braces in props.
Normally props use when someone passing a value of one element to another element by using the map.
When someone wants to change a variable value they can change it by using state. Suppose you want to change an input value and want to show this value to your UI. For this, you will set an onChange event handler. When onChange handler calls a function set event.target.value to the setState. This is the way to update the state. Initially, state values are empty objects, empty arrays, boolean values, or any number.
UseContext is used for passing value from one component to another and uses this value any child component. In react js this useContext is very useful for passing any props/values. To use this, you need to import createContext() in the upper part from React. Then put it as a const variable. After declaring a state, pass this state as a value in context provider. Then you can use it from anywhere by import useContext and provider name.
How rendering works:
React updates the virtual memory by render () method. If any smallest changes occur in any component react update the smallest virtual dom. Child component must know this update and re-render immediately.
defaultProps is the property of the component class and sets default props for class. It is usually used undefined props but not null props.
const i= 40;
<p>I am even number </p>
<p>I am an odd number </p>}
React optimizing performance(some installation process)
For brunch production build first install the terser-brunch plugin by using this command
npm install — save-dev terser-brunch
Then add the -p flag to the build command.
brunch build -p
This is only for production build
For broweserify production build, 3 plugins must install
envify is install to test the built environment correctly set or not and make it global.
Uglifyify is install to removes the development imports.
Then resulting bundle piped into terser.