### Build React App for Production

Source: https://github.com/nihgwu/react-runner/blob/master/examples/with-cra/README.md

Builds the React application for production deployment, optimizing the output in the `build` folder. This process minifies the code and includes content hashes in filenames for efficient caching.

```bash
yarn build
```

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

### Start React App Development Server

Source: https://github.com/nihgwu/react-runner/blob/master/examples/with-cra/README.md

Runs the React application in development mode, typically accessible at http://localhost:3000. It includes hot reloading for instant feedback on code changes and displays lint errors in the console.

```bash
yarn start
```

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

### Run React App Tests

Source: https://github.com/nihgwu/react-runner/blob/master/examples/with-cra/README.md

Launches the test runner in an interactive watch mode, allowing for continuous testing as code is modified. Refer to the Create React App documentation for more details on running tests.

```bash
yarn test
```

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

### Install React Runner (Yarn/NPM)

Source: https://github.com/nihgwu/react-runner/blob/master/README.md

Instructions for installing the react-runner package using either Yarn or NPM package managers.

```bash
# Yarn
yarn add react-runner

# NPM
npm install --save react-runner
```

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

### Eject Create React App Configuration

Source: https://github.com/nihgwu/react-runner/blob/master/examples/with-cra/README.md

This is a one-way operation that removes the single build dependency (like Webpack, Babel, ESLint) from the project, copying all configuration files into the project for full control. Use with caution as it cannot be undone.

```bash
yarn eject
```

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

### Install React Runner (Yarn/NPM)

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-live-runner/README.md

Instructions for installing the react-runner package using either Yarn or NPM package managers.

```bash
# Yarn
yarn add react-runner

# NPM
npm install --save react-runner
```

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

### Live Code Example with Imports

Source: https://github.com/nihgwu/react-runner/blob/master/README.md

A sample of live React code demonstrating the use of `import` statements for constants, external packages, and local files.

```js
import { A } from 'constants'
import Foo, { Bar } from 'your-pkg'
import What, { Ever } from './local-file'

export default function Demo() {
  /* render */
}
```

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

### Live Code Example with Imports

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-runner/README.md

A sample of live React code demonstrating the use of `import` statements for constants, external packages, and local files.

```js
import { A } from 'constants'
import Foo, { Bar } from 'your-pkg'
import What, { Ever } from './local-file'

export default function Demo() {
  /* render */
}
```

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

### Run Development Server (Bash)

Source: https://github.com/nihgwu/react-runner/blob/master/examples/with-next/README.md

Commands to start the Next.js development server using either npm or yarn. This allows for local development and testing of the application.

```bash
npm run dev
```

```bash
yarn dev
```

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

### Live Code Example with Imports

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-live-runner/README.md

A sample of live React code demonstrating the use of `import` statements for constants, external packages, and local files.

```js
import { A } from 'constants'
import Foo, { Bar } from 'your-pkg'
import What, { Ever } from './local-file'

export default function Demo() {
  /* render */
}
```

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

### Install React Runner (Yarn/NPM)

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-runner/README.md

Instructions for installing the react-runner package using either Yarn or NPM package managers.

```bash
# Yarn
yarn add react-runner

# NPM
npm install --save react-runner
```

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

### Run Development Server (Bash)

Source: https://github.com/nihgwu/react-runner/blob/master/website/README.md

Commands to start the Next.js development server using either npm or yarn. This allows for local development and testing of the application.

```bash
npm run dev
```

```bash
yarn dev
```

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

### Example API Route (TypeScript)

Source: https://github.com/nihgwu/react-runner/blob/master/examples/with-next/README.md

An example of an API route file within a Next.js application. This file, typically located in the 'pages/api' directory, defines an endpoint that can be accessed via HTTP.

```typescript
export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' });
}
```

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

### Start Remix App in Development Mode

Source: https://github.com/nihgwu/react-runner/blob/master/examples/with-remix/README.md

Starts the Remix application in development mode. The app rebuilds assets automatically when files change.

```sh
npm run dev
```

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

### Example API Route (TypeScript)

Source: https://github.com/nihgwu/react-runner/blob/master/website/README.md

An example of an API route file within a Next.js application. This file, typically located in the 'pages/api' directory, defines an endpoint that can be accessed via HTTP.

```typescript
export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' });
}
```

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

### Create and Configure New Remix Project

Source: https://github.com/nihgwu/react-runner/blob/master/examples/with-remix/README.md

Demonstrates creating a new Remix project and copying an existing 'app' folder into it, useful for migrating or setting up pre-configured hosting.

```sh
cd ..
npx create-remix@latest
cd my-new-remix-app
rm -rf app
cp -R ../my-old-remix-app/app app
```

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

### Build Remix App for Production

Source: https://github.com/nihgwu/react-runner/blob/master/examples/with-remix/README.md

Builds the Remix application for production deployment. This command generates optimized assets.

```sh
npm run build
```

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

### Browser Support Configuration

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-runner/README.md

