302 lines
11 KiB
Markdown
302 lines
11 KiB
Markdown
# React
|
|
|
|
import LiveCodes from '../../src/components/LiveCodes.tsx';
|
|
import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
|
|
|
|
[React Compiler](https://react.dev/learn/react-compiler) is a build-time only tool that automatically optimizes [React](https://react.dev/) apps.
|
|
|
|
Please note that using React compiler with TypeScript (TSX) is also supported in LiveCodes and is [documented here](./react-tsx.html.md).
|
|
|
|
Also note that LiveCodes supports running [JSX](./jsx.html.md) and [TSX](./tsx.html.md) which are compiled to JavaScript using the [TypeScript compiler](./typescript.html.md). This was the traditional way of running React and other JSX/TSX apps in LiveCodes before React compiler support was added.
|
|
|
|
## Demo:
|
|
|
|
<LiveCodes template="react" height="400px"></LiveCodes>
|
|
|
|
## Usage
|
|
|
|
The easiest way is to [auto-render](#auto-rendering) a component by exporting it as the [default export](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#using_the_default_export):
|
|
|
|
export const basicJsxDemo = {
|
|
react: `export default function App() {\n return <h1>Hello World!</h1>;\n}`,
|
|
};
|
|
|
|
<RunInLiveCodes
|
|
params={basicJsxDemo}
|
|
code={basicJsxDemo.jsx}
|
|
language="react"
|
|
formatCode={false}
|
|
></RunInLiveCodes>
|
|
|
|
You may, however, be more explicit and render the component yourself using [React DOM](https://react.dev/reference/react-dom/client):
|
|
|
|
export const reactDomDemo = {
|
|
react: `import { createRoot } from "react-dom/client";\n\nfunction App() {\n return <h1>Hello World!</h1>;\n}\n\nconst root = createRoot(document.querySelector("#root"));\nroot.render(<App />);`,
|
|
html: `<div id="root"></div>`,
|
|
};
|
|
|
|
<RunInLiveCodes
|
|
params={reactDomDemo}
|
|
code={reactDomDemo.jsx}
|
|
language="react"
|
|
formatCode={false}
|
|
></RunInLiveCodes>
|
|
|
|
:::info note
|
|
|
|
React's [new JSX transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) is utilized. So there is no need to import React.
|
|
|
|
```jsx
|
|
// this is not needed:
|
|
// import React from 'react';
|
|
|
|
export default function App() {
|
|
return <h1>Hello World!</h1>;
|
|
}
|
|
```
|
|
|
|
:::
|
|
|
|
### Auto-rendering
|
|
|
|
A component is rendered automatically as a React component (without having to manually use React Dom to render it) if the following conditions are met:
|
|
|
|
- The component is exported as the default export.
|
|
- No [imports from `"./script"`](#exports) in markup editor.
|
|
- Auto-rendering is not [disabled](#disabling-auto-rendering).
|
|
|
|
#### Root Element
|
|
|
|
To render the React components to a specific [root](https://react.dev/reference/react-dom/client/createRoot) DOM element use `"livecodes-app"` as the element `id`. Otherwise, if that element is not found, a new `div` element is added to `document.body` and is used as the root.
|
|
|
|
Example:
|
|
|
|
export const rootDemo = {
|
|
html: `<div id="livecodes-app">Loading...</div>`,
|
|
react: `export default function App() {\n return <h1>Hello World!</h1>;\n}`,
|
|
};
|
|
|
|
<RunInLiveCodes
|
|
params={rootDemo}
|
|
code={rootDemo.html}
|
|
language="html"
|
|
formatCode={false}
|
|
></RunInLiveCodes>
|
|
|
|
#### Disabling Auto-rendering
|
|
|
|
To disable auto-rendering, set the [custom settings](#custom-settings) `disableAutoRender` property to `true`.
|
|
|
|
export const disableAutoRenderDemo = {
|
|
markup: {
|
|
language: 'html',
|
|
content: `JSX auto-rendering is disabled. Set from Project menu → Custom Settings.`,
|
|
},
|
|
script: {
|
|
language: 'react',
|
|
content: `export default function App() {\n return <h1>Hello World!</h1>;\n}`,
|
|
},
|
|
customSettings: { react: { disableAutoRender: true } },
|
|
};
|
|
|
|
<RunInLiveCodes
|
|
config={disableAutoRenderDemo}
|
|
code={JSON.stringify(disableAutoRenderDemo.customSettings, null, 2)}
|
|
language="json"
|
|
codeTitle="Custom Settings"
|
|
formatCode={false}
|
|
></RunInLiveCodes>
|
|
|
|
### Importing Modules
|
|
|
|
npm modules can be imported as described in the section about [module resolution](../features/module-resolution.html.md), including bare module imports and importing from different CDNs. Stylesheet imports are added as `<link rel="stylesheet">` tags in the page `head`.
|
|
|
|
Example:
|
|
|
|
export const importsDemo = {
|
|
react: `import { useState, useEffect } from "react";\nimport confetti from "canvas-confetti";\nimport "bootstrap/dist/css/bootstrap.css";\n\nexport default function App() {\n const [count, setCount] = useState(0);\n\n useEffect(() => {\n if (count > 0) {\n confetti();\n }\n }, [count]);\n\n return (\n <div className="m-5 text-center">\n <p>You clicked {count} times.</p>\n <button onClick={() => setCount(count + 1)}>Click me</button>\n </div>\n );\n}\n`,
|
|
};
|
|
|
|
<RunInLiveCodes
|
|
params={importsDemo}
|
|
code={importsDemo.jsx}
|
|
language="react"
|
|
formatCode={false}
|
|
></RunInLiveCodes>
|
|
|
|
Module imports can be customized using import maps as described in [module resolution](../features/module-resolution.html.md)#custom-module-resolution) documentations.
|
|
|
|
#### Types for Imported Modules
|
|
|
|
Types for imported modules are loaded automatically (if available) to provide [Intellisense](../features/intellisense.html.md), auto-completion and type information.
|
|
|
|
|
|
|
|
|
|
|
|
Moreover, you can provide custom type definitions for modules that do not have types available on npm. See [Custom Types](../features/intellisense.html.md)#custom-types) for details.
|
|
|
|
### Exports
|
|
|
|
Values exported from script editor (default or named) can be imported in the markup editor by importing from `"./script"` (with no extension).
|
|
|
|
This can be useful, for example, when using [MDX](./mdx.html.md) to import components exported form JSX.
|
|
|
|
Demo:
|
|
|
|
export const exportsDemo = {
|
|
mdx: `import Greeting from "./script";\n\n<Greeting name="MDX" />\n`,
|
|
react: `export default function(props) {\n return <h1>Greeting from {props.name}!</h1>;\n}\n`,
|
|
};
|
|
|
|
<LiveCodes params={exportsDemo}></LiveCodes>
|
|
|
|
:::info note
|
|
|
|
When values are imported from `"./script"`, [auto-rendering](#auto-rendering) is disabled, because it is assumed that you want to take control over component rendering.
|
|
|
|
:::
|
|
|
|
### Styles
|
|
|
|
CSS can be applied to the component using various ways:
|
|
|
|
#### Style Editor
|
|
|
|
Styles added in the style editor is applied globally to the [result page](../features/result.html.md). This can use different **languages/processors** supported in LiveCodes including CSS, SCSS, Less, Stylus, ..etc. See [style documentation](../features/css.html.md) for more details.
|
|
|
|
And of course, styles and stylesheets added in markup editor are also applied globally.
|
|
|
|
#### Importing Stylesheets
|
|
|
|
Stylesheets imported in script editor are added as `<link rel="stylesheet">` tags in the page `head`.
|
|
The stylesheet URL can be an absolute URL or a path in the npm package. The URL has to end with `".css"`.
|
|
|
|
example:
|
|
|
|
export const stylesDemo = {
|
|
react: `import "bootstrap/dist/css/bootstrap.css";\n\nexport default () => <h1 className="m-5 text-center">Hello World!</h1>;\n`,
|
|
};
|
|
|
|
<RunInLiveCodes
|
|
params={stylesDemo}
|
|
code={stylesDemo.react}
|
|
language="react"
|
|
formatCode={false}
|
|
></RunInLiveCodes>
|
|
|
|
#### CSS Modules
|
|
|
|
CSS modules are supported and are [documented separately](./cssmodules.html.md). Make sure to enable CSS modules (from style editor menu or in [`processors`](../configuration/configuration-object.html.md)#processors) property of [configuration object](../configuration/configuration-object.html.md)).
|
|
|
|
Demo:
|
|
|
|
export const cssModulesDemo = {
|
|
activeEditor: 'script',
|
|
style: { language: 'css', content: `.title {\n color: green;\n font-family: sans-serif;\n}\n` },
|
|
script: {
|
|
language: 'react',
|
|
content: `import classes from './style.module.css';\n\nexport default function() {\n return <h1 className={classes.title}>Hello, CSS Modules!</h1>;\n}\n`,
|
|
},
|
|
processors: ['cssmodules'],
|
|
};
|
|
|
|
<LiveCodes config={cssModulesDemo}></LiveCodes>
|
|
|
|
#### CSS Frameworks
|
|
|
|
[CSS Frameworks](../features/css.html.md)#css-processors) supported in LiveCodes (e.g. [Tailwind CSS](./tailwindcss.html.md), [UnoCSS](./unocss.html.md), [WindiCSS](./windicss.html.md)) can detect class names added in JSX. Make sure that the required utility is enabled (from style editor menu or in [`processors`](../configuration/configuration-object.html.md)#processors) property of [configuration object](../configuration/configuration-object.html.md)) and that required [directives](https://tailwindcss.com/docs/functions-and-directives#tailwind) are added to the style editor.
|
|
|
|
Demo:
|
|
|
|
export const tailwindcssDemo = {
|
|
activeEditor: 'script',
|
|
style: {
|
|
language: 'css',
|
|
content: `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n`,
|
|
},
|
|
script: {
|
|
language: 'react',
|
|
content: `export default function() {\n return <h1 className="text-3xl font-bold text-gray-500 text-center m-4">Hello, Tailwind CSS!</h1>;\n}\n`,
|
|
},
|
|
processors: ['tailwindcss'],
|
|
};
|
|
|
|
<LiveCodes config={tailwindcssDemo}></LiveCodes>
|
|
|
|
#### CSS-in-JS
|
|
|
|
CSS-in-JS libraries can be imported and used as usual.
|
|
|
|
Demo:
|
|
|
|
export const styledComponentsDemo = {
|
|
react: `import styled from 'styled-components';\n\nconst Title = styled.h1\`\n text-align: center;\n font-family: sans-serif;\n color: palevioletred;\n\`;\n\nexport default function () {\n return <Title>Hello, styled-components!</Title>;\n}\n`,
|
|
};
|
|
|
|
<LiveCodes params={styledComponentsDemo}></LiveCodes>
|
|
|
|
## Language Info
|
|
|
|
### Name
|
|
|
|
`react`
|
|
|
|
### Extensions
|
|
|
|
`.react.jsx`, `.react-jsx`
|
|
|
|
### Editor
|
|
|
|
`script`
|
|
|
|
## Compiler
|
|
|
|
[React compiler](https://react.dev/learn/react-compiler), which is a [babel](./babel.html.md) plugin ([babel-plugin-react-compiler](https://www.npmjs.com/package/babel-plugin-react-compiler)).
|
|
|
|
### Version
|
|
|
|
`babel-plugin-react-compiler`: v19.1.0-rc.1
|
|
|
|
## Code Formatting
|
|
|
|
Using [Prettier](https://prettier.io/).
|
|
|
|
## Custom Settings
|
|
|
|
React compiler is implemented as a babel plugin ([babel-plugin-react-compiler](https://www.npmjs.com/package/babel-plugin-react-compiler)). In addition the following babel presets are used:
|
|
|
|
- [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env)
|
|
- [@babel/preset-react](https://babeljs.io/docs/en/babel-preset-react)
|
|
- [@babel/preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript)
|
|
|
|
[Custom settings](../advanced/custom-settings.html.md) can be used to add configuration under the following keys:
|
|
|
|
- `react`: the option `disableAutoRender` can be set to `true` to disable [auto-rendering](#auto-rendering).
|
|
- `babel`: custom settings for [babel](https://babeljs.io/docs/options).
|
|
- `babel-plugin-react-compiler`: custom settings for [babel-plugin-react-compiler](https://www.npmjs.com/package/babel-plugin-react-compiler).
|
|
- `@babel/preset-env`: custom settings for [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env).
|
|
- `@babel/preset-react`: custom settings for [@babel/preset-react](https://babeljs.io/docs/en/babel-preset-react).
|
|
- `@babel/preset-typescript`: custom settings for [@babel/preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript).
|
|
|
|
Please note that custom settings should be valid JSON (i.e. functions are not allowed).
|
|
|
|
**Example:**
|
|
|
|
```json title="Custom Settings"
|
|
{
|
|
"react": {
|
|
"disableAutoRender": true
|
|
}
|
|
}
|
|
```
|
|
|
|
## Starter Template
|
|
|
|
https://livecodes.io/?template=react
|
|
|
|
## Links
|
|
|
|
- [React](https://react.dev/)
|
|
- [JSX](https://react.dev/learn/writing-markup-with-jsx)
|
|
- [React compiler](https://react.dev/learn/react-compiler) |