React 18 Guide

ReactA JavaScript Library for Building User Interfaces

Learn React through interactive visualizations and code examples. Build components, manage state, and create dynamic user interfaces.

Contents

🎯 Core Concept: Components & JSX

React components are reusable pieces of UI built with JavaScript functions. JSX is a syntax extension that lets you write HTML-like code in JavaScript. Components accept inputs (props) and return JSX describing what should appear on screen.

1
Component
JavaScript function
2
Props
Input data
3
JSX
UI markup
4
DOM
Rendered output

Describing the UI

Learn how to build reusable UI pieces using components, JSX syntax, and props for data flow.

B

Button

C

Card

I

Input

Component Tree Structure

<App>
<Header />
<Button label="Click" />
<Card title="Hello" />

Components compose together to form a component tree. Parent components render child components, passing data down through props. This creates a hierarchy where each component is responsible for its own piece of the UI.

Building Components

Components are the building blocks of React applications. They can be function declarations or arrow functions.

jsx
// Function Component
"text-blue-400">function Button("text-pink-400">{ label, onClick "text-pink-400">}) "text-pink-400">{
  "text-blue-400">return (
    <button onClick="text-pink-400">{onClick"text-pink-400">} className="btn">
      "text-pink-400">{label"text-pink-400">}
    </button>
  );
"text-pink-400">}

// Arrow Function Component (modern style)
"text-blue-400">const Card = ("text-pink-400">{ title, content "text-pink-400">}) => "text-pink-400">{
  "text-blue-400">return (
    <div className="card">
      <h2>"text-pink-400">{title"text-pink-400">}</h2>
      <p>"text-pink-400">{content"text-pink-400">}</p>
    </div>
  );
"text-pink-400">};

// Component Composition
// Components can render other components
"text-blue-400">function App() "text-pink-400">{
  "text-blue-400">return (
    <div>
      <Header />
      <Card title="Welcome" content="Hello World" />
      <Button label="Click Me" onClick="text-pink-400">{() => alert('Clicked!')"text-pink-400">} />
    </div>
  );
"text-pink-400">}

// Component Reusability
// Same component, different props
"text-blue-400">function Page() "text-pink-400">{
  "text-blue-400">return (
    <div>
      <Card title="First Card" content="Content 1" />
      <Card title="Second Card" content="Content 2" />
      <Card title="Third Card" content="Content 3" />
    </div>
  );
"text-pink-400">}