Specifies the browser compatibility targets for the project, defined in a `browserslist` configuration.

```json
"browserslist": [
  "Chrome > 61",
  "Edge > 16",
  "Firefox > 60",
  "Safari > 10.1"
]
```

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

### Browser Support Configuration

Source: https://github.com/nihgwu/react-runner/blob/master/README.md

Specifies the browser compatibility targets for the project, defined in a `browserslist` configuration.

```json
"browserslist": [
  "Chrome > 61",
  "Edge > 16",
  "Firefox > 60",
  "Safari > 10.1"
]
```

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

### Browser Support Configuration

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-live-runner/README.md

Specifies the browser compatibility targets for the project, defined in a `browserslist` configuration.

```json
"browserslist": [
  "Chrome > 61",
  "Edge > 16",
  "Firefox > 60",
  "Safari > 10.1"
]
```

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

### Usage with react-live-runner (Provider)

Source: https://github.com/nihgwu/react-runner/blob/master/README.md

Demonstrates integrating `react-runner` via `react-live-runner`'s `LiveProvider` component, which encapsulates the editor, preview, and error display.

```jsx
import {
  LiveProvider,
  LiveEditor,
  LiveError,
  LivePreview,
} from 'react-live-runner'

...
<LiveProvider code={code} scope={scope}>
  <LiveEditor />
  <LivePreview />
  <LiveError />
</LiveProvider>
...
```

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

### Usage with react-live-runner (Provider)

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-live-runner/README.md

Demonstrates integrating `react-runner` via `react-live-runner`'s `LiveProvider` component, which encapsulates the editor, preview, and error display.

```jsx
import {
  LiveProvider,
  LiveEditor,
  LiveError,
  LivePreview,
} from 'react-live-runner'

...
<LiveProvider code={code} scope={scope}>
  <LiveEditor />
  <LivePreview />
  <LiveError />
</LiveProvider>
...
```

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

### Basic Usage with Runner Component

Source: https://github.com/nihgwu/react-runner/blob/master/README.md

Demonstrates how to use the `Runner` component to execute provided React code. It takes `code` and `scope` as props and can optionally use an `onRendered` callback.

```jsx
import { Runner } from 'react-runner'

const element = <Runner code={code} scope={scope} onRendered={handleRendered} />
```

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

### Usage with react-live-runner (Provider)

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-runner/README.md

Demonstrates integrating `react-runner` via `react-live-runner`'s `LiveProvider` component, which encapsulates the editor, preview, and error display.

```jsx
import {
  LiveProvider,
  LiveEditor,
  LiveError,
  LivePreview,
} from 'react-live-runner'

...
<LiveProvider code={code} scope={scope}>
  <LiveEditor />
  <LivePreview />
  <LiveError />
</LiveProvider>
...
```

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

### Basic Usage with Runner Component

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-live-runner/README.md

Demonstrates how to use the `Runner` component to execute provided React code. It takes `code` and `scope` as props and can optionally use an `onRendered` callback.

```jsx
import { Runner } from 'react-runner'

const element = <Runner code={code} scope={scope} onRendered={handleRendered} />
```

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

### Basic Usage with Runner Component

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-runner/README.md

Demonstrates how to use the `Runner` component to execute provided React code. It takes `code` and `scope` as props and can optionally use an `onRendered` callback.

```jsx
import { Runner } from 'react-runner'

const element = <Runner code={code} scope={scope} onRendered={handleRendered} />
```

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

### Usage with react-live-runner (Hooks)

Source: https://github.com/nihgwu/react-runner/blob/master/README.md

Shows how to use `react-live-runner` hooks like `useLiveRunner` for managing code state and rendering, along with a `CodeEditor` component.

```jsx
import { useLiveRunner, CodeEditor } from 'react-live-runner'

const { element, error, code, onChange } = useLiveRunner({
  initialCode,
  scope,
  transformCode,
})

...
<>
  <CodeEditor value={code} onChange={onChange}>
  <div>{element}</div>
  {error && <pre>{error}</pre>}
</>
...
```

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

### Usage with react-live-runner (Hooks)

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-live-runner/README.md

Shows how to use `react-live-runner` hooks like `useLiveRunner` for managing code state and rendering, along with a `CodeEditor` component.

```jsx
import { useLiveRunner, CodeEditor } from 'react-live-runner'

const { element, error, code, onChange } = useLiveRunner({
  initialCode,
  scope,
  transformCode,
})

...
<>
  <CodeEditor value={code} onChange={onChange}>
  <div>{element}</div>
  {error && <pre>{error}</pre>}
</>
...
```

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

### Configuring Scope for Import Statements

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-live-runner/README.md

Illustrates how to configure the `scope` object to enable `import` statements within the live code. This includes importing from packages and local files using `importCode`.

```js
import { importCode } from 'react-runner'
import * as YourPkg from 'your-pkg'

const baseScope = {
  /* base globals */
}

const scope = {
  ...baseScope,
  // scope used by import statement
  import: {
    constants: { A: 'a' },
    'your-pkg': YourPkg,
    './local-file': importCode(localFileContent, baseScope),
  },
}
```

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

