### Complete example of React component creation and nesting

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/index.md

A comprehensive example combining the definition of a simple button component and its integration into a main application component, illustrating how multiple components form a UI.

```js
function MyButton() {
  return (
    <button>
      I'm a button
    </button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}
```

--------------------------------

### Complete Example: Rendering List of Fragments with Key

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/Fragment.md

A full, runnable example demonstrating how to render a list of React Fragments, each with a unique `key`, within a component. Includes helper components and sample data to show the complete setup.

```javascript
import { Fragment } from 'react';

const posts = [
  { id: 1, title: 'An update', body: "It's been a while since I posted..." },
  { id: 2, title: 'My new blog', body: 'I am starting a new blog!' }
];

export default function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}
```

--------------------------------

### Try React in an online sandbox

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/installation.md

This snippet demonstrates a basic React functional component and its usage within an App component. It shows how to define a component, pass props, and render it, allowing users to quickly experiment with React without any local setup.

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

export default function App() {
  return <Greeting name="world" />
}
```

--------------------------------

### React Render Tree Example: Get Inspired App

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/understanding-your-ui-as-a-tree.md

This comprehensive example illustrates a React application that generates inspirational quotes, demonstrating component composition and the formation of a render tree. It includes the main application component, reusable text components, a quote generator, a copyright component, a data module, and associated styling.

```js
import FancyText from './FancyText';
import InspirationGenerator from './InspirationGenerator';
import Copyright from './Copyright';

export default function App() {
  return (
    <>
      <FancyText title text="Get Inspired App" />
      <InspirationGenerator>
        <Copyright year={2004} />
      </InspirationGenerator>
    </>
  );
}
```

```js
export default function FancyText({title, text}) {
  return title
    ? <h1 className='fancy title'>{text}</h1>
    : <h3 className='fancy cursive'>{text}</h3>
}
```

```js
import * as React from 'react';
import quotes from './quotes';
import FancyText from './FancyText';

export default function InspirationGenerator({children}) {
  const [index, setIndex] = React.useState(0);
  const quote = quotes[index];
  const next = () => setIndex((index + 1) % quotes.length);

  return (
    <>
      <p>Your inspirational quote is:</p>
      <FancyText text={quote} />
      <button onClick={next}>Inspire me again</button>
      {children}
    </>
  );
}
```

```js
export default function Copyright({year}) {
  return <p className='small'>©️ {year}</p>;
}
```

```js
export default [
  "Don’t let yesterday take up too much of today.” — Will Rogers",
  "Ambition is putting a ladder against the sky.",
  "A joy that's shared is a joy made double.",
  ];
```

```css
.fancy {
  font-family: 'Georgia';
}
.title {
  color: #007AA3;
  text-decoration: underline;
}
.cursive {
  font-style: italic;
}
.small {
  font-size: 10px;
}
```

--------------------------------

### Full example of dynamic data display and inline styling in React

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/index.md

A complete demonstration of displaying dynamic user data, concatenating strings for attributes, and applying inline styles using JavaScript objects within JSX, alongside external CSS.

```js
const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}
```

```css
.avatar {
  border-radius: 50%;
}

.large {
  border: 4px solid gold;
}
```

--------------------------------

### Initial React Setup for Nested Recipe Lists

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/rendering-lists.md

This snippet provides the starting point for the exercise, including an empty React component (`App.js`) and the `recipes` data array (`data.js`) that needs to be rendered into nested lists.

```jsx
import { recipes } from './data.js';

export default function RecipeList() {
  return (
    <div>
      <h1>Recipes</h1>
    </div>
  );
}
```

```javascript
export const recipes = [{
  id: 'greek-salad',
  name: 'Greek Salad',
  ingredients: ['tomatoes', 'cucumber', 'onion', 'olives', 'feta']
}, {
  id: 'hawaiian-pizza',
  name: 'Hawaiian Pizza',
  ingredients: ['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple']
}, {
  id: 'hummus',
  name: 'Hummus',
  ingredients: ['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini']
}];
```

--------------------------------

### Install React and React DOM packages

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/add-react-to-an-existing-project.md

Run this command in your project folder to install the `react` and `react-dom` packages, which are essential for building React applications.

```Shell
npm install react react-dom
```

--------------------------------

### Install Parcel as a development dependency

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/build-a-react-app-from-scratch.md

This command installs Parcel as a development dependency in your project. Parcel is a zero-configuration build tool that offers out-of-the-box support for features like fast refresh, JSX, and TypeScript, simplifying the setup for React applications.

```bash
npm install --save-dev parcel
```

--------------------------------

### Install React.dev Website Dependencies

Source: https://github.com/jeanduplessis/react.dev/blob/main/README.md

Navigate into the project root directory and install the necessary npm dependencies using Yarn.

```Shell
cd react.dev
yarn
```

--------------------------------

### Install React 19 and its TypeScript types

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/blog/2024/04/25/react-19-upgrade-guide.md

Commands to install React and React DOM version 19, along with their corresponding TypeScript type definitions, using either npm or Yarn. The `--save-exact` or `--exact` flag ensures that the specified major version is installed.

```bash
npm install --save-exact react@^19.0.0 react-dom@^19.0.0
```

```bash
yarn add --exact react@^19.0.0 react-dom@^19.0.0
```

```bash
npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0
```

```bash
yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0
```

--------------------------------

### Migrating from react-test-renderer/shallow to react-shallow-renderer

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/blog/2024/04/25/react-19-upgrade-guide.md

Explains how to update test setups that use `react-test-renderer/shallow` to directly import `react-shallow-renderer`. This change reflects the removal of the re-export in React 19, preferring direct package installation.

```bash
npm install react-shallow-renderer --save-dev
```

```diff
- import ShallowRenderer from 'react-test-renderer/shallow';
+ import ShallowRenderer from 'react-shallow-renderer';
```

--------------------------------

### Complete React Example: Shared State with Lifting State Up

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/index.md

This comprehensive example demonstrates the full implementation of shared state in React using the 'lifting state up' pattern. It includes the parent component managing the state and passing it down, and child components consuming these props, resulting in synchronized updates across all instances.

```js
import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}
```

```css
button {
  display: block;
  margin-bottom: 5px;
}
```

--------------------------------

### Sandpack Configuration for Imperative UI Example

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/reacting-to-input-with-state.md

This JSON file configures the Sandpack environment for the imperative UI example, specifying that hard reloads should occur on changes to ensure the example behaves as expected.

```json
{
  "hardReloadOnChange": true
}
```

--------------------------------

### Complete Streaming Example with Sandpack

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/use.md

A comprehensive, runnable example showcasing the end-to-end process of streaming data. It includes the Client Component (`Message`), a container component (`MessageContainer`), and a simulated Server Component (`App`) that manages the Promise and rendering flow.

```js
"use client";

import { use, Suspense } from "react";

function Message({ messagePromise }) {
  const messageContent = use(messagePromise);
  return <p>Here is the message: {messageContent}</p>;
}

