What is React

Introduction

React helps you build parts of websites or apps that change often, like buttons or lists. It makes updating what you see on screen easy and fast.

You want to build a website with interactive buttons or forms.

You need to show lists of items that can change, like messages or products.

You want your app to update parts of the page without reloading everything.

You want to reuse pieces of your website in different places.

You want to build a user interface that works well on phones and computers.

Syntax

React

import React from 'react';

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

export default MyComponent;

React uses components, which are like small building blocks for your UI.

Components return JSX, a syntax that looks like HTML but works in JavaScript.

Examples

A simple React component that shows a greeting message.

React

function Greeting() {
  return <h1>Hi there!</h1>;
}

A React component that counts how many times you click a button.

React

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Sample Program

This React component shows a button. Each time you click it, the number updates. It uses useState to remember the count. The button has an aria-label for accessibility.

React

import React, { useState } from 'react';

function ClickMeButton() {
  const [clicks, setClicks] = useState(0);

  return (
    <button onClick={() => setClicks(clicks + 1)} aria-label="Click me button">
      You clicked me {clicks} times
    </button>
  );
}

export default ClickMeButton;

Important Notes

React components must start with a capital letter.

JSX looks like HTML but you write JavaScript inside curly braces {}.

React updates only the parts of the page that change, making apps fast.

Summary

React is a tool to build interactive parts of websites or apps.

It uses components that return JSX to describe what to show.

React helps update the screen quickly when data changes.