Forum : React: pas d'affichage dans Chrome

Bonjour,
j'essaie de suivre le tuto de la chaine:
[(https://grafikart.fr/tutoriels/tp-react-convertisseur-1318#autoplay)]
A 3min 21 on doit afficher le composant dans le DOM. Pour moi ça ne fonctionne pas. La page reste blanche.

Voici mon code:

<!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>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
      defer
    />
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
      defer
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      defer
    ></script>
    <script src="app.js" defer type="text/babel"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

function BoilingVerdict({ celsius }) {
  if (celsius >= 100) {
    return <div className="alert alert-success">l'eau bout.</div>;
  }
  return <div className="alert alert-info">l'eau ne bout pas.</div>;
}

reactDOM.render(
  <BoilingVerdict celsius={50} />,
  document.getElementById('app')
);

Voici l'erreur qui s'affiche dans la console:
[(https://i.stack.imgur.com/qgJn1.png)]

React: pas d'affichage dans Chrome

1 réponse