export function MessageContainer({ messagePromise }) {
  return (
    <Suspense fallback={<p>⌛Downloading message...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}
```

```js
import { useState } from "react";
import { MessageContainer } from "./message.js";

function fetchMessage() {
  return new Promise((resolve) => setTimeout(resolve, 1000, "⚛️"));
}

export default function App() {
  const [messagePromise, setMessagePromise] = useState(null);
  const [show, setShow] = useState(false);
  function download() {
    setMessagePromise(fetchMessage());
    setShow(true);
  }

  if (show) {
    return <MessageContainer messagePromise={messagePromise} />;
  } else {
    return <button onClick={download}>Download message</button>;
  }
}
```

```js
import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';

// TODO: update this example to use
// the Codesandbox Server Component
// demo environment once it is created
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);
```

--------------------------------

### React Example: Updating Quantity with Actions and Transitions

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/useTransition.md

This comprehensive example demonstrates managing quantity updates in a React application using `useTransition` to show pending states. It includes multiple files for application logic, component rendering, and a simulated API call. The setup illustrates how state can be updated while asynchronous requests are in progress, but also highlights a known limitation where requests might complete out of order.

```json
{
  "dependencies": {
    "react": "beta",
    "react-dom": "beta"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
```

```javascript
import { useState, useTransition } from "react";
import { updateQuantity } from "./api";
import Item from "./Item";
import Total from "./Total";

export default function App({}) {
  const [quantity, setQuantity] = useState(1);
  const [isPending, startTransition] = useTransition();

  const updateQuantityAction = async newQuantity => {
    // To access the pending state of a transition,
    // call startTransition again.
    startTransition(async () => {
      const savedQuantity = await updateQuantity(newQuantity);
      startTransition(() => {
        setQuantity(savedQuantity);
      });
    });
  };

  return (
    <div>
      <h1>Checkout</h1>
      <Item action={updateQuantityAction}/>
      <hr />
      <Total quantity={quantity} isPending={isPending} />
    </div>
  );
}
```

```javascript
import { startTransition } from "react";

export default function Item({action}) {
  function handleChange(event) {
    // To expose an action prop, await the callback in startTransition.
    startTransition(async () => {
      await action(event.target.value);
    })
  }
  return (
    <div className="item">
      <span>Eras Tour Tickets</span>
      <label htmlFor="name">Quantity: </label>
      <input
        type="number"
        onChange={handleChange}
        defaultValue={1}
        min={1}
      />
    </div>
  )
}
```

```javascript
const intl = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD"
});

export default function Total({quantity, isPending}) {
  return (
    <div className="total">
      <span>Total:</span>
      <span>
        {isPending ? "🌀 Updating..." : `${intl.format(quantity * 9999)}`}
      </span>
    </div>
  )
}
```

```javascript
export async function updateQuantity(newQuantity) {
  return new Promise((resolve, reject) => {
    // Simulate a slow network request.
    setTimeout(() => {
      resolve(newQuantity);
    }, 2000);
  });
}
```

```css
.item {
  display: flex;
  align-items: center;
  justify-content: start;
}

.item label {
  flex: 1;
  text-align: right;
}

.item input {
  margin-left: 4px;
  width: 60px;
  padding: 4px;
}

.total {
  height: 50px;
  line-height: 25px;
  display: flex;
  align-content: center;
  justify-content: space-between;
}
```

--------------------------------

### Configure ESLint for React Hooks plugin

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/blog/2025/04/21/react-compiler-rc.md

Example `eslint.config.js` showing how to import and apply the recommended configurations from `eslint-plugin-react-hooks` for both Flat Config (ESLint 9+) and Legacy Config. This setup is necessary after migrating from `eslint-plugin-react-compiler`.

```JavaScript
// eslint.config.js
import * as reactHooks from 'eslint-plugin-react-hooks';

export default [
  // Flat Config (eslint 9+)
  reactHooks.configs.recommended,

  // Legacy Config
  reactHooks.configs['recommended-latest']
];
```

--------------------------------

### Install React Compiler Beta and ESLint Plugin

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/blog/2024/10/21/react-compiler-beta-release.md

Installs the beta versions of 'babel-plugin-react-compiler' and 'eslint-plugin-react-compiler' as development dependencies. This allows early adopters and library maintainers to try the compiler and provide feedback.

```bash
npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
```

```bash
yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
```

--------------------------------

### Basic CSS Styling for React Video Player Example

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/Activity.md

Provides basic CSS rules to style the body, buttons, and video elements within the React video player example, ensuring proper layout and sizing.

```css
body { height: 275px; }
button { margin-right: 10px }
b { display: inline-block; margin-right: 10px; }
video { width: 300px; margin-top: 10px; }
```

--------------------------------

### Basic HTML Unordered List Example

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/rendering-lists.md

An example of a static HTML unordered list, illustrating how similar content is typically structured before dynamic rendering with JavaScript.

```html
<ul>
  <li>Creola Katherine Johnson: mathematician</li>
  <li>Mario José Molina-Pasquel Henríquez: chemist</li>
  <li>Mohammad Abdus Salam: physicist</li>
  <li>Percy Lavon Julian: chemist</li>
  <li>Subrahmanyan Chandrasekhar: astrophysicist</li>
</ul>
```

--------------------------------

### Complete React App Example with JSX

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/createElement.md

A full, runnable example of a React application using JSX for component definition and rendering. This snippet provides a direct comparison to the `createElement` approach, including associated CSS styling.

```js
function Greeting({ name }) {
  return (
    <h1 className="greeting">
      Hello <i>{name}</i>. Welcome!
    </h1>
  );
}

export default function App() {
  return <Greeting name="Taylor" />;
}
```

```css
.greeting {
  color: darkgreen;
  font-family: Georgia;
}
```

--------------------------------

### React `createPortal` Usage Examples

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react-dom/createPortal.md

Demonstrates various ways to use React's `createPortal` function to render children into a different part of the DOM. Includes basic syntax, a minimal example showing import and usage with `document.body`, and a full component example illustrating how a portal allows content to 'escape' its parent's visual boundaries while maintaining React's logical tree.

```js
<div>
  <SomeComponent />
  {createPortal(children, domNode, key?)}
</div>
```

```js
import { createPortal } from 'react-dom';

// ...

<div>
  <p>This child is placed in the parent div.</p>
  {createPortal(
    <p>This child is placed in the document body.</p>,
    document.body
  )}
</div>
```

```js
import { createPortal } from 'react-dom';

function MyComponent() {
  return (
    <div style={{ border: '2px solid black' }}>
      <p>This child is placed in the parent div.</p>
      {createPortal(
        <p>This child is placed in the document body.</p>,
        document.body
      )}
    </div>
  );
}
```

--------------------------------

### Complete React App Example with React.createElement

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/createElement.md

A full, runnable example of a React application built entirely with `React.createElement`. It includes a functional component definition, its rendering in the main App component, and associated CSS styling.

```js
import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello ',
    createElement('i', null, name),
    '. Welcome!'
  );
}

