score:1

Accepted answer

this is working alright. just changed the scripts and all for appropriate versions.

<!doctype html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggoyr0ixcbmqv3xipma34md+dh/1fq784/j6cy/ijtquohcwr7x9jvorxt2mzw1t"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <h1>app</h1>
    <div id="root"></div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

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

  <script
    src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
    crossorigin
  ></script>

  <script type="text/babel">
    class app extends react.component {
      render() {
        return (
          <div>
            <div classname="jumbotron">
              <h1 classname="display-4">
                amazing react, bootstrap and webpack
              </h1>
              <p classname="lead">created with love</p>
              <hr classname="my-4" />
              <p>
                it uses utility classes for typography and spacing to space
                content out within the larger container.
              </p>
              <p classname="lead">
                <a classname="btn btn-primary btn-lg" href="#" role="button">
                  learn more
                </a>
              </p>
            </div>
          </div>
        );
      }
    }

    reactdom.render(<app />, document.getelementbyid("root"));
  </script>
</html>

score:0

you need a react and react-dom version 16.x instead of 15.x because it is not being supported anymore.

here you can find the same issue solved.

hope this helps.


Related Query

More Query from same tag