JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

Trying to have
<a href="https://reactjs.org/docs/add-react-to-a-website.html">
add-react-to-a-website</a><br />

working with
<a href="https://reactjs.org/docs/hooks-overview.html">
hooks-overview</a><br />

Transformation from JSX to function calls done with
<a href="https://babeljs.io/repl/#?presets=react&code_lz=GYVwdgxgLglg9mABACwKYBt1wBQEpEDeAUIogE6pQhlIA8AJjAG4B8AEhlogO5xnr0AhLQD0jVgG4iAXyJA">Babel</a><br />

as suggested in
<a href="https://reactjs.org/docs/react-without-jsx.html">
  react-without-jsx
</a><br />


<div id="like_button_container"></div>

<div id="like_button_container2"></div>


<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

JavaScript

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);


function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = React.useState(0);

  return React.createElement(
    "div", null,
    React.createElement(
      "p", null, "You clicked ", count, " times"),
    React.createElement("button", {
    onClick: () => setCount(count + 1)
  }, "Click me"));
}

const domContainer2 = document.querySelector('#like_button_container2');
ReactDOM.render(e(Example), domContainer2);