When using react cdn links for a site does it require the use of class components or can I use funct-CodePudding

I'm looking for a simple solution/answer for this. Planning to use this on a larger product for work and preparing myself to train others for its use.

<!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>
<script src="./scripts/button.js"></script>
</html>

CodePudding user response：

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>

CodePudding user response：

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>