WebComponents.dev

JSX

Source file extensions: .jsx|tsx

Pragma is supported

By default,

let foo = <div id="foo">Hello!</div>;

will generate

var foo = React.createElement('div', { id: 'foo' }, 'Hello!');

But,using pragma (/** @jsx */) :

/** @jsx h */
let foo = <div id="foo">Hello!</div>;

will generate

var foo = h('div', { id: 'foo' }, 'Hello!');

References

Quick example

index.jsx

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

export default function MyCounter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}