Fundamental Core Concept Of React.JS For Beginners……….

Lets Explore How to Learn and Applying React.js:

Photo by Glenn Carstens-Peters on Unsplash

Defining React.js?

React.js is a JavaScript library, It’s used for building user interfaces. React is not a javascript framework. Library is exist in small bounds and framework is exist in large bounds in programming circle. Library is work with other solution of all javascript.

React Example:

document.getElementById('myId').innerHTML = `
  <div>
    <h1>Hello World</h1>            
    <h4>Welcome to my world</h2>  
  </div>
`;

Another Example Of React:

ReactDOM.render(
  React.createElement(
    <div>
       <h1>Hello World</h1>            
       <h4>Welcome to my world</h2>                              
    </div>
  ),
  document.getElementById('myId'),
);

Some Words To React.createElement:

React.createElement is used to create elements from React components. React elements are created in memory. It’s make a react element for show up in the DOM, We use the reactDom.render method. This method will do many things to figure out the most exact way to reflect the state of a React element into the actual DOM tree in the browser.

The react.createElement function has many arguments:

Arguments is HTML “tag” for the DOM element to represent, which is div in this example. Next argument is for any attributes like id, href, title, etc. And next argument is the content of the DOM element.

Some Words To ReactDOM.render:

This is originally the entry point for a React application into the browser’s DOM. It has 2 arguments: First argument of ReactDOM.render is what to render of the browser. This is always a React element. And The second argument is where to render this React element in the browser. This has to be a valid DOM node that exists in the statically rendered HTML.

Real DOM:

Dom is “ Document Object Model” The DOM in simple words represents UI of your application. Every time there are changes state in your application and DOM update this state and represents output UI.

Virtual DOM:

Virtual DOM comes in and performs significantly better than the real DOM. The virtual DOM is only a virtual representation of the DOM. All time the state of our application changes, And the virtual DOM gets updated instead of the real DOM.

How Virtual-DOM works in React:

In React every UI part is a component, and each component has a state. React follows the observable pattern and listens for state changes. When the state of a component changes, React updates the virtual DOM tree. Once the virtual DOM has been updated, React then compares the current version of the virtual DOM with the previous version of the virtual DOM.

React is all about components:

Components is a simple function that’s all programming languages. We call functions with some input and components give us some output which we are expected, some times output is error or null which is not our expected. We can reuse functions as needed. React components input set props and output is description UI. Some times we can reuse components for another UI.

React.Component:

function showList(props) {
  // Returns a DOM/React element here. For example:
  return <li>{props.name}</li>;
}// To render list element in the browser

Explore JSX:

JSX is not HTML languages or template languages. when you need html like elements in your react applications then you can use JSX. JSX produce react elements like html. JSX comes with full power of javascript.

const element = <h1>Hello world</h1>

useState Hooks In React:

useState is react hook. It also used for all time the Any elements state change of our application And then need this state put any where for state output in UI.

import React, {useState} from 'react';
const [value, setValue] = useState(null)

useEffect Hooks In React:

useEffect is react hook, It also used for any Api fetch or data load in our application. It makes comfort and organize data load process in react application.

import React, {useEffect} from 'react';
useEffect(()=> {
   fetch()
}, [])

useContext Hooks In React:

useContext is all about react hook, It also used for need any data is access in all components globally then we can use useContext hook. It makes easy to access data in any children components.

import React, {useContext} from 'react';
const [value, setValue] = useContext()