Some React Concepts

What Is React?

React is a javascript library for building user interfaces. Someone called react is a framework. They are wrong. React is not a framework, React is a javascript library. Recently React is popular for single-page applications and react is also famous for code reusability.

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.

Jsx component:

When an element start With uppercase letter like <MyDiv/> and it compile to React.createElement(MyDiv). This way a component is defined and imported to the javascript file. But if the component start with lowercase letter,this component will called built-in-component. <div> <span> is the built-in component. If someone write a component like this

import React from ‘React’

function mydiv(props){

return <div>{proprs}<div/>

}

function App(){

return <mydiv/>

}

This code will not run, give an error

The solution is uppercase the first letter and this is <Mydiv/>

Jsx props:

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.

datas.map(data=><MyDiv data={data}/>

State:

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:

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

defaultProps is the property of the component class and sets default props for class. It is usually used undefined props but not null props.

Conditional-rendering:

Conditional-rendering is a popular react rendering technique. This is similar to javascript conditional statement.

function App(){

const i= 40;

return (

<div>

if(i%2===0){

<p>I am even number </p>

}

else{

<p>I am an odd number </p>}

</div>)}

React optimizing performance(some installation process)

Brunch:

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

Browserify:

For broweserify production build, 3 plugins must install

envify

terser

uglifyify

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.