2
votes

Le composant React n'est pas affiché sur le navigateur, l'écran devient vide

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><!--core react library-->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><!--help us inject react into the dom-->

<title>Document</title>
</head>
<body>
    <div id="app">
       

    </div>
    <script type="text/babel">

    class App extends React.Component{
       render(){
          
            return <div>Helo</div>
        }
    }
    let divapp=document.getElementById('app')
    ReactDom.render(<App />,divapp);
    </script>
</body>
</html>

J'ai essayé tout ce que je pouvais, j'ai cherché beaucoup de réponses, mais aucune n'a aidé, je ne comprends tout simplement pas pourquoi mon code ne fonctionne pas, j'ai vérifié le code avec le code de l'instructeur, toujours J'ai un écran vide devant moi, merci de bien vouloir aider.

javascript reactjs google-chrome

1 commentaires

vérifiez ceci une fois raw.githubusercontent.com /reactjs/reactjs.org/master/static/‌… !

3 Réponses :

1
votes

Vous avez également besoin de bable.js CDN dans la balise head .
ReactDOM pas ReactDom

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><!--core react library-->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><!--help us inject react into the dom-->
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<title>Document</title>
</head>
<body>
    <div id="app">
       

    </div>
    <script type="text/babel">

    class App extends React.Component{
       render(){
          
            return <div>Helo</div>
        }
    }
    let divapp=document.getElementById('app')
    ReactDOM.render(<App />,divapp);
    </script>
</body>
</html>

1 commentaires

Cela a fonctionné, votre solution a fonctionné. Je ne sais pas pourquoi nous devions inclure le script Babel également, mais cela a fonctionné d'une manière ou d'une autre. Je me sens aussi stupide d'avoir écrit ReactDom au lieu de ReactDOM. Merci

0
votes

Je vous ai recommandé de suivre l'approche create-react-app qui est un moyen très simple et facile de commencer avec reactjs.

Vérifiez ceci.

https://reactjs.org/tutorial/tutorial.html

Sous le:

Option de configuration 2: environnement de développement local

Jetez un œil sur:

Instructions pour suivre localement en utilisant votre texte préféré éditeur

0 commentaires

0
votes

<html lang="en">
  <head>
      <meta charset="UTF-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
      <script src="https://unpkg.com/@babel/standalone/babel.min.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/babel-standalone@6.26.0/babel.js"></script>
  <title>Document</title>


  </head>
  <body>
    <script type="text/babel">
            class App extends React.Component {
              render() {

                      return <div>Helo</div>
                  }
              }
              let divapp=document.getElementById('app')
              ReactDOM.render(<App />,divapp);
    </script>
    <div id="app">    
    </div>

  </body>
  </html>

1 commentaires

Veuillez ajouter le fichier de bibliothèque babel dans la section d'en-tête ou copier et exécuter ce code.