My Notes on Full-Stack

• This is how a general form looks like:

  <form
    action="url"
    method= x
    target= t
  >
    <label for="nameInput"> Name </label>
    <input type="text" name="nameInput" value="Name" />
   
    <input type="reset" name="reset" value="RESET" />
    <input type="button" name="clicky" value="CLICK" />
    <input type="submit" name="submit" value="SUBMIT" />
   
  </form>
  

• x is "get" or "post"
• t is "_blank" or "_top"

• You can’t use <i>, <b>, <img> or any such tags with a button creating using <input>. For that you’ll have to use the <button> tag:

  <button
    onclick="alert('hey')"
  >
    Click me hard
  </button>
  

• You can also use buttons as checkboxes:

  <button
    type="checkbox"
    value="checkbox"
    checked
  ></button>
  

• Your content is the inner-most box, and you have a border around it.
  • The space between content and border is called padding.
  • The space on the outside of the border is called margin.
• When you set height or width in CSS, you change the dimensions of only the content. The actual space the element occupies, contains content and padding only. The margin isn’t part of the box, as it’s just used as a seperator between elements.

• If you want the height or width to be of the entire box, and not only the content, you use:

   * {
    box-sizing: border-box;
  }
  
  

• Flexbox is a layout system, where you can place items in a particular row, or a particular column. To use it, put this on the parent element:

  display: flex;
  

  By doing this, the children go from left to right (this is the default value).

• flex-direction sets the main axis:

  Value	Direction
  row	left → right
  row-reverse	right → left
  column	top → bottom
  column-reverse	bottom → top

• justify-content aligns items on the main axis:

  Value	Behavior
  flex-start	Items bunch at the start
  flex-end	Items bunch at the end
  center	Items centered
  space-between	Even space between items
  space-around	Equal space around items
  space-evenly	Equal space between and outside items

• align-items aligns items on the cross axis:

  Value	Meaning
  stretch	(default) Items stretch to fill container height
  center	Items align to center
  flex-start	Items stick to top (or left, in column)
  flex-end	Items stick to bottom (or right, in column)
  baseline	Align text baselines

• gap is the flexbox way of margins.
• flex-grow is a property used by the child of a flex container. It’s the ratio of the size that child occupies. If all elements have flex-grow: 1; then they all share the same space. If one element has flex-grow: 2; that element would take twice the amount of space as compared to the rest.
• flex-shrink is a property used by the child, which tells if that item can shrink if the container is small (flex-shrink = 1;) or not (flex-shrink = 0;).
• flex-basis is a property used by the child which specifies the minimum/maximum width (or height depending on what the axis is) of the item before growing/shrinking.

• To combine all 3 properties of the child:

  .item {
    flex: 1 1 200px;
    /* grow shrink basis */
  }
  
  

• align-self is a property used by the child and it overrides align-items used by the parent.