export default function App() {
  return createElement(
    Greeting,
    { name: 'Taylor' }
  );
}
```

```css
.greeting {
  color: darkgreen;
  font-family: Georgia;
}
```

--------------------------------

### Render a basic 'Hello, world!' React component

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/add-react-to-an-existing-project.md

This example demonstrates how to set up an HTML file with a root element and a JavaScript file to import `createRoot` from `react-dom/client` and render a simple `<h1>Hello, world</h1>` component into the DOM.

```HTML
<!DOCTYPE html>
<html>
  <head><title>My app</title></head>
  <body>
    <!-- Your existing page content (in this example, it gets replaced) -->
    <div id="root"></div>
  </body>
</html>
```

```JavaScript
import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);
```

--------------------------------

### Complete React Context Highlighting Example

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/cloneElement.md

A comprehensive, runnable example showcasing the full implementation of passing highlighting data using React Context. It includes all necessary components (`App`, `List`, `Row`), context definition, sample data, and styling.

```javascript
import List from './List.js';
import Row from './Row.js';
import { products } from './data.js';

export default function App() {
  return (
    <List
      items={products}
      renderItem={(product) =>
        <Row title={product.title} />
      }
    />
  );
}
```

```javascript
import { useState } from 'react';
import { HighlightContext } from './HighlightContext.js';

export default function List({ items, renderItem }) {
  const [selectedIndex, setSelectedIndex] = useState(0);
  return (
    <div className="List">
      {items.map((item, index) => {
        const isHighlighted = index === selectedIndex;
        return (
          <HighlightContext
            key={item.id}
            value={isHighlighted}
          >
            {renderItem(item)}
          </HighlightContext>
        );
      })}
      <hr />
      <button onClick={() => {
        setSelectedIndex(i =>
          (i + 1) % items.length
        );
      }}>
        Next
      </button>
    </div>
  );
}
```

```javascript
import { useContext } from 'react';
import { HighlightContext } from './HighlightContext.js';

export default function Row({ title }) {
  const isHighlighted = useContext(HighlightContext);
  return (
    <div className={[
      'Row',
      isHighlighted ? 'RowHighlighted' : ''
    ].join(' ')}>
      {title}
    </div>
  );
}
```

```javascript
import { createContext } from 'react';

export const HighlightContext = createContext(false);
```

```javascript
export const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 }
];
```

```css
.List {
  display: flex;
  flex-direction: column;
  border: 2px solid grey;
  padding: 5px;
}

.Row {
  border: 2px dashed black;
  padding: 5px;
  margin: 5px;
}

.RowHighlighted {
  background: #ffa;
}

button {
  height: 40px;
  font-size: 20px;
}
```

--------------------------------

### Intentionally Mirroring Initial Props in React State

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/choosing-the-state-structure.md

This example illustrates a specific use case where mirroring a prop into state is acceptable: when you explicitly intend to ignore subsequent updates to that prop. By convention, the prop name should start with 'initial' or 'default' to clarify that its value is only used for initial state setup and further changes are disregarded.

```js
function Message({ initialColor }) {
  // The `color` state variable holds the *first* value of `initialColor`.
  // Further changes to the `initialColor` prop are ignored.
  const [color, setColor] = useState(initialColor);
}
```

--------------------------------

### React Conditional Rendering Example with Multiple Components

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/understanding-your-ui-as-a-tree.md

This example demonstrates how to implement conditional rendering in a React application. It shows a main App component that uses an InspirationGenerator to dynamically display either a text quote or a color box based on data. The example includes several interconnected components (FancyText, Color, Copyright) and a data source (inspirations.js) to illustrate a complete conditional rendering flow.

```JavaScript
import FancyText from './FancyText';
import InspirationGenerator from './InspirationGenerator';
import Copyright from './Copyright';

export default function App() {
  return (
    <>
      <FancyText title text="Get Inspired App" />
      <InspirationGenerator>
        <Copyright year={2004} />
      </InspirationGenerator>
    </>
  );
}
```

```JavaScript
export default function FancyText({title, text}) {
  return title
    ? <h1 className='fancy title'>{text}</h1>
    : <h3 className='fancy cursive'>{text}</h3>
}
```

```JavaScript
export default function Color({value}) {
  return <div className="colorbox" style={{backgroundColor: value}} />
}
```

```JavaScript
import * as React from 'react';
import inspirations from './inspirations';
import FancyText from './FancyText';
import Color from './Color';

export default function InspirationGenerator({children}) {
  const [index, setIndex] = React.useState(0);
  const inspiration = inspirations[index];
  const next = () => setIndex((index + 1) % inspirations.length);

  return (
    <>
      <p>Your inspirational {inspiration.type} is:</p>
      {inspiration.type === 'quote'
      ? <FancyText text={inspiration.value} />
      : <Color value={inspiration.value} />}

      <button onClick={next}>Inspire me again</button>
      {children}
    </>
  );
}
```

```JavaScript
export default function Copyright({year}) {
  return <p className='small'>©️ {year}</p>;
}
```

```JavaScript
export default [
  {type: 'quote', value: "Don’t let yesterday take up too much of today.” — Will Rogers"},
  {type: 'color', value: "#B73636"},
  {type: 'quote', value: "Ambition is putting a ladder against the sky."},
  {type: 'color', value: "#256266"},
  {type: 'quote', value: "A joy that's shared is a joy made double."},
  {type: 'color', value: "#F9F2B4"}
];
```

```CSS
.fancy {
  font-family: 'Georgia';
}
.title {
  color: #007AA3;
  text-decoration: underline;
}
.cursive {
  font-style: italic;
}
.small {
  font-size: 10px;
}
.colorbox {
  height: 100px;
  width: 100px;
  margin: 8px;
}
```

--------------------------------

### React useEffect Symmetrical Setup and Cleanup Logic

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/useEffect.md

This example illustrates the correct way to implement `useEffect` with symmetrical setup and cleanup logic. The setup phase establishes a connection, and the cleanup phase disconnects it, ensuring that resources are properly managed. The cleanup runs before re-renders with changed dependencies and on unmount.

```js
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);
```

--------------------------------

### Install React Developer Tools Standalone via npm

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/react-developer-tools.md

Instructions to install the `react-devtools` npm package globally using Yarn or npm for browsers like Safari that don't have a direct extension.

```bash
# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools
```

--------------------------------

### Initialize a new React project with Vite

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/build-a-react-app-from-scratch.md

This command uses npm to create a new React application powered by Vite. Vite is a modern build tool known for its fast development server and optimized build performance, providing a lean setup for React projects.

```bash
npm create vite@latest my-app -- --template react
```

--------------------------------

### Focusing Input Element Using React Ref Example

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react-dom/components/common.md

A complete example demonstrating how to use `useRef` to get a reference to an input DOM node and programmatically call its `focus()` method when a button is clicked.

```js
import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}
```

--------------------------------

### Complete Suspense-Enabled Router Example with Data Fetching

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/useTransition.md

This comprehensive multi-file JavaScript example demonstrates a fully functional React router integrated with `Suspense` and `useTransition`. It showcases how to manage application state, perform non-blocking navigations, and handle asynchronous data fetching with `use` hook and `Suspense` fallbacks. The example includes components for the main application, layout, index page, artist page, albums, biography, and a mock data fetching utility.

```js
import { Suspense, useState, useTransition } from 'react';
import IndexPage from './IndexPage.js';
import ArtistPage from './ArtistPage.js';
import Layout from './Layout.js';

