Новый в React и не может получить ReactDOM для рендеринга компонента JavaScript - PullRequest
Новая
       46

Новый в React и не может получить ReactDOM для рендеринга компонента JavaScript

0 голосов
/ 19 сентября 2019

Я изучаю реакцию от Udemy (React - Полное руководство (включая Hooks, React Router, Redux) Максимилиана Шварцмюллера. Содержание курса 4. При написании нашего первого кода реакции Макс использует codepen.io для импорта реакции иРеактивные ссылки cdn и препроцессор babel. Я не использую codepen.io. Я импортирую препроцессор реагировать и реактив и бабель через тег script перед тегом элемента. Однако я получаю ошибку Uncaught Syntax и Uncaught Reference.ниже: -

Код HTML ниже 

    <!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="./main.css">
      </head>
    <body>

       <div id="p1"></div>


       <div class="person">
       <h1>Akshar</h1>
       <p>Your Age: 27</p>
       </div>

       <script src="./app.js"></script>
       <script 
       src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/cjs/react.development.js"> 
       </script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/cjs/react-dom- 
      server.browser.development.js"></script>
      <script type="text/babel" src="https://cdnjs.cloudflare.com/ajax/libs/babel- 
      standalone/6.26.0/babel.js"></script>
        </body>
      </html>

Код CSS ниже: - 

      .person {
      display: inline-block;
      margin: 10px;
      border: 1px solid #eee;
      box-shadow: 0 2px 2px #ccc;
      width: 200px;
      padding: 20px;
      }

Код app.js ниже: - 

    import React from 'react';
    import ReactDOM from 'react-dom';

    function Person() {
    return (
    <div class="person">
    <h1>Max</h1>
    <p>Your Age: 28</p>
    </div>
     );
    }

    ReactDOM.render(<Person/>, document.querySelector('#p1'));

1 Ответ

1 голос
/ 19 сентября 2019

Несколько вещей здесь:

  • Порядок ваших сценариев имеет значение.Браузер перестает загружать и обрабатывать ваши скрипты в порядке их поиска.<script src="./app.js"></script> должно быть в конце.https://www.innoq.com/en/blog/loading-javascript/
  • Когда вы используете React и ReactDOM из CDN, они добавляются в глобальную область (окно в браузерах).Вы не используете import React from 'react'; и import ReactDOM from 'react-dom';.Вам просто нужно получить доступ к переменным напрямую.https://reactjs.org/docs/add-react-to-a-website.html

Проверьте и эту ссылку.

...