ReactJS

Part - 2 : From Project Folder Structure To ReactJS Features 🚀

Folder Structure

aadil tai's photo
aadil tai
·

2 min read

After installation with the TailwindCSS document, you will get this kind of Folder structure.

After diving into the Folder structure I explored the features, advantages, and disadvantages of ReactJS.

Features of reactjs

  1. Virtual Dom

  2. Component-Based architecture

  3. reusability and composition

  4. javascript xml

  5. declarative syntax

  6. community and ecosystem

  7. react hooks

Before understanding Virtual DOM it’s necessary to understand what is Dom and what is difference between DOM and HTML.

  1. DOM : suppose i have one HTML page whose source code is
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Structure Example</title>
</head>
<body>
  <h1>Welcome to HTML!</h1>
  <ul>
    <li>First item.</li>
    <li>Second item.</li>
    <li>Third item.</li>
  </ul>
</body>
</html>

The DOM (Document Object Model) is essentially a tree-like structure that represents the content of an HTML page in the browser's memory. When a web page is loaded, the browser parses the HTML, CSS, and JavaScript and creates this DOM tree in memory.

If you add, remove, or modify elements on the web page (e.g., through JavaScript or user actions), the DOM tree in memory is updated to reflect those changes. This process is called DOM manipulation.

VDOM :

When it comes to React-JS

The Reconciliation Algorithm in React is the process used to efficiently update the Real DOM when there are changes in the application's state or props.

It compares the new Virtual DOM tree with the previous Virtual DOM tree, calculates the differences (diffing), and updates only the parts of the Real DOM that have changed, minimizing performance costs.

JavaScriptReact