gitea/livecode-static
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
livecode-static/docs/languages/react.html.md
yangxin 1214258379 打包好的livecode,版本v-46
2025-06-11 22:23:49 +08:00

11 KiB
Raw Blame History

React

import LiveCodes from '../../src/components/LiveCodes.tsx'; import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';

React Compiler is a build-time only tool that automatically optimizes React apps.

Please note that using React compiler with TypeScript (TSX) is also supported in LiveCodes and is documented here.

Also note that LiveCodes supports running JSX and TSX which are compiled to JavaScript using the TypeScript compiler. This was the traditional way of running React and other JSX/TSX apps in LiveCodes before React compiler support was added.

Demo:

Usage

The easiest way is to auto-render a component by exporting it as 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}

You may, however, be more explicit and render the component yourself using React DOM:

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}

:::info note

React's new JSX transform is utilized. So there is no need to import React.

// 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:

Root Element

To render the React components to a specific root 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}

Disabling Auto-rendering

To disable auto-rendering, set the 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}

Importing Modules

npm modules can be imported as described in the section about module resolution, 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}

Module imports can be customized using import maps as described in module resolution#custom-module-resolution) documentations.

Types for Imported Modules

Types for imported modules are loaded automatically (if available) to provide Intellisense, auto-completion and type information.

LiveCodes Intellisense

LiveCodes Intellisense

Moreover, you can provide custom type definitions for modules that do not have types available on npm. See Custom Types#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 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, };

:::info note

When values are imported from "./script", 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. This can use different languages/processors supported in LiveCodes including CSS, SCSS, Less, Stylus, ..etc. See style documentation 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}

CSS Modules

CSS modules are supported and are documented separately. Make sure to enable CSS modules (from style editor menu or in processors#processors) property of configuration object).

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'], };

CSS Frameworks

CSS Frameworks#css-processors) supported in LiveCodes (e.g. Tailwind CSS, UnoCSS, WindiCSS) can detect class names added in JSX. Make sure that the required utility is enabled (from style editor menu or in processors#processors) property of configuration object) and that required directives 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'], };

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 ;\n}\n`, };

Language Info

Name

react

Extensions

.react.jsx, .react-jsx

Editor

script

Compiler

React compiler, which is a babel plugin (babel-plugin-react-compiler).

Version

babel-plugin-react-compiler: v19.1.0-rc.1

Code Formatting

Using Prettier.

Custom Settings

React compiler is implemented as a babel plugin (babel-plugin-react-compiler). In addition the following babel presets are used:

Custom settings can be used to add configuration under the following keys:

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

{
  "react": {
    "disableAutoRender": true
  }
}

Starter Template

https://livecodes.io/?template=react

Links