score:0

yes, you can use class components, functional components, and react hooks. but you can't use jsx syntax directly without using this script <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>.

you can use react.createelement() to create your ui that is natively supported by browsers. for more info, see add react to a website

const e = react.createelement;

function text({ children }) {
  react.usememo(() => {
    console.log('text renders');
  }, [children]);
  return e('p', { children });
}

class button extends react.component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return e(text, { children: 'you liked this.' });
    }

    return e('button', { onclick: () => this.setstate({ liked: true }) }, 'like');
  }
}

const domcontainer = document.queryselector('#root');
reactdom.render(e(button), domcontainer);
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>playground</title>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <style>
  </style>
</head>

<body>
  <div id="root"></div>
</body>

</html>

score:1

example of using functional components and hooks from cdn version of react.js

// get a hook function
const {usestate} = react;

const example = ({title}) => {
  const [count, setcount] = usestate(0);

  return (
    <div>
      <p>{title}</p>
      <p>you clicked {count} times</p>
      <button onclick={() => setcount(count + 1)}>
        click me
      </button>
    </div>
  );
};

// render it
reactdom.render(
  <example title="example using hooks:" />,
  document.getelementbyid("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>


Related Query

More Query from same tag