Introduction

React is a JavaScript Library that is used to build user interfaces.
React and React DOM are two different library provided by react team. React.js is the core library where all the main core components of react is written. Whereas, React DOM is the library that is required to manipulate the browser DOM using react core library. These libraries are written separately because React is cross platform library. It is used to build apps on browser, mobile, desktops. So, we have different library for React DOM.
Creating h1 tag using plain react.

<body>
  <div id="root"></div>
  <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>
    const heading = React.createElement(
      "h1",
      { className: "heading" },
      "Hello World From React"
    );
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(heading);
  </script>
</body>

Create Nested HTML Element along with Sibling.

<div id="parent">
    <div id="children">
        <h1 id="child-1">Child 1</h1>
        <h2 id="child-2">Child 2</h2>
    </div>
</div>

const parent = React.createElement("div", {"id":"parent"}, 
    React.createElement("div", {"id": "children"}, 
        [
            React.createElement("h1", {"id": "child-1"}, "Child 1"),
            React.createElement("h2", {"id": "child-2"}, "Child 2"),
        ]
    )
)

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(parent);

Install parcel as dev dependency

npm install -D parcel

Run the index.html file that contains react

npx parcel index.html

What is caret (^) and tilde (~) in package.json

{
  "name": "namaste-react",
  "version": "1.0.0",
  "description": "This is Namaste React",
  "main": "App.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [
    "react"
  ],
  "author": "Prabin Kumar",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.12.0"
  }
}

~version “Approximately equivalent to version”, will update you to all future patch versions, without incrementing the minor version. ~1.2.3 will use releases from 1.2.3 to <1.3.0.

^version “Compatible with version”, will update you to all future minor/patch versions, without incrementing the major version. ^1.2.3 will use releases from 1.2.3 to <2.0.0.

Difference between package.json and package-lock.json

package.json is the configuration file for npm where all the important project information along with its depenedency are written over there. Dependency might be in the form of caret (^) or tilde (~).

package-lock.json is also the configuration file but it contains exact version number of all the packages and modules that are installed by the npm.

What is transitive dependency ?

In node, one package can have dependency over another package. That another package can have dependency over other dependency. So, there is a series of dependency from one package to another which is called transitive dependency.

Running React app using Parcel

npx parcel index.html

We are using parcel for
- Dev Building
- Local Server
- Hot Module Replacement
- Caching - Faster Build
- Image Optimization
- Minification
- Bundling
- Compressing
- Consistent Hashing
- Differential Bundling - support older browsers
- Diagnostic
- Error Handling
- Tree Shaking - for removing unused code when bundling multiple JavaScript files into single files

For production build, use this command and remove main: "App.js" from the package.json due to conflict in main file
npx parcel build index.html

The difference between npm and npx is that npm installs our packages but npx is used to execute the package.
Dev / Prod Build

Dev Build: npx parcel index.html
Prod Build: npx parcel build index.html

Create script for dev and prod

In package.json

"scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },

React.createElement creates an object and when this object is rendered on to the DOM, it becomes HTML element.
JSX is not HTML in Javascript, But JSX is HTML-like syntax.
JSX is transpiled before it reaches to the JS Engine by the Parcel/Babel.
Compiler converts source code into machine code. But transpilers convert one form of source code into another form of source code.
Babel transpiles: (JSX Code => React.createElement/JS Object => HTMLElement)
In JSX, use camelCase.
JSX sanitizes the data before rending into the browser to prevent cross site scripting attack.