Why React is used

Introduction

React helps build user interfaces easily by breaking them into small parts called components. It makes websites fast and interactive.

When you want to build a website that updates information without reloading the whole page.

When you want to reuse parts of your website in different places to save time.

When you want your website to work well on phones, tablets, and computers.

When you want to manage complex user interactions smoothly.

When you want to build a website that feels fast and responsive.

Syntax

React

import React from 'react';

function ComponentName() {
  return (
    <div>Hello, React!</div>
  );
}

export default ComponentName;

React components are like building blocks for your website.

You write components using JSX, which looks like HTML inside JavaScript.

Examples

A simple React component that shows a greeting message.

React

function Greeting() {
  return <h1>Hello, friend!</h1>;
}

A React component that creates a clickable button.

React

function Button() {
  return <button>Click me</button>;
}

Sample Program

This React component shows a number and a button. Each time you click the button, the number goes up by one. It shows how React updates the page quickly without reloading.

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 uses a virtual copy of the webpage to update only what changes, making it fast.

Components can be reused, which saves time and keeps code clean.

Summary

React breaks websites into small, reusable parts called components.

It helps build fast, interactive, and responsive user interfaces.

React updates only the parts of the page that change, improving speed.