• Flexbox was for 1D. This is for 2D. Assume this HTML Code:

  <div class="grid-container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  
  

  And here’s the CSS code

  .grid-container {
    display: grid;
    grid-template-columns: 100px 200px; /* 1st column 100px wide, 2nd column 200px wide*/
    grid-template-rows: 100px 100px;    /* 1st column 100px wide, 2nd column 100px wide*/
    gap: 10px;
  }
  
  .box {
    background: lightblue;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  

  This makes a grid that looks like:

• You can also use fractional units:

  grid-template-columns: 200px 1fr 2fr;
  /* 1fr means 1/3rd of the width of grid, and 2fr means 2/3rd */
  

• position is a property and here are the values possible:

  position	What it does
  static	Default, no top, left, bottom or right
  relative	Moves relative to its normal spot
  absolute	Moves relative to nearest positioned ancestor
  fixed	Stays fixed to the screen (e.g., navbars)
  sticky	relative till a point, scrolling beyond which it becomes fixed

• You can also move elements using top, left, bottom or right. Different positions affect this movement though.
  • When position: relative; and bottom: 10px; the element is moved 10px upwards, but the space it originally occupied is kept intact. The rest of the webpage behaves like it’s still in the old-spot.
  • When position: absolute; and bottom: 10px; the element is moved 10px upward from the first ancestor having some position set.
  • When position: fixed; and bottom: 10px; the element is placed 10px upward from the browser window, and it stays stuck there.
  • When position: sticky; and top: 10px; the element is relative and keeps moving as it’s scrolling, but once it reached the top of the container, it sticks to the top (of the container). It remains visible until the container is visible. This is usually used with top, and not with bottom (you CAN though). One thing to note is that the container must be scrollable.
• So normally, people use relative positioning for a parent container, and absolute positioning for the child container. This would mean the child’s coordinate system is with respect to the parent.
• z-index is a property that holds a value. The higher the value, the more forward it is in z-axis.

• A psuedoclass is in the form element:psuedoClass, and using this, you can modify the css properties of an element when it’s in a particular state. For example:

  a:hover {
    color: red;
  }
  input:focus {
    border-color: blue;
  }
  

• Here are some common pseudoclasses:

  Selector	When it applies
  :hover	On mouse hover
  :focus	When focused (e.g., text input)
  :first-child	If it’s the first child of parent
  :last-child	If it’s the last child
  :nth-child(n)	Targets the n-th child
  :not(selector)	Inverse selector (excludes)
  :checked	Radio/checkbox when selected
  :disabled	When form field is disabled

• The nth-child(n) selector also supports patterns:

  li:nth-child(odd)	selects 1st, 3rd, 5th…
  li:nth-child(even)	selects 2nd, 4th, 6th…
  li:nth-child(3n)	selects every 3rd item: 3, 6, 9…
  li:nth-child(2n+1)	selects all odd items

• You can style certain parts of an element. For example:

  h1::first-letter {
    font-size: 200%;
  }
  

• Here are some common psuedo-elements:

  Selector	What it does
  ::before	Inserts content before the element
  ::after	Inserts content after the element
  ::first-letter	Styles the first letter
  ::selection	Styles selected text

• For dark-mode:

  @media (prefers-color-scheme: dark) {
    body {
      background: #121212;
      color: white;
    }
  }
  

• For mobile screens:

  @media (max-width: 600px) {
    .container {
      flex-direction: column;
    }
  }
  

• Tailwind gives you 97 different sizes for padding, each denoted by p-0, p-1, p-2, p-3, p-4 … p-96.

  Tailwind Class	Size in rem	Size in px
  p-0	0rem	0px
  p-1	0.25rem	4px
  p-2	0.5rem	8px
  p-3	0.75rem	12px
  p-4	1rem	16px

• It’s exactly the same for margin too, except that it’s denoted by m-0, m-1, m-2, …

• You can limit the padding to different sides, by adding a letter to ’p’ or ’m’. For example, pt-4 means padding at the top is 16px.

  Tailwind Class	Normal CSS Code
  pt-4	padding-top: 16px;
  pb-4	padding-bottom: 16px;
  pl-4	padding-left: 16px;
  pr-4	padding-right: 16px;
  px-4	padding-left: 16px; padding-right: 16px;
  py-4	padding-top: 16px; padding-bottom: 16px;

• Colors are generally in the form entity-color-intensity, where:
  • entity can be text for coloring text, or bg for coloring background.
  • color can be any name like blue, green, red, gray, etc. Refer Tailwind Colors in Every Format - shadcn/ui.
  • intensity can be any number between 100 and 900, and this is an optional parameter.
• For example, text-blue-900 makes text dark blue.
• You can also give a custom hex value by entity-[#hex]. For example text-[#0000ac]

• For sizing, the general format is text-size, where size is a given definition from Tailwind.

  Tailwind Class	Font in px
  text-xs	12px
  text-sm	14px
  text-base	16px (normal size)
  text-lg	18px
  text-xl	20px
  text-2xl	24px
  text-3xl	30px
  text-4xl	36px
  text-5xl	48px
  text-6xl	60px
  text-7xl	72px
  text-8xl	96px
  text-9xl	128px
  text-[15px]	15px (Anything)

• You can use font-bold, font-medium, font-light for the weight of the font.

It’s a programming interface for web documents, that arranges all the elements of the web page, as the nodes of a tree. Scripts (JavaScript or TypeScript code) can create, access or modify these nodes, and don’t need to reload the entire page.

• var is global while let and const are limited to the scope of the block.
• const variables can’t be changed, while those of var and let can.

• For Example:

  var name = "john";
  name = "JAAN"; // you can change var and let
  
  const pi = 3.1428;
  // pi = 4 -> No you can't do that
  
  /* some block of code */ {
      let x = 9;
  }
  
  

• You can use var variables even before declaration. It’s value would be undefined if you try to reference it before declaration.

  function sayHi() {
    console.log(name);  // output: undefined
    console.log(age);   // output: ReferenceError
    var name = 'Lydia';
    let age = 21;
  }
  
  sayHi();
  

• Keywords new and typeof are considered operators.

• This converts any primitive that’s not a string, into a number. For instance:

  console.log(+"7");    // Outputs 7 and this 7 is a number
  console.log(+true);   // Outputs 1
  console.log(+"hey");  // Outputs NaN because there's no number that corresponds to "hey"
  

• Template Literals are the Python f-strings of JavaScript:

  const name = "Alice";
  const greeting = `Hello, ${name}!`;
  console.log(greeting);  // Output: Hello, Alice!
  

  This is called Interpolation.

• In general, using backticks preserve new line characters and what not. They’re much more powerful than single quotes or double quotes.

  const message = `
    This is a multiline string.
    Each line here is preserved as-is.
  `;
  
  

• Integers in strings get typecasted to a number in case of subtraction, multiplication, division, subtraction, exponents, but remains a string in case of addition. This is because addition is for string concatenation.

  console.log(typeof ("5" - 2));
  // output: number
  
  
  console.log(typeof ("5" + 2));
  // output: string
  
  
  console.log("5" + 2);
  // output: 52
  
  console.log(Number("5") + 2);
  // output: 7
  

• BigInt: Append n to the number if you need to work with integers that exceed the Number.MAX_SAFEINTEGER limit (9007199254740991). BigInt is essential to avoid precision loss.

• There exists a Date() function that returns a big string:

  console.log(Date());
  // Output: Thu Aug 21 2025 21:53:43 GMT+0530 (India Standard Time)
  

• For a much more narrowed-down information like the day of the week, or time, you’ll have to create a Date object.

  console.log(new Date().getDate()); // returns number 1-31
  

console.log(new Date().getDay()); // returns a number 0-6
// 0: Sunday
// 1: Monday
// 2: Tuesday
// ...
// 6: Saturday

console.log(new Date().getNewYear()); // returns 2025

console.log(new Date().getTime()); // number of milliseconds since UNIX Epoch
// UNIX Epoch = January 1, 1970

There also exists getHours() (0-23), getMinutes() (0-59), getMonth() (0-11), etc.

• An event is a signal given by the browser indicating something has happened.

• Instead of putting all of the JavaScript code into one big file, you can split the code into seperate JavaScript files called modules.
• For JavaScript code to behave as a module (i.e. code which can be imported somewhere else), you should “export” the code.

• The below command creates a new node project. Creating a node project is essentially creating a package.json file.

  npm init -y
  

  This file, present in the root directory, contains metadata about the nodeJS project and it's dependencies. The metadata also includes the line where you pick between commonJS and ES modules:

  "type": "module",
  // for commonJS, it'd be "type": "commonJS",
  

• The fs module can be imported in both the ways (commonJS way, or the ES module way).

  const fs = require("fs");
  // import fs from "fs" // this works too
  
  fs.writeFile(
    "javascript14.txt",  // name of file
    "random text",       // text to be inserted
    () => {},            // callback to be executed
  );
  

• fs.writeFile overwrites. If you want to append, you’ll have to use fs.appendFile().

  fs.appendFile(
      "javascript14.txt",
      "more random text",
      (error,data) => {console.log(data.toString())}
  );
  

• To read files you’ll use fs.readFile() to read the file.

  fs.readFile(
    "javascript14.txt",                      // name of file
    (error, data) => {                       // callback to read
      console.log(error, data.toString());
    }
  );
  

• Now you can use fs with promises. What we’ve seen until now is where the fs module uses callback functions instead of promisese.

  import fs from "fs/promises";
  // or const fs = require('fs/promises')
  let content = await fs.readFile("javascript14.txt");
  console.log(content.toString());
  
  
  console.log("--------------");
  
  
  await fs.writeFile("javascript14.txt", "\n\nhey waddup");
  content = await fs.readFile("javascript14.txt");
  console.log(content.toString());
  
  
  console.log("--------------");
  
  
  await fs.appendFile("javascript14.txt", "\n\nhey waddup");
  content = await fs.readFile("javascript14.txt");
  console.log(content.toString());
  

For this, we use the path module:

import path from "path";

let myPath = "/home/praanesh-nair/gitProjects/odin-learning";

console.log(myPath); // prints the variable
console.log(path.extname(myPath)); // prints file extension
console.log(path.basename(myPath)); // prints name of smallest folder/file
console.log(path.dirname(myPath)); // prints full directory

• Objects are the equivalents of dictionaries in Python. They’re enclosed in curly braces and are comma separated.
• Objects are a one-liner programming construct which is conventionally written across multiple lines; It’s not really a block of code. (So this means that after the curly braces are closed, it ends with a comma)

• Arrays are the exact same thing as Python Lists (of course, you have to use let, const or var too)

  const fruits = ['apple', 'mango', 'orange'];
  

Generally in single-threaded models there are two types of programming languages: Synchronous and Asynchronous

• Synchronous programming languages are sequential; instructions are executed one after the other and only on completion of one statement, is the next statement executed. This model isn’t suitable for languages like JavaScript as it’d freeze the entire page because of some demanding instruction.
• JavaScript is an asynchronous programming language. It just kicks off instructions, and then moves on to the next line.

• TypeScript is just JavaScript but with data types:

  let width = 320;
  

  TypeScript implies that this is a number and now you can only assign a number to it.

• You can implicitly assign a type:

  let width: number = 320;
  

• Basically, you have to turn strip types off of the TypeScript code to turn it into JavaScript, and then use node to run the JavaScript file.

class Point {
  x: number;
  y: number;
}
const p = new Point();

p.x = 10;
p.y = 20;

These are JavaScript Objects (but with types), hence they’re TypeScript.

• These are how to make the datatype itself parameterized.

• Say we have one function for numbers:

  function identity(value: number): number {
      return value;
  }
  

  And another function for strings:

  function identityString(value: string): string {
      return value;
  }
  

  Instead, you can make the datatype parameterized:

  function identity<T>(value: T): T {
      return value;
  }
  

  So you can call the function as:

  identity<number>(10);
  

  But usually TypeScript can infer it too:

  identity(10);
  identity("hello");
  

• A web server is a program that listens for HTTP requests and sends HTTP responses. Here’s a JavaScript program which makes a server using Node.js’s built-in http module.

  import http from "http";
  
  const hostname = "127.0.0.1";  // This is the local IP Address (localhost)
  const port = 3000;
  
  const server = http.createServer((request, response) => {
    response.statusCode = 200;
    response.setHeader("Content-Type", "text/plain");        // for plain text
  //response.setHeader("Content-Type", "text/html");         // for html
  //response.setHeader("Content-Type", "application/json");  // for json
    response.end("Hello World\n");  // How you'll end the response i.e. the actual content
  });
  
  server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
  });
  

  Status Code	Meaning
  200	OK (everything is fine)
  404	Not Found
  500	Server Error
  301	Redirect

