React
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:
You may, however, be more explicit and render the component yourself using React DOM:
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:
- The component is exported as the default export.
- No imports from
"./script"
in markup editor. - Auto-rendering is not disabled.
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:
<div id="livecodes-app">Loading...</div>
Disabling Auto-rendering
To disable auto-rendering, set the custom settings disableAutoRender
property to true
.
{
"react": {
"disableAutoRender": true
}
}
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:
Module imports can be customized using import maps as described in module resolution documentations.
Types for Imported Modules
Types for imported modules are loaded automatically (if available) to provide Intellisense, 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 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:
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:
import "bootstrap/dist/css/bootstrap.css";
export default () => <h1 className="m-5 text-center">Hello World!</h1>;
CSS Modules
CSS modules are supported and are documented separately. Make sure to enable CSS modules (from style editor menu or in processors
property of configuration object).
Demo:
CSS Frameworks
CSS Frameworks 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
property of configuration object) and that required directives are added to the style editor.
Demo:
CSS-in-JS
CSS-in-JS libraries can be imported and used as usual.
Demo:
Language Info
Name
react
Extensions
.react.jsx
, .react-jsx
Editor
script
Compiler
React compiler, which is a babel plugin (babel-plugin-react-compiler).
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:
react
: the optiondisableAutoRender
can be set totrue
to disable auto-rendering.babel
: custom settings for babel.babel-plugin-react-compiler
: custom settings for babel-plugin-react-compiler.@babel/preset-env
: custom settings for @babel/preset-env.@babel/preset-react
: custom settings for @babel/preset-react.@babel/preset-typescript
: custom settings for @babel/preset-typescript.
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