React Beginner Guide

React is a JavaScript library for building user interfaces out of reusable, composable components.

What is React?

Instead of manipulating the DOM directly, you describe what the UI should look like for a given state, and React updates the page efficiently when that state changes.

Components

A component is a JavaScript function that returns markup. Components can be nested inside one another to build complex UIs from small pieces.

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

Props

Props ("properties") pass data from a parent component into a child component, similar to function arguments.

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

// Usage: <Greeting name="Ada" />

State

State is data that a component manages internally and that can change over time, triggering a re-render.

import { useState } from "react";

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

JSX Syntax

JSX lets you write HTML-like syntax directly inside JavaScript. It compiles down to regular function calls that build the UI tree.