• A computer can access 3 IPs:
  • 127.0.0.1 - This is the loopback IP address also known as local host. Only your own machine can access this.
  • 192.168.x.x - This is the IP address of your computer visible to other devices on the network, where \( 0 <= x <= 255 \).
  • 0.0.0.0 - This is the wildcard IP address that any computer connected on the network can access. So if you host your server on this IP address, it’s listening on all interfaces possible. For example, if your port number is 3000, and your IP address is 192.168.29.150, the server will provide a response to any device on the network, via the URL http://192.168.29.150:3000/.

• Here’s how you’d make the server respond differently to different urls (eg. /about, /info, etc):

  import http from "http";
  
  const hostname = "127.0.0.1";
  const port = 3000;
  
  const server = http.createServer((request, response) => {
    const url = request.url; // The path part of the URL (like "/", "/about", etc.)
   
    response.statusCode = 200;
    response.setHeader("Content-Type", "text/plain");
   
    if (url === "/") {
      response.end("Welcome to the homepage!");
    } else if (url === "/contact") {
      response.end("Contact us at contact@example.com");
    } else {
      response.statusCode = 404;
      response.end("404 Not Found");
    }
  });
  
  server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
  });
  
  

• One thing to note is that console.log() statements happen in the server, while these response.end() statements happen in the client side.

