Think React

React Tree

When we needed to work with browser API before React. We use DOM API. Any operations we can use on DOM are the single thread responsibilities. When we use browser dom getting reactions from dom typing, scrolling, sizing, etc.

When we use dom operation we lost out on applications performance. It’s really important for any application. So React is the solution of the application’s performance gives more than batter performance. It exactly renders all components with virtual dom. So react tree is most important for every reacts developer.

React Initial Concept

All most we practically use HTML and use simple file name like index.html but when we use react.js we use components base folder by files. Like folder name “Home” filename” Home.js”. So we can say that, react always use a special character. React uses two types of components class-based components and functional components. Probably now use functional components and use many little libraries in react projects. The most important things are we can use XML in react components.

How to Render React Dom?

React applications have two arguments by render components in the browser.

1. The first argument is “what’ render in the browser.
2. Second arguments “where” render components in the browser.

When the components are rendering in the browser it’s called virtual dom.

How To Work React Components?

React use the older function for using components. The latest react functional component is using the arrow function it contains another component sending props parent component to children components. All components are connected by root components index.js.Index.js components use set HTML root div. document.getElementById(“root”).When we start our applications exactly run HTML files from the public folder.

JSX Expression

If you want to use any expression on the JSX file you can use curly brackets. Any where you used js file or css file. Such as <div>{someArray.map(item=><li>{item.value}</li>)}</div> .

When you use CSS in JSX like: <div style={{color:”red”, padding:”5px”}}><h2>Hello world</h2></div>. So can use any expression in JSX on react components by curly brackets.

What is Hooks?

Hooks is a special function of Reathooks function you can use functional components. You can’t use hooks class-based components. Many types of hook used in react functional components create stateful element for use (useState) hook, manage side effects use(useEffects) hook, get cache / memoize use(useCallBack) hooks.

React hooks function is a powerful and special function.

Higher Components

When we send props from parent components to child components. We can just send props from a parent component. when we send button function using props get props from child components. We use the Higher component for reusable child components at another time. you believe that when to send state and props from the parent component it’s work effectively and get more perform. Take some time and create a new component for react app you can connect your all component with the parent component.

Get Value Input Form

First things when we to get input value. We are follow first step to get value from input. Created input list in form tag and set onClick or onChange function. You create a handler function for input submit button like handleOnChange use this function in your form submit button like:

<inptu type=”submit” value=”Submit” onChange={()=>handleOnChange()} /> we can use this method for click and get input value and all input value get by name like <input type=”text” name=”email” /> when click the button get value by event in your handler function like: const handleOnChange=(event)=>{ event.target.name}

And all value are stored in states like const [state, setState]= useState();

Const handleOnchange=(event)=>{ userValue={name=event.target.email} setState(userValue)}

Now can use this user value on UI.

Prop-Types

Prop-types similar to typescript because when declared an object value first initialize use prop-types methods and checking the example of the variable values below:

Cosnt myPropTypes={

Name : PropTypes.string;

Age : PropTypes.number;

Condition: PropTypes.boolean;

}

props={

Name : “Shakib khan”; // valid

Age : 34; // valid;

Wife : “yes” // it’s not valid.

So we can say propsTypes check the declared value which one is correct or wrong.

What is the Virtual DOM?

Virtual dom is a programming concept where an set the virtual dom in browser dom.

Virtual dom representation on UI kept memory and synced components rendering times. How many times are render the components these components are rendered by virtual dom in browser dom. Virtual dom abstract out the dom manipulate, rendered, handling, and manual dom updating otherwise build the use of React apps.