React

npm install react

React Tutorial

A virtual DOM is when a representation of the UI is kept in memory and synced with the DOM.

So React.createElement() returns an object rather than a DOM element because this allows React to perform performance optimizations (such as the Virtual DOM).

React.createElement("h1", {className: "center", style: "color: red"},"Hello world")
Below is jsx equivalent
<h1 className="center">Hello World</h1>

React creates a virtual representation of your User Interface (in what we call a Virtual DOM). Then ReactDOM is the library that efficiently updates the DOM based on that Virtual DOM.

npm install react-dom

import {createRoot} from "react-dom/client";

import React from "react";
import {createRoot} from "react-dom/client";

const element = React.createElement("p", {}, "Hello World");
const root= document.getElementById("react-root");
createRoot(root).render(element);

//prints hello world on screen
<div id="react-root"></div> //inside index.htnl

• Reconciliation is the process of syncing the Virtual DOM to the actual DOM.
• ReactDOM completely manages the root element.
• You should not directly change/update the content of the root element.
• Apps built with React have a single root element (The most common use case)

JSX is not HTML

import React from "react";

const title = <h1>Hello World</h1>
//gets translated to
const title = React.createElement("h1", {}, "Hello World"); 

import React from "react";
import {createRoot} from "react-dom/client";

const root = document.querySelector("#root");
createRoot(root).render(<h1>Hello World</h1>);

Note: in createElement we use className: and in jsx we use className=

Element vs. Component?

A React Component (starts with Captial )is a function that returns a React Element.

const element = <Hero />;
//is
const element = React.createElement(Hero, {});

function Button() {
    // Be careful: this is an infinite loop
    return <Button></Button>;
}
//That's because the <Button></Button> JSX will be converted 
//to React.createElement(Button) calls which will eventually call the
// Button function. So you'd end up with a function Button that keeps
// calling itself repeatedly.

//we wanted to return a button
function Button() {
//returning a button jsx
    return <button></button>;
}

export default Footer = () => {
};
//then while importing 
import Footer from './footer';

else
export Footer = () => {};
//then while importing 
import {Footer} from './footer'; //have to use destructuring


 

Props

//GreetUser.js
export default function GreetUser(props) {
    console.log(props); // {user: "Sam"}
    return <div>Welcome {props.user}</div>;
}
//or

export default function GreetUser({user}) {
    console.log(props); // {user: "Sam"}
    return <div>Welcome {user}</div>;
}

<GreetUser user="Sam" />

• props.children represents the content between the tags of a Component, can be anything

<Hello>welcome</Hello> //props.children = welcome and others jo ki ket value me jate wo toh pata hi hai

Creating first app

npx create-react-app react_again
cd react_again
npm start