• Express.js is a JavaScript Framework that provides a robust set of features to make web servers. It’s essentially a web framework built on top of Node.js to make backend development easier.

• Given below, is a web server of Node.js

  import http from "http";
  
  const hostname = "127.0.0.1";
  const port = 3000;
  
  const server = http.createServer((request, response) => {
    const url = request.url; // The path part of the URL (like "/", "/about", etc.)
    response.statusCode = 200;
    response.setHeader("Content-Type", "text/html");
    if (request.url === "/") {
      response.end("Welcome to the homepage!");
    }
  });
  
  server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
  });
  
  

  This is the same server written with Express.js

  import express from 'express';
  const app = express();
  const port = 3000;
  
  app.get('/', (req, res) => {
    res.send('Welcome to the homepage!');
  });
  
  app.listen(port, '127.0.0.1', () => {
    console.log(`Server running at http://0.0.0.0:${port}/`);
  });
  

• To make files of a directory publicly accessible, you’ll have to specify the nama of the directory in a middleware function express.static().

  app.use(express.static(".")); // makes all files in current directory accessible
  app.use(express.static("public")); // makes all files in 'public' accessible
  
  

Middleware functions will be covered later on

• app.get(), app.post(), app.put(), etc can be chained.

  app
    .get("/", (request, response) => {
      response.send("hey");
    })
    .post("/", (request, response) => {
      response.send("imma send you post request");
      console.log("post request visible on server");
    })
    .post("/blog", (request, response) => {
      response.send("imma send you post request FROM BLOG");
      console.log("post request visible on server FROM BLOG");
    });
  

  This is because each of these methods return an instance of the app() object/router.