export default function App() {
  return (
    <Suspense fallback={<BigSpinner />}>
      <Router />
    </Suspense>
  );
}

function Router() {
  const [page, setPage] = useState('/');
  const [isPending, startTransition] = useTransition();

  function navigate(url) {
    startTransition(() => {
      setPage(url);
    });
  }

  let content;
  if (page === '/') {
    content = (
      <IndexPage navigate={navigate} />
    );
  } else if (page === '/the-beatles') {
    content = (
      <ArtistPage
        artist={{
          id: 'the-beatles',
          name: 'The Beatles',
        }}
      />
    );
  }
  return (
    <Layout isPending={isPending}>
      {content}
    </Layout>
  );
}

function BigSpinner() {
  return <h2>🌀 Loading...</h2>;
}
```

```js
export default function Layout({ children, isPending }) {
  return (
    <div className="layout">
      <section className="header" style={{
        opacity: isPending ? 0.7 : 1
      }}>
        Music Browser
      </section>
      <main>
        {children}
      </main>
    </div>
  );
}
```

```js
export default function IndexPage({ navigate }) {
  return (
    <button onClick={() => navigate('/the-beatles')}>
      Open The Beatles artist page
    </button>
  );
}
```

```js
import { Suspense } from 'react';
import Albums from './Albums.js';
import Biography from './Biography.js';
import Panel from './Panel.js';

export default function ArtistPage({ artist }) {
  return (
    <>
      <h1>{artist.name}</h1>
      <Biography artistId={artist.id} />
      <Suspense fallback={<AlbumsGlimmer />}>
        <Panel>
          <Albums artistId={artist.id} />
        </Panel>
      </Suspense>
    </>
  );
}

function AlbumsGlimmer() {
  return (
    <div className="glimmer-panel">
      <div className="glimmer-line" />
      <div className="glimmer-line" />
      <div className="glimmer-line" />
    </div>
  );
}
```

```js
import {use} from 'react';
import { fetchData } from './data.js';

export default function Albums({ artistId }) {
  const albums = use(fetchData(`/${artistId}/albums`));
  return (
    <ul>
      {albums.map(album => (
        <li key={album.id}>
          {album.title} ({album.year})
        </li>
      ))}
    </ul>
  );
}
```

```js
import {use} from 'react';
import { fetchData } from './data.js';

export default function Biography({ artistId }) {
  const bio = use(fetchData(`/${artistId}/bio`));
  return (
    <section>
      <p className="bio">{bio}</p>
    </section>
  );
}
```

```js
export default function Panel({ children }) {
  return (
    <section className="panel">
      {children}
    </section>
  );
}
```

```js
// Note: the way you would do data fetching depends on
// the framework that you use together with Suspense.
// Normally, the caching logic would be inside a framework.

let cache = new Map();

export function fetchData(url) {
  if (!cache.has(url)) {
    cache.set(url, getData(url));
  }
  return cache.get(url);
}

async function getData(url) {
  if (url === '/the-beatles/albums') {
    return await getAlbums();
  } else if (url === '/the-beatles/bio') {
    return await getBio();
  } else {
    throw Error('Not implemented');
  }
}

async function getBio() {
  // Add a fake delay to make waiting noticeable.
  await new Promise(resolve => {
    setTimeout(resolve, 500);
  });

  return `The Beatles were an English rock band,
    formed in Liverpool in 1960, that comprised
    John Lennon, Paul McCartney, George Harrison
    and Ringo Starr.`;
}

async function getAlbums() {
  // Add a fake delay to make waiting noticeable.
  await new Promise(resolve => {
    setTimeout(resolve, 3000);
  });
}
```

--------------------------------

### Render Hello World with ReactDOM

Source: https://github.com/jeanduplessis/react.dev/blob/main/public/html/single-file-example.html

This snippet demonstrates how to render a simple 'Hello, world!' heading into an HTML element with the ID 'root' using ReactDOM in a React application. It's a foundational example for setting up a basic React component rendering.

```JavaScript
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );
```

--------------------------------

### Complete React Functional Component App Example

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/Component.md

A full example of the App component demonstrating the usage of the refactored ChatRoom functional component. This snippet shows how the App manages room selection and component visibility.

```javascript
import { useState } from 'react';
import ChatRoom from './ChatRoom.js';

