@dunggramer/jsx-runtime

JSX Lite

| Using JSX without React.js

Installation

npm install -D @jsx-lite/jsx-runtime
# or
yarn add -D @jsx-lite/jsx-runtime
# or
pnpm add -D @jsx-lite/jsx-runtime

Open babel.config.js or .babelrc and add the following line:

.babelrc:

...
"presets": [
    [
        "@babel/preset-react", {
            "runtime": "automatic",
            "importSource": "@jsx-lite"
        }
    ]
]
...

babel.config.js:

...
presets: [
     [
        '@babel/preset-react',
        {
          runtime: 'automatic',
          importSource: '@jsx-lite',
        },
    ],
]

Usage

Render to DOM

import { render } from "@jsx-lite/jsx-runtime";

const App = <h1>Hello, world!</h1>;
render(<App />, document.getElementById("root"));

Query Selector

    const Button = () => (
        <button
            ref={(el) => {
                if (el) {
                    el.addEventListener('click', () => {
                        alert('Hello, world!');
                    });
                }
            }}
        >Print</button>;
    )

Fragment

    const Badge = ({content}) => (
        <>
            <span>{content}</span>
        </>
    );

Children

    const Wrapper = ({children}) => (
        <div>
            {children}
        </div>
    );

    const App = () => (
        <Wrapper>
            <Badge content="Hello, world!" />
        </Wrapper>
    );

Set attribute

    const Icon = ({name, color}) => (
        <i class={`icon icon-${name}`} style={ 'color:' + color } />
    );