Блог

Главная - Вопросы по программированию - Компонент React не отображается в браузере, получая пустой экран

Компонент React не отображается в браузере, получая пустой экран

#javascript #reactjs #google-chrome

#javascript #reactjs ( реакция ) #google-chrome #reactjs

Вопрос:

 <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>

Я перепробовал все, что мог, искал множество ответов, но ни один из них не помог, я просто не могу понять, почему мой код не работает, я перепроверил свой код с кодом инструктора, передо мной все еще пустой экран, пожалуйста, помогите.

Комментарии:

1. проверьте это один раз raw.githubusercontent.com/reactjs/reactjs.org/master/static /… !

Ответ №1:

  1. Вам также нужен bable.js CDN в head теге.

  2. ReactDOM не 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. Это сработало, ваше решение сработало. Я не знаю, зачем нам нужно было также включать Babel script, но каким-то образом это сработало. Кроме того, я чувствую себя таким глупым, написав ReactDOM вместо ReactDOM. Спасибо

Ответ №2:

Я рекомендовал вам следовать подходу create-react-app, который является очень простым способом начать с reactjs.

Проверьте это.

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

Под :

Вариант настройки 2: Локальная среда разработки

Взгляните на :

Инструкции по выполнению действий локально с использованием вашего предпочтительного текстового редактора

Ответ №3:

 <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. Пожалуйста, добавьте файл библиотеки babel в раздел заголовка или скопируйте и запустите этот код.