Не удается запустить Basic react

#javascript #html #reactjs

#javascript #HTML #reactjs

Вопрос:

Я знаю, что это глупый вопрос, но я не могу понять, где я ошибся.

Это .html файл

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>REACT JS</title>
  </head>
  <body>
    <div id="root"></div>
    <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin
    ></script>

    <script type="text/javascript" src="assets/js/main.js"></script>
  </body>
</html>
  

мой .js

 alert('alert');
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));

  

Проблема в том, что ReactDOM не закомментирован, даже alert не работает (когда я закомментировал часть react alert , все работает нормально).
Есть ли что-то еще, что я должен сделать перед использованием react.js Я новичок в react.js

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

1. Я рекомендую вам использовать create-react-app для начала работы с react. Просто запустите в своей консоли npx create-react-app your_app_name

2. Ваш код должен быть прозрачным, поскольку он содержит jsx, который браузер не понимает

3. @tmhao2005 Не могли бы вы рассказать мне, как это сделать

Ответ №1:

Если вы хотите увидеть, как React работает только с es5 стилем javascript, не используя последнюю версию javascript. Вы можете создать свой компонент с помощью React.createElement функции. Поместите следующий код в свой main.js файл:

 ReactDOM.render(
  React.createElement("h1", null, "Hello world"),
  document.getElementById("root")
);
  

Но для того, чтобы воспользоваться преимуществами использования JSX , вы можете попробовать установить демонстрационный проект с помощью create-react-app , который настраивает все для вас, вы просто пишете код, не заботясь о том, как строить.

Ответ №2:

React JS — это библиотека. Вы не сможете использовать его синтаксис и функции, если не включите саму библиотеку в свой проект. Пожалуйста, посетите https://reactjs.org/docs/add-react-to-a-website.html

Ответ №3:

Если вы изучаете React и вам нужно место для запуска react, вы можете попробовать использовать платформу, подобную Plunkr:

Вот ссылка на быструю демонстрацию react, которую я создал на plunkr: https://plnkr.co/edit/github:plnkr/starters/v1.4.0/templates/react?open=Hello.jsamp;deferRun=1amp;preview

Если вы хотите запустить react на своем компьютере разработчика с помощью create-react-app, выполните следующие действия:

  1. Сначала вам нужно установить node:https://nodejs.org/en /
  2. Создайте пустую папку с помощью командной строки (Windows) или терминала (Mac) и введите команду mkdir myreactproject
  3. Затем перейдите в только что созданную папку (myreactproject) и запустите команду create-react-app .
  4. После завершения вы можете протестировать свою программу, запустив npm start

Кроме того, поскольку вы новичок в react, я бы рекомендовал изучить его здесь, это бесплатно:

 https://scrimba.com/g/glearnreact