React vs HTML: What is React all about?

If you learned HTML, you know half of React. For you guys who get frustrated writing each action of each button in a separate JavaScript file, React is here for you. In your journey of web development, you need to go from the static tag-based HTML to dynamic component-based React for a better experience. What makes React and related forms (React Native, Tailwind, TypeScript, Vite, Next.js, etc...) the industry standard? Here is a simple explanation.

What is HTML?

You build a house. You build it putting the bricks on one another, then you design the wall painting and at last make it functional with elevators, doors and windows. The first structure of the program (buttons, text, container) is built using HTML, the decoration (color and spacing) is done by CSS and the functionalities are done using JavaScript. This is the absolute basic foundation of web programming.

HTML is the markup language which directly communicates with the browser. Whether you use React, Vite, etc...; in the browser, it comes down to HTML, CSS and JavaScript.

HTML uses tags to build anything. Tags are simply built-in structures that map a simple function or structure into the visual web app. <button></button> maps a button. <p></p> maps a paragraph/text. <a></a> adds a link to some structure. Without JavaScript moving everything, HTML is just the structure standing there. (static)

What does React change?

React uses both built-in and custom-built components (pieces of UI) which could be repeatedly used throughout your code. That means that you build an elevator component from simple small components and then use it multiple places in your house. You build a stair component once and use it multiple times throughout your home. Not only that, each elevator remembers where it was (initialState) and dynamically adjusts where it goes (newState) based on command from the user.

That is what React came with. React uses JSX, which allows the use of HTML-like syntax while in JavaScript. Not only that, in HTML, I use JavaScript to give one-by-one step by step command to have some function. React is a JavaScript library that handles many of those steps for you under the hood. I just ask for the output and React immediately knows what to do with the steps.

It introduces two ideas (components & state). Components, which are pieces of the UI (interface) that are built once and used multiple times. State remembers the data put into it and allows you to call it anywhere you want it.

Basic Differences between HTML and React

• Tags vs Components: 'tags' are the absolute basic fundamentals of web. They include buttons, text, links, etc... which are the basics of web UI. 'components' are re-usable UI pieces which are built once and used multiple times. The components contain their own style, data handling and logic.

• Declarative vs Imperative: HTML is imperative, i.e., you code each and every step for a button you are building to work. React is declarative, i.e., since it have most of the steps built-in, you ask for the output and let React figure out the steps.
  

  // Step-by-step: How to build a list, how to map it to the UI
  const list = document.getElementById('myList');
  list.innerHTML = ''; // Clear it
  for (let i = 0; i < items.length; i++) {
      const li = document.createElement('li');
      li.textContent = items[i];
      list.appendChild(li);
  }
  

```jsx
// You say 'render a list' and react figures out how to build a list, map it to the UI, etc...
function ItemList({ items }) {
    return (
        <ul>
        {items.map((item) => (
            <li key={item.id}>{item.name}</li>
        ))}
        </ul>
    );
}
```

• Rendering:
  • the HTML code is the blueprint of what you want to build. When you run it, the DOM (Document Object Model) takes the blueprint and builds the UI (visible maps) in the browser. In React, a virtual DOM is introduced. It is a light weight copy of the actual DOM stored in the memory.
  • If you change something in HTML, since you have the DOM only, the whole web app needs to change when a single letter is changed. (Although browsers are good at changing specific pieces of DOM, the developer must refer each element by the ID for that to work) When virtual-DOM is introduced; when something in the code changes, the virtual DOM changes, and then the web app compares the actual and virtual DOM; and only changes the updated parts only.
• State Management: HTML on its own doesn't have state management. It depends on JavaScript to introduce state. React have a built-in state management system.
• Usage: HTML is best for static single page simple web apps. It is used for static pages like simple portfolios and landing pages. React is designed for complex, highly dynamic applications with need of state management.

Summary of Comparison (HTML and React)