• You can split all of these routes (.get(), .post(), etc) into different files. In each of those files, instead of using const app = express(), you use const router = express.Router(). You use router instead of app everywhere.

  import express from "express";
  
  const router = express.Router();
  
  router.get("/:x", (req, res) => {
    res.send(`some blog called ${req.params.x}`);
  });
  
  export default router;
  

  And in the main server:

  import express from "express";
  
  import blog from "./javascript23_router.js";
  
  const app = express();
  
  app.use("/blogs", blog);
  
  app.listen(3000, "0.0.0.0", () => {
    console.log("listening");
  });
  

  http://localhost:3000/blogs/hehe will give you ’some blog called hehe’

• In case of method routes (aka. route handlers) like app.get(), app.post(), etc, the ’request’ object arrives, and then the ’response’ object is sent.
• Middleware functions are functions that have access to the request object (req), the response object (res), and the next function in the application’s request-response cycle.

• The general format is:

  app.use((req, res, next) => {
    // some action
    next();
  });
  

  The next() function passes the request object to the next middleware or the next route handler. You don’t need to call the next() function if you have finished sending the response object.

  app.use((req, res, next) => {
    res.send('haha lol');
    // no need to call next(). It ends right here.
  });
  

  If you don’t send the response object, and you don’t call next(), the request-response cycle will be frozen. You can use this to handle errors.