export default function App() {
  const [roomId, setRoomId] = useState('general');
  const [show, setShow] = useState(false);
  return (
    <>
      <label>
        Choose the chat room:{' '}
        <select
          value={roomId}
          onChange={e => setRoomId(e.target.value)}
        >
          <option value="general">general</option>
```

--------------------------------

### Full React Application Structure Example

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react-dom/client/createRoot.md

A comprehensive example showcasing the typical structure of a React application, including the `public/index.html` entry point, `src/index.js` for rendering the root, and `src/App.js` defining a main component with state. This illustrates how different parts of a React project integrate.

```html
<!DOCTYPE html>
<html>
  <head><title>My app</title></head>
  <body>
    <!-- This is the DOM node -->
    <div id="root"></div>
  </body>
</html>
```

```js
import { createRoot } from 'react-dom/client';
import App from './App.js';
import './styles.css';

const root = createRoot(document.getElementById('root'));
root.render(<App />);
```

```js
import { useState } from 'react';

export default function App() {
  return (
    <>
      <h1>Hello, world!</h1>
      <Counter />
    </>
  );
}

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

--------------------------------

### Full React Application Example with startTransition and Suspense

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/Suspense.md

A comprehensive example of a React application integrating `startTransition` for smooth navigation, `Suspense` for declarative loading states, and custom components for a music browser UI. It showcases how different parts of a React application interact to provide a seamless user experience during data fetching and routing.

```JavaScript
import { Suspense, startTransition, useState } from 'react';
import IndexPage from './IndexPage.js';
import ArtistPage from './ArtistPage.js';
import Layout from './Layout.js';

export default function App() {
  return (
    <Suspense fallback={<BigSpinner />}>
      <Router />
    </Suspense>
  );
}

function Router() {
  const [page, setPage] = useState('/');

  function navigate(url) {
    startTransition(() => {
      setPage(url);
    });
  }

  let content;
  if (page === '/') {
    content = (
      <IndexPage navigate={navigate} />
    );
  } else if (page === '/the-beatles') {
    content = (
      <ArtistPage
        artist={{
          id: 'the-beatles',
          name: 'The Beatles',
        }}
      />
    );
  }
  return (
    <Layout>
      {content}
    </Layout>
  );
}

function BigSpinner() {
  return <h2>🌀 Loading...</h2>;
}
```

```JavaScript
export default function Layout({ children }) {
  return (
    <div className="layout">
      <section className="header">
        Music Browser
      </section>
      <main>
        {children}
      </main>
    </div>
  );
}
```

```JavaScript
export default function IndexPage({ navigate }) {
  return (
    <button onClick={() => navigate('/the-beatles')}>
      Open The Beatles artist page
    </button>
  );
}
```

```JavaScript
import { Suspense } from 'react';
import Albums from './Albums.js';
import Biography from './Biography.js';
import Panel from './Panel.js';

export default function ArtistPage({ artist }) {
  return (
    <>
      <h1>{artist.name}</h1>
      <Biography artistId={artist.id} />
      <Suspense fallback={<AlbumsGlimmer />}>
        <Panel>
          <Albums artistId={artist.id} />
        </Panel>
      </Suspense>
    </>
  );
}

function AlbumsGlimmer() {
  return (
    <div className="glimmer-panel">
      <div className="glimmer-line" />
      <div className="glimmer-line" />
      <div className="glimmer-line" />
    </div>
  );
}
```

```JavaScript
import {use} from 'react';
import { fetchData } from './data.js';

export default function Albums({ artistId }) {
  const albums = use(fetchData(`/${artistId}/albums`));
  return (
    <ul>
      {albums.map(album => (
        <li key={album.id}>
          {album.title} ({album.year})
        </li>
      ))}
    </ul>
  );
}
```

```JavaScript
import {use} from 'react';
import { fetchData } from './data.js';

export default function Biography({ artistId }) {
  const bio = use(fetchData(`/${artistId}/bio`));
  return (
    <section>
      <p className="bio">{bio}</p>
    </section>
  );
}
```

```JavaScript
export default function Panel({ children }) {
  return (
    <section className="panel">
      {children}
    </section>
  );
}
```

```JavaScript
// Note: the way you would do data fetching depends on
// the framework that you use together with Suspense.
// Normally, the caching logic would be inside a framework.

let cache = new Map();

export function fetchData(url) {
  if (!cache.has(url)) {
    cache.set(url, getData(url));
  }
  return cache.get(url);
}

async function getData(url) {
  if (url === '/the-beatles/albums') {
    return await getAlbums();
  } else if (url === '/the-beatles/bio') {
    return await getBio();
  } else {
    throw Error('Not implemented');
  }
}

async function getBio() {
  // Add a fake delay to make waiting noticeable.
  await new Promise(resolve => {
    setTimeout(resolve, 500);
  });

  return `The Beatles were an English rock band, \n`
}
```

--------------------------------

### Complete React Context Example with `use` Hook and Styling

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/use.md

This comprehensive example demonstrates the full usage of React's `use` Hook for context management. It includes `createContext`, a `ThemeContext.Provider`, and multiple components (`MyApp`, `Form`, `Panel`, `Button`) that consume the context, along with accompanying CSS for styling the components based on the theme.

```js
import { createContext, use } from 'react';

const ThemeContext = createContext(null);

export default function MyApp() {
  return (
    <ThemeContext value="dark">
      <Form />
    </ThemeContext>
  )
}

function Form() {
  return (
    <Panel title="Welcome">
      <Button show={true}>Sign up</Button>
      <Button show={false}>Log in</Button>
    </Panel>
  );
}

function Panel({ title, children }) {
  const theme = use(ThemeContext);
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  )
}

function Button({ show, children }) {
  if (show) {
    const theme = use(ThemeContext);
    const className = 'button-' + theme;
    return (
      <button className={className}>
        {children}
      </button>
    );
  }
  return false
}
```

```css
.panel-light,
.panel-dark {
  border: 1px solid black;
  border-radius: 4px;
  padding: 20px;
}
.panel-light {
  color: #222;
  background: #fff;
}

.panel-dark {
  color: #fff;
  background: rgb(23, 32, 42);
}

.button-light,
.button-dark {
  border: 1px solid #777;
  padding: 5px;
  margin-right: 10px;
  margin-top: 10px;
}

.button-dark {
  background: #222;
  color: #fff;
}

.button-light {
  background: #fff;
  color: #222;
}
```

--------------------------------

### Full React Context Example: Page Structure with Headings and Sections

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/passing-data-deeply-with-context.md

A comprehensive example demonstrating the interaction between `Page`, `Section`, `Heading`, and `LevelContext` components to manage heading levels using React Context. This setup shows how context is consumed but highlights that it's not yet *provided*, leading to all headings defaulting to level 1.

```js
import Heading from './Heading.js';
import Section from './Section.js';

export default function Page() {
  return (
    <Section level={1}>
      <Heading>Title</Heading>
      <Section level={2}>
        <Heading>Heading</Heading>
        <Heading>Heading</Heading>
        <Heading>Heading</Heading>
        <Section level={3}>
          <Heading>Sub-heading</Heading>
          <Heading>Sub-heading</Heading>
          <Heading>Sub-heading</Heading>
          <Section level={4}>
            <Heading>Sub-sub-heading</Heading>
            <Heading>Sub-sub-heading</Heading>
            <Heading>Sub-sub-heading</Heading>
          </Section>
        </Section>
      </Section>
    </Section>
  );
}
```

```js
export default function Section({ children }) {
  return (
    <section className="section">
      {children}
    </section>
  );
}
```

```js
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';

export default function Heading({ children }) {
  const level = useContext(LevelContext);
  switch (level) {
    case 1:
      return <h1>{children}</h1>;
    case 2:
      return <h2>{children}</h2>;
    case 3:
      return <h3>{children}</h3>;
    case 4:
      return <h4>{children}</h4>;
    case 5:
      return <h5>{children}</h5>;
    case 6:
      return <h6>{children}</h6>;
    default:
      throw Error('Unknown level: ' + level);
  }
}
```

```js
import { createContext } from 'react';

export const LevelContext = createContext(1);
```

```css
.section {
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
  border: 1px solid #aaa;
}
```

--------------------------------

### Complete React Context API Example for Dynamic Heading Levels

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/passing-data-deeply-with-context.md

A comprehensive example demonstrating the use of React Context API to dynamically determine heading levels. This setup includes a main Page component, a Section component providing the 'level' context, a Heading component consuming the context, and the LevelContext definition itself, along with basic styling.

```js
import Heading from './Heading.js';
import Section from './Section.js';

export default function Page() {
  return (
    <Section level={1}>
      <Heading>Title</Heading>
      <Section level={2}>
        <Heading>Heading</Heading>
        <Heading>Heading</Heading>
        <Heading>Heading</Heading>
        <Section level={3}>
          <Heading>Sub-heading</Heading>
          <Heading>Sub-heading</Heading>
          <Heading>Sub-heading</Heading>
          <Section level={4}>
            <Heading>Sub-sub-heading</Heading>
            <Heading>Sub-sub-heading</Heading>
            <Heading>Sub-sub-heading</Heading>
          </Section>
        </Section>
      </Section>
    </Section>
  );
}
```

```js
import { LevelContext } from './LevelContext.js';

export default function Section({ level, children }) {
  return (
    <section className="section">
      <LevelContext value={level}>
        {children}
      </LevelContext>
    </section>
  );
}
```

```js
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';

export default function Heading({ children }) {
  const level = useContext(LevelContext);
  switch (level) {
    case 1:
      return <h1>{children}</h1>;
    case 2:
      return <h2>{children}</h2>;
    case 3:
      return <h3>{children}</h3>;
    case 4:
      return <h4>{children}</h4>;
    case 5:
      return <h5>{children}</h5>;
    case 6:
      return <h6>{children}</h6>;
    default:
      throw Error('Unknown level: ' + level);
  }
}
```

```js
import { createContext } from 'react';

export const LevelContext = createContext(1);
```

```css
.section {
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
  border: 1px solid #aaa;
}
```

--------------------------------

### Migrate unmountComponentAtNode to root.unmount()

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/blog/2024/04/25/react-19-upgrade-guide.md

`ReactDOM.unmountComponentAtNode` is removed in React 19. Components should now be unmounted using the `root.unmount()` method obtained from `createRoot` or `hydrateRoot`. This snippet provides the migration example and a codemod command.

```JavaScript
// Before
unmountComponentAtNode(document.getElementById('root'));

// After
root.unmount();
```

```Bash
npx codemod@latest react/19/replace-reactdom-render
```

--------------------------------

### Create a new React project with Rsbuild

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/build-a-react-app-from-scratch.md

This command initializes a new React application using Rsbuild, an Rspack-powered build tool. Rsbuild provides a seamless development experience with carefully tuned defaults and performance optimizations, including built-in support for React features like fast refresh and JSX.

```bash
npx create-rsbuild --template react
```

--------------------------------

### Create a new React Router Project

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/creating-a-react-app.md

Run this command to set up a new project using React Router, a popular routing library that can be paired with Vite to form a full-stack React framework. It emphasizes standard Web APIs and offers ready-to-deploy templates.

```shell
npx create-react-router@latest
```

--------------------------------

### Custom Naming for React Event Handler Props (onSmash Example)

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/responding-to-events.md

Illustrates that while built-in HTML elements require standard browser event names (like 'onClick'), custom React components can name their event handler props any way they like, typically starting with 'on' followed by a capital letter. This example uses 'onSmash' as a custom prop name for a Button component.

```js
function Button({ onSmash, children }) {
  return (
    <button onClick={onSmash}>
      {children}
    </button>
  );
}

export default function App() {
  return (
    <div>
      <Button onSmash={() => alert('Playing!')}>
        Play Movie
      </Button>
      <Button onSmash={() => alert('Uploading!')}>
        Upload Image
      </Button>
    </div>
  );
}
```

```css
button { margin-right: 10px; }
```

--------------------------------

### Initial React Root Rendering (Clears HTML)

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/add-react-to-an-existing-project.md

This code snippet demonstrates an initial approach to rendering a React component by clearing the entire document body and then rendering a new root. This method is generally not recommended for integrating React into existing HTML as it destroys all existing content.

```js
import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);
```

--------------------------------

### Basic Syntax for startTransition

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/startTransition.md

Illustrates the fundamental syntax for calling `startTransition` with an action function.

```js
startTransition(action)
```

--------------------------------

### Example: Scrolling an image into view using useRef

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/useRef.md

Illustrates how to scroll a specific image within a list into the viewport. It uses useRef to get a reference to the list container and then querySelectorAll to find the target image before calling scrollIntoView().

```js
import { useRef } from 'react';

export default function CatFriends() {
  const listRef = useRef(null);

  function scrollToIndex(index) {
    const listNode = listRef.current;
    // This line assumes a particular DOM structure:
    const imgNode = listNode.querySelectorAll('li > img')[index];
    imgNode.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest',
      inline: 'center'
    });
  }

  return (
    <>
      <nav>
        <button onClick={() => scrollToIndex(0)}>
          Neo
        </button>
        <button onClick={() => scrollToIndex(1)}>
          Millie
        </button>
        <button onClick={() => scrollToIndex(2)}>
          Bella
        </button>
      </nav>
      <div>
        <ul ref={listRef}>
          <li>
            <img
              src="https://placecats.com/neo/300/200"
              alt="Neo"
            />
          </li>
          <li>
            <img
              src="https://placecats.com/millie/200/200"
              alt="Millie"
            />
          </li>
          <li>
            <img
              src="https://placecats.com/bella/199/200"
              alt="Bella"
            />
          </li>
        </ul>
      </div>
    </>
  );
}
```

```css
div {
  width: 100%;
  overflow: hidden;
}

nav {
  text-align: center;
}

button {
  margin: .25rem;
}

ul,
li {
  list-style: none;
  white-space: nowrap;
}

li {
  display: inline;
  padding: 0.5rem;
}
```

--------------------------------

### Initialize React Application Root

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react-dom/client/createRoot.md

Demonstrates how to set up the initial React root using `createRoot` from `react-dom/client` and render the main `App` component into a specific DOM element. This code is typically executed once at application startup.

```js
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);
```

--------------------------------

### Create Complete React Stopwatch with Start and Stop Using Refs

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/referencing-values-with-refs.md

This comprehensive React stopwatch example demonstrates how to implement both start and stop functionalities by combining `useState` for rendering data and `useRef` for non-rendering data. It uses `useRef` to store the `setInterval` ID, allowing `clearInterval` to be called correctly when the 'Stop' button is pressed, preventing memory leaks and ensuring proper timer management.

```js
import { useState, useRef } from 'react';

export default function Stopwatch() {
  const [startTime, setStartTime] = useState(null);
  const [now, setNow] = useState(null);
  const intervalRef = useRef(null);

  function handleStart() {
    setStartTime(Date.now());
    setNow(Date.now());

    clearInterval(intervalRef.current);
    intervalRef.current = setInterval(() => {
      setNow(Date.now());
    }, 10);
  }

  function handleStop() {
    clearInterval(intervalRef.current);
  }

  let secondsPassed = 0;
  if (startTime != null && now != null) {
    secondsPassed = (now - startTime) / 1000;
  }

  return (
    <>
      <h1>Time passed: {secondsPassed.toFixed(3)}</h1>
      <button onClick={handleStart}>
        Start
      </button>
      <button onClick={handleStop}>
        Stop
      </button>
    </>
  );
}
```

--------------------------------

### Define Product Data Array for List Rendering in React

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/index.md

Provides an example of a JavaScript array containing objects, each representing a product with a title and a unique ID. This array serves as the data source for rendering dynamic lists of items.

```js
const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];
```

--------------------------------

### React `use(resource)` API Reference

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/use.md

Detailed documentation for the `use` API, including its purpose, parameters, return values, and important caveats regarding its usage with Promises, Context, Suspense, Error Boundaries, and Server/Client Components.

```APIDOC
use(resource):
  Description: Call `use` in your component to read the value of a resource like a Promise or context.
  Parameters:
    resource:
      Type: Promise | context
      Description: This is the source of the data you want to read a value from.
  Returns:
    Type: any (resolved Promise value or context value)
    Description: The value that was read from the resource.
  Caveats:
    - The `use` API must be called inside a Component or a Hook.
    - When fetching data in a Server Component, prefer `async` and `await` over `use`. `async` and `await` pick up rendering from the point where `await` was invoked, whereas `use` re-renders the component after the data is resolved.
    - Prefer creating Promises in Server Components and passing them to Client Components over creating Promises in Client Components. Promises created in Client Components are recreated on every render. Promises passed from a Server Component to a Client Component are stable across re-renders.
```

--------------------------------

### Implement Counter with React useState Hook

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/blog/2023/03/16/introducing-react-dev.md

This example demonstrates how to use the `useState` Hook in React to manage a numerical state variable. Clicking the button increments the `count` state, showcasing basic state updates for numbers.

```javascript
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>
  );
}
```

--------------------------------

### `preinit(href, options)` API Reference

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react-dom/preinit.md

Detailed API documentation for the `preinit` function, including its parameters, return value, and important caveats.

```APIDOC
preinit(href, options)
  Parameters:
    href: string - The URL of the resource you want to download and execute.
    options: object - Contains the following properties:
      as: string (required) - The type of resource. Possible values: `script`, `style`.
      precedence: string (required with stylesheets) - Says where to insert the stylesheet relative to others. Possible values: `reset`, `low`, `medium`, `high`.
      crossOrigin: string - The CORS policy to use. Possible values: `anonymous`, `use-credentials`.
      integrity: string - A cryptographic hash of the resource, to verify its authenticity.
      nonce: string - A cryptographic nonce to allow the resource when using a strict Content Security Policy.
      fetchPriority: string - Suggests a relative priority for fetching the resource. Possible values: `auto` (the default), `high`, `low`.
  Returns:
    nothing
  Caveats:
    Multiple calls to `preinit` with the same `href` have the same effect as a single call.
    In the browser, you can call `preinit` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
    In server-side rendering or when rendering Server Components, `preinit` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
```

--------------------------------

### React: Simple Search UI (No Focus Functionality)

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/manipulating-the-dom-with-refs.md

This React example presents a basic user interface with a 'Search' button and an input field. This initial setup only renders the elements and does not include any logic to programmatically focus the input field when the button is clicked.

```javascript
export default function Page() {
  return (
    <>
      <nav>
        <button>Search</button>
      </nav>
      <input
        placeholder="Looking for something?"
      />
    </>
  );
}
```

```css
button { display: block; margin-bottom: 10px; }
```

--------------------------------

### Defining a basic React functional component

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/index.md

Illustrates the fundamental structure of a React component as a JavaScript function that returns JSX markup, creating a simple button.

```js
function MyButton() {
  return (
    <button>I'm a button</button>
  );
}
```

--------------------------------

### Initialize React State for Stopwatch Time Tracking

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/referencing-values-with-refs.md

This snippet shows the initial setup of React state variables, `startTime` and `now`, which are used to track the start time and current time for the stopwatch. These variables are kept in state because their changes directly affect the component's rendering.

```js
const [startTime, setStartTime] = useState(null);
const [now, setNow] = useState(null);
```

--------------------------------

### `useEffect` Hook API Reference

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/useEffect.md

Detailed API documentation for the `useEffect` React Hook, including its parameters (`setup` and `dependencies`), return value, and important caveats for proper usage and common pitfalls.

```APIDOC
useEffect(setup, dependencies?)
  Parameters:
    setup: The function with your Effect's logic. Your setup function may also optionally return a cleanup function. When your component is added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. After your component is removed from the DOM, React will run your cleanup function.
    dependencies (optional): The list of all reactive values referenced inside of the setup code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is configured for React, it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like [dep1, dep2, dep3]. React will compare each dependency with its previous value using the Object.is comparison. If you omit this argument, your Effect will re-run after every re-render of the component.
  Returns: undefined
  Caveats:
    - Hook: Call only at the top level of your component or your own Hooks. Cannot call inside loops or conditions.
    - Purpose: Use for synchronizing with external systems; not needed for non-synchronization tasks.
    - Strict Mode: Runs one extra development-only setup+cleanup cycle before the first real setup to stress-test cleanup logic.
    - Dependency Re-runs: Objects or functions defined inside the component can cause the Effect to re-run more often than needed. Remove unnecessary object/function dependencies, or extract state updates/non-reactive logic.
    - Visual Effects: If visual and delay is noticeable (flickering), replace useEffect with useLayoutEffect.
    - Interaction-caused Effects: React may run Effect before browser paints updated screen. If deferral is needed (e.g., alert()), use setTimeout.
    - State Updates in Effect: React may allow browser to repaint before processing state updates inside Effect. If blocking repaint is needed, replace useEffect with useLayoutEffect.
    - Client-side Only: Effects only run on the client, not during server rendering.
```

--------------------------------

### Control Checkbox State with React useState Hook

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/blog/2023/03/16/introducing-react-dev.md

This example shows how to use `useState` with a boolean state variable to manage a checkbox's checked status. The `setLiked` function updates the state based on user interaction, which then controls the text displayed below the checkbox.

```javascript
import { useState } from 'react';

export default function MyCheckbox() {
  const [liked, setLiked] = useState(true);

  function handleChange(e) {
    setLiked(e.target.checked);
  }

  return (
    <>
      <label>
        <input
          type="checkbox"
          checked={liked}
          onChange={handleChange}
        />
        I liked this
      </label>
      <p>You {liked ? 'liked' : 'did not like'} this.</p>
    </>
  );
}
```

--------------------------------

### Manage Text Input with React useState Hook

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/blog/2023/03/16/introducing-react-dev.md

This example illustrates using `useState` to manage a string state variable for a text input field. The `handleChange` function updates the state with the latest input value, allowing real-time display of the typed text.

```javascript
import { useState } from 'react';

export default function MyInput() {
  const [text, setText] = useState('hello');

  function handleChange(e) {
    setText(e.target.value);
  }

  return (
    <>
      <input value={text} onChange={handleChange} />
      <p>You typed: {text}</p>
      <button onClick={() => setText('hello')}>
        Reset
      </button>
    </>
  );
}
```

--------------------------------

### Defining and Using React Profile and Gallery Components

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/your-first-component.md

This snippet demonstrates how to define a `Profile` component that renders an image and then how to use it multiple times within a `Gallery` component. It also includes the associated CSS for styling the image.

```js
function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}
```

```css
img { margin: 0 10px 10px 0; height: 90px; }
```

--------------------------------

### Multiple Independent Counters with useState in React

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/index.md

Demonstrates how multiple instances of the same React component (`MyButton`) each maintain their own independent state when using `useState`. This example includes the main `MyApp` component rendering two `MyButton` instances and associated CSS for basic styling, highlighting state encapsulation.

```js
import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}
```

```css
button {
  display: block;
  margin-bottom: 5px;
}
```

--------------------------------

### Basic `preinit` Function Call

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react-dom/preinit.md

Demonstrates a simple call to `preinit` to eagerly fetch and evaluate a script.

```javascript
preinit("https://example.com/script.js", {as: "script"});
```

--------------------------------

### Rendering React Components into Non-React Markup with Portals

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react-dom/createPortal.md

This comprehensive example demonstrates how to use React Portals to render React components into a DOM element that is part of a non-React server-rendered page. It includes the HTML structure defining both a standard React root and a separate div for portal content, the JavaScript setup for the React application, the main App component utilizing `createPortal` to render content into the non-React element, and the associated CSS for styling. This setup allows for seamless integration of React interactivity into existing static page structures.

```html
<!DOCTYPE html>
<html>
  <head><title>My app</title></head>
  <body>
    <h1>Welcome to my hybrid app</h1>
    <div class="parent">
      <div class="sidebar">
        This is server non-React markup
        <div id="sidebar-content"></div>
      </div>
      <div id="root"></div>
    </div>
  </body>
</html>
```

```javascript
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.js';
import './styles.css';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);
```

```javascript
import { createPortal } from 'react-dom';

const sidebarContentEl = document.getElementById('sidebar-content');

export default function App() {
  return (
    <>
      <MainContent />
      {createPortal(
        <SidebarContent />,
        sidebarContentEl
      )}
    </>
  );
}

function MainContent() {
  return <p>This part is rendered by React</p>;
}

function SidebarContent() {
  return <p>This part is also rendered by React!</p>;
}
```

```css
.parent {
  display: flex;
  flex-direction: row;
}

#root {
  margin-top: 12px;
}

.sidebar {
  padding:  12px;
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-right: 12px;
}

#sidebar-content {
  margin-top: 18px;
  display: block;
  background-color: white;
}

p {
  margin: 0;
}
```

--------------------------------

### Initial React Tutorial Starter Code (App.js & styles.css)

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/tutorial-tic-tac-toe.md

This combined snippet presents the foundational code for the React tutorial. It includes the App.js file defining the 'Square' React component and the styles.css file providing the necessary styling for the application's UI elements.

```js
export default function Square() {
  return <button className="square">X</button>;
}
```

```css
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 20px;
  padding: 0;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.board-row:after {
  clear: both;
  content: '';
  display: table;
}

.status {
  margin-bottom: 10px;
}
.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}
```

--------------------------------

### Complete ShoppingList Component with Conditional Styling in React

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/index.md

A full React component example that renders a list of products, applying conditional inline styling based on a product property (`isFruit`). This snippet integrates data definition, `map()` for rendering, and demonstrates the `key` attribute and conditional styling within JSX.

```js
const products = [
  { title: 'Cabbage', isFruit: false, id: 1 },
  { title: 'Garlic', isFruit: false, id: 2 },
  { title: 'Apple', isFruit: true, id: 3 },
];

export default function ShoppingList() {
  const listItems = products.map(product =>
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen'
      }}
    >
      {product.title}
    </li>
  );

  return (
    <ul>{listItems}</ul>
  );
}
```

--------------------------------

### Handle Multiple State Variables in React Form

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/blog/2023/03/16/introducing-react-dev.md

This example demonstrates how to declare and manage multiple independent state variables (`name` and `age`) within a single React component using the `useState` Hook. It showcases a simple form where each input updates its respective state variable independently.

```javascript
import { useState } from 'react';

export default function Form() {
  const [name, setName] = useState('Taylor');
  const [age, setAge] = useState(42);

  return (
    <>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <button onClick={() => setAge(age + 1)}>
        Increment age
      </button>
      <p>Hello, {name}. You are {age}.</p>
    </>
  );
}
```

```css
button { display: block; margin-top: 10px; }
```

--------------------------------

### NPM Package Configuration for React Experimental Features

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/Activity.md

Defines the project's dependencies, including experimental React versions, and standard scripts for starting, building, and testing the application.

```json
{
  "dependencies": {
    "react": "experimental",
    "react-dom": "experimental",
    "react-scripts": "latest",
    "toastify-js": "1.12.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
```

--------------------------------

### Recover from Shell Errors with onShellError in React SSR

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react-dom/server/renderToPipeableStream.md

This example demonstrates the `onShellError` callback in `renderToPipeableStream`, which is invoked when an error occurs while rendering the shell. It allows sending a fallback HTML document (e.g., an error page or client-only rendering setup) as a last resort, distinct from the `onError` callback used for general error reporting.

```js
const { pipe } = renderToPipeableStream(<App />, {
  bootstrapScripts: ['/main.js'],
  onShellReady() {
    response.setHeader('content-type', 'text/html');
    pipe(response);
  },
  onShellError(error) {
    response.statusCode = 500;
    response.setHeader('content-type', 'text/html');
    response.send('<h1>Something went wrong</h1>'); 
  },
  onError(error) {
    console.error(error);
    logServerCrashReport(error);
  }
});
```

--------------------------------

### Define a basic React App component

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/blog/2025/02/14/sunsetting-create-react-app.md

This snippet shows a simple React component for a landing page, demonstrating how to immediately start coding with JSX and a basic structure after setting up a React app with a build tool like Create React App.

```js
export default function App() {
  return (
    <div>
      <h1>Welcome to the Admin Tool!</h1>
    </div>
  )
}
```

--------------------------------

### Create a new Next.js App

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/learn/creating-a-react-app.md

Use this command to initialize a new Next.js project with the latest App Router configuration. Next.js is a full-stack React framework maintained by Vercel, supporting various deployment options including static export.

```shell
npx create-next-app@latest
```

--------------------------------

### Complete React TodoList with optimized useReducer initializer

Source: https://github.com/jeanduplessis/react.dev/blob/main/src/content/reference/react/useReducer.md

A comprehensive example of a React TodoList component utilizing `useReducer` with an initializer function for efficient state management. It includes the `createInitialState` function for initial setup, a `reducer` for state transitions, and UI elements for user interaction, showcasing how to avoid re-creating expensive initial state.

```javascript
import TodoList from './TodoList.js';

export default function App() {
  return <TodoList username="Taylor" />;
}
```

```javascript
import { useReducer } from 'react';

function createInitialState(username) {
  const initialTodos = [];
  for (let i = 0; i < 50; i++) {
    initialTodos.push({
      id: i,
      text: username + "'s task #" + (i + 1)
    });
  }
  return {
    draft: '',
    todos: initialTodos,
  };
}

function reducer(state, action) {
  switch (action.type) {
    case 'changed_draft': {
      return {
        draft: action.nextDraft,
        todos: state.todos,
      };
    };
    case 'added_todo': {
      return {
        draft: '',
        todos: [{
          id: state.todos.length,
          text: state.draft
        }, ...state.todos]
      }
    }
  }
  throw Error('Unknown action: ' + action.type);
}

export default function TodoList({ username }) {
  const [state, dispatch] = useReducer(
    reducer,
    username,
    createInitialState
  );
  return (
    <>
      <input
        value={state.draft}
        onChange={e => {
          dispatch({
            type: 'changed_draft',
            nextDraft: e.target.value
          })
        }}
      />
      <button onClick={() => {
        dispatch({ type: 'added_todo' });
      }}>Add</button>
      <ul>
        {state.todos.map(item => (
          <li key={item.id}>
            {item.text}
          </li>
        ))}
      </ul>
    </>
  );
}
```