What is React? - From Vanilla to React

React in Simple Terms

React is a JavaScript library created by Facebook (now Meta) for building user interfaces, especially for web applications. Think of it as a powerful tool that helps developers create interactive and dynamic websites more efficiently than traditional methods.

"React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."
— React Official Documentation

Core Philosophy

React is built around several key concepts that make it different from traditional web development:

🧩 Component-Based

Build applications using small, reusable pieces called components. Each component manages its own state and logic.

🔄 Declarative

Describe what your UI should look like for any given state, and React figures out how to update the DOM.

📚 Learn Once, Write Anywhere

Use React for web apps, mobile apps (React Native), and even desktop applications.

The Virtual DOM Advantage

One of React's most important features is the Virtual DOM. But what exactly is it, and why should you care?

Traditional DOM Manipulation

In vanilla JavaScript, when you want to update the webpage, you directly manipulate the DOM (Document Object Model). This can be slow and inefficient, especially for complex applications.

Vanilla JavaScript

// Directly manipulating the DOM
const element = document.getElementById('counter');
element.innerHTML = 'Count: ' + newCount;
element.style.color = newCount > 10 ? 'red' : 'black';

React's Virtual DOM

React creates a "virtual" copy of the DOM in memory. When changes occur, React:

Updates the Virtual DOM
Compares it with the previous Virtual DOM (diffing)
Updates only the parts of the real DOM that actually changed

React JSX

// React handles DOM updates automatically
function Counter({ count }) {
  return (
    <div style={{color: count > 10 ? 'red' : 'black'}}>
      Count: {count}
    </div>
  );
}

React vs Vanilla JavaScript

Let's see how React compares to vanilla JavaScript with a practical example:

Vanilla JavaScript

JavaScript

// HTML
<div id="app"></div>

// JavaScript
let count = 0;
const app = document.getElementById('app');

function render() {
  app.innerHTML = `
    <div>
      <h2>Count: ${count}</h2>
      <button onclick="increment()">+</button>
      <button onclick="decrement()">-</button>
    </div>
  `;
}

function increment() {
  count++;
  render();
}

function decrement() {
  count--;
  render();
}

render(); // Initial render

React

React JSX

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        +
      </button>
      <button onClick={() => setCount(count - 1)}>
        -
      </button>
    </div>
  );
}

Key Differences

State Management: React uses hooks like useState to manage state automatically
Re-rendering: React automatically re-renders when state changes
Event Handling: React provides built-in event handlers
Code Organization: React encourages component-based thinking

What Makes React Special?

🔧 Developer Experience

Excellent debugging tools, hot reloading, and a vibrant ecosystem make development enjoyable and productive.

⚡ Performance

Virtual DOM and intelligent re-rendering ensure your apps run smoothly even with complex UIs.

🌐 Industry Standard

Used by Facebook, Netflix, Instagram, and thousands of other companies worldwide.

📱 Versatile

Build web apps, mobile apps (React Native), desktop apps, and even VR experiences.

Ready to Start Learning?

Now that you understand what React is and why it's different from vanilla JavaScript, you're ready to dive deeper into the React ecosystem.

What's Next? Learn Components & JSX