• You can use middleware against both app (via app.use()) and router (via router.use()).
• There exists builtin middleware which you can use:
  • app.use(express.static(someDirectory))
  • app.use(express.json()) for parsing received JSON files

• As we know, JavaScript/TypeScript can create, access or modify nodes from the DOM. But as the UI gets more complicated, directly accessing the DOM every single time can get tedious.
• React is a JavaScript Library for creating single-page User Interfaces. It essentially enables you to make a web page using small and reusable components, without having to worry about what’s happening to the DOM. Components are just different parts of the web page (eg. Navbar, list of items, side panel, buttons, etc.). A React application is a tree of Components, where the root node is the Application itself.
• A companion library called ReactDOM maintains a JavaScript data structure called the virtual DOM. It’s lightweight, and it’s stored in the RAM itself, making modifications faster. Then it compares this virtual DOM to the actual DOM and makes changes as small as possible. This is still better than changing full nodes in the actual DOM. The implementation of ReactDOM is in the file <projectDirectory>/node_modules/react-dom/client.js, which is automatically made when you make a React Project.

• The overall skeletal file structure looks like this:

• index.html is the main website. It calls a script main.tsx.

• Package Managers: npm stands for Node Package Manager and it’s used to install JavaScript Packages and Libraries. npx stands for Node Package eXecute, and this allows you to run packages without having to install them locally. It’s like borrowing a package, just for one single installation, and this is used when you’re not going to be running/using whatever you’re installing frequently.
• Build Tool: This is the thing to actually create and deploy the application. Creating the application is essentially making the directory structure, and all the files required for the project. There are two ways to make and use a project in React:

  • The old React Way (which is not recommended)

    npx create-react-app playground # where 'playground' is the name of the project
    

  • Using Vite (Pronounced veet, and this is the recommended way to start off):

    npm create vite@latest # for the latest version
    
    

    Once you do this, select “React” from the list of projects available, and select “TypeScript”. For the name of the project I’ve chosen “playground”. If you want to make a project out of the directory you’re in, just give “.”. Alternatively, if you want a specific version:

    npm create vite@4.1.0
    

