reactjs

Importing React via CDN Links (content delivery network)

Websites where React is hosted and we're just pulling React into our project via these CDN links.
Once these links are included in project => Now our project has superpowers of React inside it

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="App.js"></script>

//app.js should be imported in the end so that it can use React & ReactDOM 
// To avoid React/ReactDOM not defined error

If you open any src link. You'll find Plain Javascript code. All this is the code for REACT. At the end of the day REACT IS A JS LIBRARY (has a Copyright (c) Facebook in code).
Now write React or ReactDOM inside our console. (It'll give An object that has all methods and functions you can use with React/ReactDOM).
You'll also find __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED inside that React/ReactDOM object. That's FUNNY!!!
Why there are 2 script with 2 links??
1. react.development.js: This is the CORE FILE of REACT.
2. react-dom.development.js: This is the ReactDOM which we need to modify the DOM(Document object module).

There are different places where React (core file) can be used (Browser, Native, React 3D, etc). And in case of browsers this DOM file is the bridge that connects React with the DOM.

Now using these 2 files we have injected superpowers given by React & ReactDOM. We as developers can now use them to make Large Scale Applications.

The most costly operation in the web-page is when the DOM tree needs to be manipulated. That is when Putting or Removing some nodes inside the DOM. And all these Frameworks & Libraries are trying to optimise this only.

React uses Helper Functions to make these things work in a very performant way. (createElement, createRoot, render, etc).

As React comes with the philosophy of writing everything or manipulating the DOM using JavaScript or React (it is js only) only. That is No touching HTML files much even if we want to create some html element we do it using React (i.e js). Let's see how

createElement takes in 3 attributes

const heading = React.createElement("h1",  // html tag - type: "h1"
{id: 'heading', xyz: 'abc'}, // attributes
"Hello World from React!" // children of this tag);


console.log(heading); // Gives a JS object
{
    "type": "h1",
    "key": null,
    "ref": null,
    "props": {
        "id": "heading",
        "xyz": "abc",
        "children": "Hello World from React!"
    },
    "_owner": null,
    "_store": {}
}
// props = attributes which were added + children

root.render(heading);

render will take the React Element (JS object - heading) and transform it to (h1) html tag which the browser understands and put it inside the root

NESTED HTML Structure

const heading = React.createElement("h1", {id: 'heading', xyz: 'abc'}, "Hello World!");
const heading1 = React.createElement("h2", {id: 'heading1'}, "Hello Mumbai from React");
// To create sibling - use ARRAY of children
const child = React.createElement("div", {id: 'child'}, [heading, heading1]);
const parent = React.createElement("div", {id: 'parent'}, child);
root.render(parent);
//Render will transform ReactElement(JS Obj) => HTMLELEMENT(div) which browser understands

All this become very tedious when the HTML is more and more nested. That's the reason we use JSX with React (which will make our lives easy ). This was the last time we used React.createElement

So REACT can not only be written in JSX but also by using the above way - (which is the core of React)

<h1>Top of Root</h1> - Won't get Replaced
<div id="root">
    <h1>Smit is here!</h1>  - This will be replaced by the react element to be rendered
</div>
<h1>Below of Root</h1>   - Won't get Replaced
<script>...</script>

const heading = React.createElement("h1", {id: 'heading', xyz: 'abc'},"Hello World from React!");
root.render(heading); 
// The above h1 tag will be replaced by heading react element 
// for milisecond the above h1 tag will be visible and then REPLACED

As it prints first the h1 tag <h1>Smit is here!</h1> in the browser and then the script files are loaded: React Core file, ReactDOM (react & reactdom loaded in app) & App.js where once the root.render(ReactEle) is executed - the above h1 tag will be REPLACED by this React element (heading) in the DOM/Root (& not appended). This happens super fast in few milliseconds in case of React.

In above case : React is only working inside root which is div id = root. This is why React is called as a library & not a framework. As it can be only applied in some portion of the page/web-app as well🔥. Not all frameworks are like this.

React can only work in header only or just footer only or a sidebar only. Isn't it amazing? It can work independently in a small portion of your web-app. It is not a full-fledged framework. Framework is a framework which comes with a whole loads of things. Where as React is just a bare bone minimal JS Library piece of code (Just a above script Src link that's it!! 😍)

React is just giving us some Helper methods that we need to use to develop fast applications & we can use it in just some small portions of app as well. All frameworks will require you to create a whole APP whereas React can work with existing apps as well - BEAUTY of React!.
React is so powerful that even though it's a library we developers can also make LARGE SCALE APPLICATIONS with it 😍 . We'll see how in the next blog :) Stay Tuned!!

Core React JS Fundamentals