React vs traditional JavaScript

Introduction

React helps build user interfaces in a clear, organized way. Traditional JavaScript changes the page directly, which can get messy.

When you want to build interactive web pages that update smoothly.

When your page has many parts that change often, like a chat or a to-do list.

When you want to write code that is easier to read and maintain.

When you want to reuse parts of your page in different places.

When you want to handle user actions like clicks or typing in a simple way.

Syntax

React

React example:
function Hello() {
  return <h1>Hello, world!</h1>;
}

Traditional JavaScript example:
document.body.innerHTML = '<h1>Hello, world!</h1>';

React uses components that return HTML-like code called JSX.

Traditional JavaScript changes the page by directly modifying HTML elements.

Examples

This React component shows a welcome message using JSX.

React

function Greeting() {
  return <p>Welcome to React!</p>;
}

This traditional JavaScript code changes the content inside an element with id 'root'.

React

document.getElementById('root').innerHTML = '<p>Welcome to JavaScript!</p>';

Sample Program

This React component shows a button and a number. Each time you click the button, the number goes up. React updates the page automatically.

React

import React, { 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>
  );
}

export default Counter;

Important Notes

React keeps the page in sync with your data automatically.

Traditional JavaScript requires you to manually update the page when data changes.

React components make it easier to organize and reuse code.

Summary

React uses components and JSX to build pages clearly.

Traditional JavaScript changes the page directly and can be harder to manage.

React helps with interactive and dynamic user interfaces.