• Assuming you’ve created the project using vite, now install all third party dependencies:

  cd playground
  npm install # or npm i
  

  and now deploy the project on local host (you can open http://localhost:5173/ on your browser to see your website):

  npm run dev
  

  dev is the name of the script in package.json:

  ...
    "scripts": {
      "dev": "vite",
      ..
    }
  

  dev enables hot reloading, and it adds extra checks and warnings. It keeps recompiling on the fly as you code.

• To create the actual production site, you’d use:

  npm run build
  

  This bundles everything into optimized files, and performs tree shaking (removing unused code).

• And to run the production site you just built, you’d use:

  npm run preview
  

• A React Component is essentially a TypeScript-XML module with a function as the file name. Previously classes used to be used instead of functions, but now functions are preferred for simplicity. These functions pretty much return HTML code.

• The HTML used in tsx or jsx files must use the keyword className instead of class. This is an example of a component App used in the script (main.tsx) called in the final website.

  /*     <projectName>/src/App.tsx    */
  const App = () => {
    return (
      <> // This is called a React Fragment, and is used when you're returning
         // multiple elements
        <h1 className="text-xl text-center font-medium text-black dark:text-white">
          {" "}
          Hello world!{" "}
        </h1>
      </>
    );
  };
  
  export default App;
  

  A React Component can only return one element. For example, return <h1>hey</h1> is valid. You can return a div too. But if you want to return multiple elements, you’ll have to enclose them in a React Fragment.

• .jsx files or .tsx files essentially contain JavaScript/TypeScript, but you can return HTML content.

• Components are accessed as a self-closing tag. The name of the tag is the name of the module.

  /*     <projectName>/src/main.tsx    */
  
  import { StrictMode } from "react";
  import { createRoot } from "react-dom/client";
  import App from "./App.tsx";
  import "./index.css";
  
  createRoot(document.getElementById("root")!).render(
    <StrictMode>
      <App />
    </StrictMode>,
  );
  

• In the middle of HTML content, you can plug some scripting logic enclosed in curly braces. Here’s an example:

  const List = () => {
    const users = ["michael", "jordan", "naresh", "rishab"];
    return (
      <div className="flex justify-center items-center text-7xl">
        <ul className="space-y-2">
          {users.map((x) => {
            return (
              <li
                key={x}
                className="hover:text-blue-500 hover:bg-red-500 hover:text-9xl transition-all duration-300"
              >
                {x}
              </li>
            );
          })}
        </ul>
      </div>
    );
  };
  
  export default List;
  

• Say you have a component called Button. While using the <Button /> tag, you can pass arguments to it. For example:

  <Button title="Clickbait" description="joke bro" />
  

  These arguments are called props. All arguments are internally just parameters of one object (which we conventionally called ’props’) being passed to the component. This is how the component would look like:

  const Button = (props) => {
      return (
          <>
              <h1>{ props.title }</h1>
              <p>{ props.description }</p>
          </>
      );
  
  

• A state is some information belonging to a component, that can change from time to time. For example, a state can be the number of clicks on a button.
• Hooks are functions that can change or modify states.

• Here’s an example:

  import React, { useState } from "react";
  
  const HiButton = () => {
    const [count, setCount] = useState(0);
      // useState returns an array [stateVariable, stateUpdater()]
    return (
      <>
        <div className="bg-blue-500 p-4 shadow">
          You have clicked this {count} times
          <button
            className="bg-red-500 p-4 mx-4 text-lg hover:bg-red-600 focus:ring active:scale-95"
            onClick={() => setCount(count + 1)}
          >
            click
          </button>
        </div>
      </>
    );
  };
  
  export default HiButton;
  

  What concerns us, is the state {count} and the state updater function setCount(count+1).

• States and hooks might seem like they can be replaced by normal JavaScript Variables and functions, but an important thing to note is that when you update a state, React automatically re-renders the entire component. In the above example, as and when you click button, the line above (You have clicked this {count} times) will change too.
• States help component remember information

• Pixels start from the top-left, Y grows downward. This is how Canvas 2D and CSS work.
• In computer graphics, Normalized Device Coordinates (NDC) are used.
  • This models the screen as a cartesian plane
  • Here the bottom-left-rear point is (-1, -1, -1) and the top-right-front point is (1, 1, 1).

• Canvas 2D is a web feature that lets you draw shapes, text, and images on a web page using JavaScript.

• You add a <canvas> element to the page:

  <canvas id="c" width="800" height="600"></canvas>
  <script>
  const canvas = document.getElementById('c');
  const ctx = canvas.getContext('2d');
  </script>
  

• This uses the coordinate system that starts from top-left, and Y growing downward.

• For instance:

  <body>
    <canvas id="c" width="800" height="600"></canvas>
    <script>
      const canvas = document.getElementById('c');
      const ctx = canvas.getContext('2d');
      // Rectangles
      ctx.fillStyle = '#00aaaa';
      ctx.fillRect(50, 50, 200, 100);     // x, y, w, h
      ctx.strokeStyle = 'black';
      ctx.lineWidth = 4;
      ctx.strokeRect(50, 50, 200, 100);
      // ctx.clearRect(0, 0, canvas.width, canvas.height); // erase
    </script>
  </body>
  

  This makes something like:

• While Canvas2D is a high-level drawing API, WebGL is a low-level GPU programming API.