### Run Remix App in Production Mode

Source: https://github.com/nihgwu/react-runner/blob/master/examples/with-remix/README.md

Runs the production-ready build of the Remix application. This command is used after the build process.

```sh
npm start
```

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

### Configuring Scope for Import Statements

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-runner/README.md

Illustrates how to configure the `scope` object to enable `import` statements within the live code. This includes importing from packages and local files using `importCode`.

```js
import { importCode } from 'react-runner'
import * as YourPkg from 'your-pkg'

const baseScope = {
  /* base globals */
}

const scope = {
  ...baseScope,
  // scope used by import statement
  import: {
    constants: { A: 'a' },
    'your-pkg': YourPkg,
    './local-file': importCode(localFileContent, baseScope),
  },
}
```

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

### Configuring Scope for Import Statements

Source: https://github.com/nihgwu/react-runner/blob/master/README.md

Illustrates how to configure the `scope` object to enable `import` statements within the live code. This includes importing from packages and local files using `importCode`.

```js
import { importCode } from 'react-runner'
import * as YourPkg from 'your-pkg'

const baseScope = {
  /* base globals */
}

const scope = {
  ...baseScope,
  // scope used by import statement
  import: {
    constants: { A: 'a' },
    'your-pkg': YourPkg,
    './local-file': importCode(localFileContent, baseScope),
  },
}
```

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

### Usage with useRunner Hook

Source: https://github.com/nihgwu/react-runner/blob/master/README.md

Shows how to utilize the `useRunner` hook for executing React code, which includes cache support. It returns the rendered `element` and any potential `error`.

```jsx
import { useRunner } from 'react-runner'

const { element, error } = useRunner({ code, scope })
```

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

### Usage with react-live-runner (Hooks)

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-runner/README.md

Shows how to use `react-live-runner` hooks like `useLiveRunner` for managing code state and rendering, along with a `CodeEditor` component.

```jsx
import { useLiveRunner, CodeEditor } from 'react-live-runner'

const { element, error, code, onChange } = useLiveRunner({
  initialCode,
  scope,
  transformCode,
})

...
<>
  <CodeEditor value={code} onChange={onChange}>
  <div>{element}</div>
  {error && <pre>{error}</pre>}
</>
...
```

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

### Direct Usage with useRunner and State

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-runner/README.md

An alternative approach using React's `useState` and `useEffect` hooks in conjunction with `react-runner`'s `useRunner` hook to manage and update live code.

```jsx
import { useState, useEffect } from 'react'
import { useRunner } from 'react-runner'

const [code, onChange] = useState(initialCode)
const { element, error } = useRunner({ code, scope })

useEffect(() => {
  onChange(initialCode)
}, [initialCode])

...
<>
  <textarea value={code} onChange={event => onChange(event.target.value)}>
  <div>{element}</div>
  {error && <pre>{error}</pre>}
</>
...
```

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

### Direct Usage with useRunner and State

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-live-runner/README.md

An alternative approach using React's `useState` and `useEffect` hooks in conjunction with `react-runner`'s `useRunner` hook to manage and update live code.

```jsx
import { useState, useEffect } from 'react'
import { useRunner } from 'react-runner'

const [code, onChange] = useState(initialCode)
const { element, error } = useRunner({ code, scope })

useEffect(() => {
  onChange(initialCode)
}, [initialCode])

...
<>
  <textarea value={code} onChange={event => onChange(event.target.value)}>
  <div>{element}</div>
  {error && <pre>{error}</pre>}
</>
...
```

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

### Direct Usage with useRunner and State

Source: https://github.com/nihgwu/react-runner/blob/master/README.md

An alternative approach using React's `useState` and `useEffect` hooks in conjunction with `react-runner`'s `useRunner` hook to manage and update live code.

```jsx
import { useState, useEffect } from 'react'
import { useRunner } from 'react-runner'

const [code, onChange] = useState(initialCode)
const { element, error } = useRunner({ code, scope })

useEffect(() => {
  onChange(initialCode)
}, [initialCode])

...
<>
  <textarea value={code} onChange={event => onChange(event.target.value)}>
  <div>{element}</div>
  {error && <pre>{error}</pre>}
</>
...
```

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

### Usage with useRunner Hook

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-live-runner/README.md

Shows how to utilize the `useRunner` hook for executing React code, which includes cache support. It returns the rendered `element` and any potential `error`.

```jsx
import { useRunner } from 'react-runner'

const { element, error } = useRunner({ code, scope })
```

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

### Usage with useRunner Hook

Source: https://github.com/nihgwu/react-runner/blob/master/packages/react-runner/README.md

Shows how to utilize the `useRunner` hook for executing React code, which includes cache support. It returns the rendered `element` and any potential `error`.

```jsx
import { useRunner } from 'react-runner'

const { element, error } = useRunner({ code, scope })
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.