What is React JS

React: React is a JavaScript library, not a framework, somebody tells react is a framework but they are wrong. React team told that react is a JavaScript library.

React DOM: React build user a user interface that's call (UI). React to do DOM operation to add, update, delete dom nods, with react can do all of the dom operations. Simply map an array element or Javascript object.

React DOM Tree reconciliation: Before react we work with browser API which calls DOM API after react, react DOM tree avoided DOM API this is single there, therefore we can run all of the event, Typing, scrolling, click, change, etc. Example:

Using Web API:
const react = document.getElementById('id')
react.innerHTML = <div>Hello React</div>
Using React: 
function react(){
   return(
        <div>
          Hello React
        </div>
     )
 }

React Methode:

1. React DOM render
2. React Create Element
3. Nesting React element
4. Updating React element

Render Dom react: This is the entry point of the react app there have 2 arguments 1st arguments are what to render the element & 2nd argument is where to render the element.

Create Element: React Render method calls react create element method for creating elements from react component. Create elements are three arguments, 1st arguments are HTNL tag for the represent element, 2nd argument is elements have an attribute and 3rd argument is the content of the element.

Nesting React Element: When react render methods are call create element method & create an HTML tag div, section, header, etc. and into this element if you inject other element h1, p, span, small tag directly inside the element. This operation calls the nesting react element. Example:

function react(){
      return(
         <div>
            Hello React
            <h1>This is React Nesting Element</h1>
         </div>
   )
}

React Component: Component uses other frameworks and libraries, whether are working with a component in the library that we get many facilities. when need to write complex HTML that can have huge volume element, does need to check and organize, If this element script return error of need to fix bug at the situation is handling is very tuff for a developer. If there are we use component is very easy to fix problem or error or bugs for a developer and script very clean and organize to see. Some example let a web application has a header, footer, section, navbar, etc. if we write a script in one component that it goes very complex and complicated 1000 of script line, therefor solve this problem we are use component there for every element or section call different component.

Components:
function react(){
       return(
           <div>
              <Header></Header>
              <Section></Section>
              <Footer></Footer>
           </div>
     )
}

Hooks: Hooks is a type of component this call react special function of can be used useState hooks store any data number type or string type or object type.

Type of Hooks:

1. useState:

const [state, setState] = useState(value); 

2. useEffect:

function Example() {
  const [count, setCount] = useState(0);
    useEffect(() => {
      document.title = `You clicked ${count} times`;
  });
}

3. useContext:

const User = React.createContext(UserContext);
function App() {
return (
     <User.Provider value={UserContext}>
       <Components/>
     </User.Provider>
  );
}

4. useRef

5. useCallback

6.useMemo

7. useRef

8. useDebugvalue

9. useReacteffect

10. useImparetive