打包好的livecode,版本v-46
This commit is contained in:
yangxin
302
docs/languages/react.html.md
Normal file
302
docs/languages/react.html.md
Normal file
@@ -0,0 +1,302 @@
|
||||
# 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)
|
||||
Reference in New Issue
Block a user