What is React vs Vanilla Javascript?

React is a JavaScript library that helps you build user interfaces, especially for web apps, more easily and efficiently.

React, developed by Facebook and first deployed internally in 2011, was open-sourced in May 2013. Initially met with curiosity and skepticism due to its unconventional JSX syntax, React quickly gained traction, particularly after the release of React Native in 2015, which extended its component-based architecture to mobile apps. By 2016, React had become a leading front-end library, with major companies adopting it and a robust ecosystem forming around it. The release of React 16 in 2017 and the introduction of React Hooks in 2019 further solidified its dominance. Today, React is widely used across industries and continues to evolve as a key tool for modern web and mobile development.

Key Differences in React JS from Vanilla JavaScript:

1. Component-Based Structure:

• Explanation: In React, you build your UI by creating components, which are self-contained pieces of the interface. Each component handles its own logic and appearance, making the overall UI easier to manage.

• Example:

  javascriptCopy
  function Welcome(props) {
    return <h1>Hello, {props.name}!</h1>;
  }
  
  function App() {
    return (
      <div>
        <Welcome name="Alice" />
        <Welcome name="Bob" />
      </div>
    );
  }
  

• Tech Explanation: Components allow you to break down your UI into smaller, reusable pieces. Instead of handling the entire page in one big block of code, you manage small, focused pieces that are easier to develop and maintain.

2. JSX Syntax:

• Explanation: JSX is a syntax extension that allows you to write HTML-like code inside JavaScript. It looks like HTML, but it's actually syntactic sugar for React.createElement() calls.
• Example:

  javascriptCopy
  const element = <h1>Hello, world!</h1>;
  

  Without JSX, this would be written as:

  javascriptCopy
  const element = React.createElement("h1", null, "Hello, world!");
  

• Tech Explanation: JSX makes it easier to visualize what your UI will look like, as you can write components in a way that resembles HTML. Behind the scenes, JSX gets compiled into JavaScript function calls that React uses to create elements in the virtual DOM.

3. State Management:

• Explanation: State is a special object in React that holds data that affects how the component renders. When the state changes, React automatically updates the relevant parts of the UI.

• Example:

  javascriptCopy
  import { useState } from "react";
  
  function Counter() {
    const [count, setCount] = useState(0);
  
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>Click me</button>
      </div>
    );
  }
  

• Tech Explanation: React's useState hook allows you to create state variables that React monitors. When the state changes, React knows which components need to be re-rendered, so it only updates those parts of the UI, making the application more efficient.

4. Virtual DOM:

• Explanation: The virtual DOM is a lightweight representation of the actual DOM. React keeps a copy of the DOM in memory and, when a state change occurs, it calculates the difference (or "diff") between the old and new versions. It then updates only the parts of the DOM that have changed.
• Example:

  javascriptCopy
  // React code:
  const element = <h1>Hello, world!</h1>;
  ReactDOM.render(element, document.getElementById("root"));
  

  • Behind the scenes: React compares the previous version of element with the new one. If there's a difference, it updates the real DOM efficiently.
• Tech Explanation: Direct manipulation of the DOM is slow because it requires the browser to re-render elements. The virtual DOM minimizes these operations by making changes in memory first and then applying only the necessary updates to the real DOM, leading to faster, more responsive UIs.

Before React: How These Concepts Were Handled in Vanilla JavaScript:

Before React, developers used various techniques and patterns to achieve similar results. However, React provided a more streamlined, efficient, and maintainable approach. Here’s how each key difference was handled before React:

1. Component-Based Structure:

• Before React:
  • Developers often used jQuery or plain JavaScript to manipulate the DOM directly. They might structure code using patterns like MVC (Model-View-Controller), where the view logic was separated from business logic, but the UI was still typically managed in larger, monolithic chunks.
  • UI was often organized using custom JavaScript functions or by breaking HTML into smaller templates and manually managing the state and interactions.
• Workaround: Templates were sometimes managed with libraries like Handlebars or Mustache, and components were mimicked by splitting code into different modules, though without the same level of encapsulation and reusability that React components offer.

2. JSX Syntax:

• Before React:
  • HTML and JavaScript were kept strictly separate. HTML templates were either hardcoded in the HTML file or constructed using JavaScript by creating and appending DOM elements.
  • Templating libraries like Mustache, Handlebars, or EJS were used to inject dynamic content into HTML.
• Workaround: Developers had to manage the creation of elements using JavaScript’s createElement method or string concatenation, making the code harder to read and maintain. Embedding HTML-like syntax directly in JavaScript wasn't common.

3. State Management:

• Before React:
  • State was managed using plain JavaScript variables or through more complex patterns like MVC. Libraries like Backbone.js introduced models to manage state, but the process of updating the UI based on state changes was still manual.
  • Developers had to manually track and update the DOM whenever the state changed, which could lead to bugs and inconsistencies.
• Workaround: Two-way data binding was sometimes used in libraries like AngularJS (before React), which automatically updated the view when the model changed and vice versa. However, it was more complex and could lead to performance issues in large applications.

4. Virtual DOM:

• Before React:
  • Direct manipulation of the DOM was standard practice. Developers used jQuery or vanilla JavaScript to make changes to the DOM whenever data or state changed.
  • This approach was fine for small applications, but as applications grew in complexity, it became inefficient and led to performance problems, especially with frequent updates or large numbers of elements.
• Workaround: Developers often tried to minimize DOM manipulation by batching updates or using patterns like document fragments to reduce reflows and repaints. However, this required a lot of manual optimization and was prone to errors.

Summary:

React revolutionized the way developers build user interfaces by introducing a component-based architecture, JSX syntax, efficient state management, and the virtual DOM. These concepts made it easier to create complex UIs, manage state, and optimize performance, leading to the widespread adoption of React in modern web development.