JSX Mini

| Using JSX without React.js

Installation

npm install -D jsx-mini
# or
yarn add -D jsx-mini
# or
pnpm add -D jsx-mini

Config

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

.babelrc:

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

babel.config.js:

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

JSX Comments

If you don’t want to configure Babel, a JSX pragma can be used to transform a single file.
Import the comments before the JSX code:

/** @jsxImportSource jsx-mini */

Usage

Render to DOM

import { render } from 'jsx-mini';

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

Query Selector

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

Fragment

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

Async Rendering

const TodoItem = async ({ id }) => {
  let api = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);
  let todo = await api.json();

  return (
    <li>
      <span>{todo.title}</span>
      <input type="checkbox" checked={todo.completed} />
    </li>
  );
};

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} />
);