React notes

🧠 Emmet (Shortcuts for HTML/CSS)

• What: A shortcut tool in editors like VS Code to write HTML/CSS faster.
• Why: Saves time by expanding short code into full HTML/CSS.

• HTML Example:
  ul>li*3
  ➜ Expands to:

• CSS Example:
  
  m10
  
  ➜ Expands to:
  
  margin: 10px;

Usage: Just type and press Tab.
Library vs Framework

• Library: 👉 You call the code when needed (You decide when and where to use it.) 👉 You are in control. (e.g., React, Lodash)

Framework:
👉 Framework calls your code.
👉 It controls the flow. (It tells when to run your code — you just “plug in” your logic.)
(e.g., Angular, Next.js)
✅ Why React is a Library?

• React only handles the UI (view).
• You decide how the rest of the app works.
• It doesn’t force structure or tools.

🧩 Tools You Choose in React:

• Routing: react-router-dom
• State: useState, Redux, Zustand, Recoil
• Data Fetching: fetch, axios, React Query, SWR
• Forms: Formik, React Hook Form
• Styling: CSS, SCSS, Tailwind, styled-components
• Testing: Jest, React Testing Library, Cypress
• Build Tools: Vite, Webpack, CRA, Next.js

🎯 Summary: React is flexible — it’s a UI library, not a full framework.

🧠 So… is Vue a library or a framework?
➡️ Vue 2: Mostly considered a library (like React) — focuses on the view layer.
➡️ Vue 3 with ecosystem (Vuex, Vue Router, CLI): Becomes a framework.
React Vue 2 — library ; Vue 3 + Tools Framework-ish ; Angular — Full Framework

🧠 How does the browser know about document, createElement, etc.?
These come from Browser APIs, not from JavaScript itself.

🔧 How it works:

1. The browser has a JavaScript engine (like Chrome’s V8).
2. The browser provides built-in objects like: — window — document — console — localStorage — fetch, etc.
3. These are called Web APIs — part of the browser environment, not core JavaScript.

📌 Example:

const div = document.createElement(“div”);

• document comes from the DOM API.
• It’s not part of core JS — it’s provided by the browser when JS runs in the browser.

⚠️ Note:
If you run JavaScript outside the browser (like in Node.js),
→ You won’t get document or window — because there’s no DOM.

✅ In short:
JS runs inside the browser’s environment,
and the browser gives extra objects (like document) via Browser APIs.

We can inject react library with a bare minimum thing

What is CDN?

🧠 What is a CDN?

CDN = Content Delivery Network

It’s a network of distributed servers that deliver files (JS, CSS, images) from the nearest location to the user — making websites faster and more reliable.

🌍 Real-world example:

When you visit a site using a CDN:

If you’re in India, the content may load from a server in Mumbai
If you’re in the US, it loads from a New York or LA server
This minimizes latency and speeds up loading.

📦 How does it relate to React?

React can be included via CDN links instead of installing via npm.

Example:

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

🧠 Real-life example of using a CDN:

Let’s say you want to use a **carousel/slider** in your web app.

Instead of downloading the whole library,
you can just include its **CDN link** in your HTML:

html
<! — Slick Carousel CSS →

<! — Slick Carousel JS →

🚀 Why use CDN links?

Quick setup — no build tools needed
Great for testing or small apps
No need to install Node.js or npm
⚠️ Not ideal for large/production apps → Use bundlers like Vite or Webpack for better control.

A CDN serves files faster from nearby servers.

React’s CDN version lets you use React by just adding tags — no installation required.</p> <p>🧠 What is <code>crossorigin</code> in a <code>&lt;script&gt;</code> or <code>&lt;link&gt;</code> tag?<br> The <code>crossorigin</code> attribute tells the browser how to handle <strong>cross-origin requests</strong> — when you’re loading files from a <strong>different domain</strong> (like a CDN).</p> <p>— -</p> <p>🌍 Example:<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">”https://unpkg.com/react@18/umd/react.development.js"</span> <span class="na">crossorigin</span> <span class="nt">&gt;&lt;/script&gt;</span> 🧠 What does *“different domain”* mean in `crossorigin`? It means the file (like a script or image) is **NOT hosted on your website**, but coming from **another server**. — - 🌐 Example: You made a website: 👉 `https://myportfolio.com` Now, you add this: </code></pre></div> <p><br> html</p> <script src=”https://unpkg.com/react@18/umd/react.development.js" crossorigin>

📦 That script is from https://unpkg.com — a different domain.

So: myportfolio.com ≠ unpkg.com → cross-origin request
Different domain” means the file is loaded from another website/serve

🧠 Shortest React program (with CDN):

<!DOCTYPE html>
<html>
<head>
<script src=”https://unpkg.com/react@18/umd/react.development.js"></script>
<script src=”https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>
<body>
<div id=”root”></div>
</body>
</html>|
✅ This runs without any build tools (like npm, Vite, etc.)
✅ Just open in browser — you’ll see: Hello React

why? Because in console write React and it give React object (like windows object). Also React is a global object

React is just a peice of JS code written by meta developers.

Why 2 files : React and ReactDOM ; because react is not just limited to browsers. Thers is react native for mobile, react 3D as well, react also used in rendering engines.

So react@18 is core library of react
react-dom: the web version of react

Heading using React
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script
    crossorigin
    src="https://unpkg.com/react@18/umd/react.production.min.js"
  ></script>
  <script
    crossorigin
    src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
  ></script>
</html>
<script>
  const heading = React.createElement("h1", {}, "Heading using react"); // it taskes 3 argument - 1.the tag 2.object 3.value
</script>
// h1 comes from the core library of react
now heading is created, now we need to put heading into the root element

  <script>
    const heading = React.createElement("h1", {}, "Heading using react");
    const root = ReactDOM.createRoot(document.getElementById("root")); //this tells react what is the root element inside my app. Also here we used ReactDOM because now we are manipulating DOM
    root.render(heading) // passing react element inside the root
  // So this render method takes react element and injects it into the DOM and modifies it
  </script>
🧠 Is `createElement` an API?

Yes — `React.createElement()` is a **React API**.

It’s a method provided by the React library to **create React elements** (UI building blocks) without using JSX.

— -

🔧 Syntax:

js
React.createElement(type, props, children)

if we do:
console.log(heading); // it is plain JS object

// so the react code that meta developers wrote is taking : "h1", {}, "Heading usi