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
"text-green-500 opacity-70">// Function Component
"text-blue-400">function Button({ label, onClick }) {
  "text-blue-400">return (
    
  );
}

"text-green-500 opacity-70">// Arrow Function Component (modern style)
"text-blue-400">const Card = ({ title, content }) => {
  "text-blue-400">return (
    
"text-blue-400">className="card">
      
{title}

      
{content}

    

  );
};

"text-green-500 opacity-70">// Component Composition
"text-green-500 opacity-70">// Components can render other components
"text-blue-400">function App() {
  "text-blue-400">return (
    

      

      "Welcome" content="Hello World" />
      

  );
}

"text-green-500 opacity-70">// Component Reusability
"text-green-500 opacity-70">// Same component, d"text-blue-400">ifferent props
"text-blue-400">function Page() {
  "text-blue-400">return (
    

      "First Card" content="Content 1" />
      "Second Card" content="Content 2" />
      "Third Card" content="Content 3" />
    

  );
}