Блог

Главная - Вопросы по программированию - Базовый код реакции не выдает никаких результатов на моем компьютере

Базовый код реакции не выдает никаких результатов на моем компьютере

#javascript #html #reactjs

Вопрос:

Простой код реакции не работает на моем компьютере.

HTML-файл выглядит следующим образом:

 <!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">
    <link rel="stylesheet" href="./style.css">
    <title>React Intro</title>
</head>
<body>
    <div class="root">

    </div>
    <script src="./App.js"></script>
</body>
</html>

Файл реакции выглядит следующим образом:

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

ReactDOM.render( <h1>Hello</h1> ,document.getElementById("root"))

Когда я запускаю HTML-файл с помощью живого сервера, ничего не отображается. В то время как «Привет» должно было отображаться.

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

1. вам нужно добавить React и ReactDOM в свой html-файл в качестве script

2. Обратитесь: reactjs.org/docs/add-react-to-a-website.html Также проверьте информацию о вавилоне

3. У вас div есть класс root без идентификатора. Переход <div class="root"> на <div id="root"> «должен» к трюку

4. вам нужно объединить свой код с библиотеками React. Видишь freecodecamp.org/news/learn-webpack-for-react-a36d4cac5060

Ответ №1:

Получение реакции на запуск

Веб-браузеры не поддерживают:

  • import если не:
    • вы явно объявляете скрипт модулем с type атрибутом
    • вы используете URL-адреса в качестве значения, из которого вы импортируете (а не имена модулей, такие как node.js)
  • JSX

Вам необходимо преобразовать ваши модули JSX в JS, которые поддерживает браузер.

Лучший способ сделать это-использовать набор инструментов, как описано в документации React.

(Я настоятельно рекомендую выбрать вариант 2 и использовать Node.js упаковщик. Вариант 1 (Бабель на стороне клиента) имеет некоторые недостатки (например, отсутствие удобной поддержки модулей).

  • Убедитесь, что у вас есть последняя версия Node.js установлен.
  • Бежать npx create-react-app my-app
  • cd my-app
  • npm run start

Доступны и другие варианты, такие как Посылка (которая проще, но используется реже, и, следовательно, там меньше помощи) и Next.js (что сложнее, но работает при рендеринге на стороне сервера).

Ваша опечатка

Вы также сказали <div class="root"> , а затем попытались получить к нему доступ с getElementById помощью . Дайте ему идентификатор, а не класс.

В стороне: Научитесь использовать инструменты разработчика в своем браузере. В консоли должны были появиться сообщения об ошибках, которые вы должны были указать в вопросе.

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

1. Большое спасибо. Использование npx create-react-app my-app и редактирование App.js сработало.

Метки: