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=""></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) {
    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">

  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script crossorigin src=""></script>
  <script crossorigin src=""></script>

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



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 (
      <p>you clicked {count} times</p>
      <button onclick={() => setcount(count + 1)}>
        click me

// render it
  <example title="example using hooks:" />,
<script src=""></script>
<script src=""></script>
<div id="react"></div>

Related Query

More Query from same tag