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 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:

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:

Real DOM:

Virtual DOM:

How Virtual-DOM works in React:

React is all about components:

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:

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

useState Hooks In React:

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

useEffect Hooks In React:

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

useContext Hooks In React:

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

Web Developer