How to use react hooks inside embedded react-CodePudding

I have embedded react in a html file, how can I use react hooks? Usually I would import them from React but how do I do it with embedded HTML?

<html>
  <body>

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

    <div id="root"></div>
    <script type="text/babel">
      const testData = { test: "hi!" };

      function App() {

        return (
          <div className="container-fluid text-center gutter">
            <div className="row content">
              <div className="col-sm-12 text-left">
                <div className="banner">
                  <img className="logo" src="tree_logo.png" alt="logo" />
                  <h1 className="title">
                    Biogeoclimetic Ecosystem Classification
                  </h1>
                </div>
              </div>
            </div>
            <div className="row content">
              <div className="col-sm-8 text-left"></div>
              <div className="col-sm-4 text-left side-panel">
                <img className="side-img" src="hierarchy.png" alt="hierchy" />
                <img className="side-img" src="edatpic.png" alt="edatope" />
                <img className="side-img" src="bc_map.png" alt="map" />
              </div>
            </div>
          </div>
        );
      }

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

CodePudding user response：

React is a global variable, so you can get hooks from React

const { useEffect } = React;

Or you can use hooks this way directly

React.useEffect(() => {}, [])

<html>
  <body>

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

    <div id="root"></div>
    <script type="text/babel">
      const testData = { test: "hi!" };
      const { useEffect } = React; //import it here

      function App() {
        //using hooks here
        useEffect(() => {
           console.log('testing hooks');
        },[])

        return (
          <div className="container-fluid text-center gutter">
            <div className="row content">
              <div className="col-sm-12 text-left">
                <div className="banner">
                  <img className="logo" src="tree_logo.png" alt="logo" />
                  <h1 className="title">
                    Biogeoclimetic Ecosystem Classification
                  </h1>
                </div>
              </div>
            </div>
            <div className="row content">
              <div className="col-sm-8 text-left"></div>
              <div className="col-sm-4 text-left side-panel">
                <img className="side-img" src="hierarchy.png" alt="hierchy" />
                <img className="side-img" src="edatpic.png" alt="edatope" />
                <img className="side-img" src="bc_map.png" alt="map" />
              </div>
            </div>
          </div>
        );
      }

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>