Forem: Nazmul Islam Nahid

#2.React Virtual DOM

Nazmul Islam Nahid — Mon, 23 Jan 2023 13:16:32 +0000

What is the DOM?

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects;
DOM specifies that querySelector() and it's return the element in the document.

const div = document.querySelector("#div");

The Virtual DOM was not invented by React, but React uses it. It's a lightweight copy of actual DOM. Imagine a virtual DOM as a tree where each node represents a component. When we modify any component's state or data, a duplicate tree of that component and its children is regenerated, but other parent components are unchanged. React has two representations of virtual DOMs, which are the previous and new virtual DOMs. React simply compares these two and uses a diffing or reconciliation algorithm to determine their differences. After finding the change, React updates the specific DOM.

Eslint and Prettier

Nazmul Islam Nahid — Thu, 11 Aug 2022 20:06:38 +0000

Install dependencies

yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier
yarn add -D eslint-plugin-node eslint-config-node
Initialize eslint

eslint --init

=> Select this options for react
- To check syntax, find problems, and enforce code style
- JavaScript modules (import/export)
- React
- Does your project use TypeScript? » No
- Browser
- Use a popular style guide
- Airbnb: https://github.com/airbnb/javascript
- JSON
- Would you like to install them now? » Yes
- yarn

Add configuration in .eslintrc

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true,
    "es6": true,
    "jest": true
  },

  "extends": [
    "airbnb",
    "airbnb/hooks",
    "eslint:recommended",
    "prettier",
    "plugin:jsx-a11y/recommended",
    "plugin:react/recommended",
    "airbnb",
    "prettier"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "prettier", "react-hooks"],

  "rules": {
    "react/react-in-jsx-scope": 0,
    "react-hooks/rules-of-hooks": "error",
    "react/button-has-type": 0,
    "consistent-return": 1,
    "no-unused-vars": 1,
    "import/prefer-default-export": 0,
    "no-param-reassign": 0,
    "no-console": 0,
    "react/state-in-constructor": 0,
    "indent": 0,
    "linebreak-style": 0,
    "react/prop-types": 0,
    "jsx-a11y/click-events-have-key-events": 0,
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", ".jsx"]
      }
    ],
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 100,
        "tabWidth": 4,
        "semi": true,
        "endOfLine": "auto"
      }
    ]
  }
}

Workspace settings.json

{
  // Theme
  "workbench.colorTheme": "Default Dark+",

  // config related to code formatting
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "javascript.validate.enable": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true,
    "source.organizeImports": true
  },
  "eslint.alwaysShowStatus": true,
  // emmet
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

#1.React and ReactDOM

Nazmul Islam Nahid — Fri, 05 Aug 2022 09:16:00 +0000

React and ReactDOM :

React is a javascript library. React allows to create reusable ui components with functionality. React is scaleable. We change the state like increment the number of state at the same time react update the dom. We don't need to access manually the dom and update the dom.

This React library generates HTML

import React from "react" //create element
const divElement = React.createElement("div", null, "hellow world")

This ReactDOM render the HTML in the #root div of browser.

import ReactDOM from "react-dom"
ReactDOM.render(divElemnt, document.getElementById("#root"));

Babel: Web pack like Babel compile the jsx into React.createElement because javascript can't understand jsx.

// jsx
<div className="newDiv">
  <p className="para">This is paragraph</p>
  <p className="para">Let's checkout</p>
</div>
// jsx to react
React.createElement("div", {
  className: "newDiv"
}, React.createElement("p", {
  className: "para"
}, "This is paragraph"), React.createElement("p", {
  className: "para"
}, "Let's checkout"));