ReactJS 'Hello World' с JSX и классами ничего не выводит в браузер - PullRequest
1 голос
/ 07 марта 2019

Я пытаюсь получить базовый jsx для отображения текста в обычном веб-браузере.Дважды щелкнув по основному html-файлу и открыв код в chrome, Firefox .....

Я следовал вместе с несколькими вступительными учебниками наэти ссылки и несколько книг.

Эта единственная, которая, казалось, касалась открытия программы в реальном веб-браузере.Проблема в том, что он не включал в себя некоторые дополнительные вещи, такие как создание классов и вещи, которые делали другие.

Не могу найти причину, по которой мой код ничего не печатает


Желаемый вывод

Здравствуйтеworld

напечатано в используемом веб-браузере (Firefox)


jsx / index.js

import React from 'react';
import { render } from 'react-dom';

class navBar extends React.Component {
    render() {
        return <div>Hello world</div>;
    }
}

render(<navBar />, document.body)

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>

        <script src="https://unpkg.com/react@16.8.4/index.js"></script>
        <script src="https://unpkg.com/react-dom@16.8.4/index.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.2/browser.min.js"></script>

        <meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
    </head>

    <body>
        <script type='text/babel' src='jsx/index.js'></script>
    </body>
</html>

Ответы [ 3 ]

1 голос
/ 07 марта 2019

Вам нужен контейнер с идентификатором 'root' в index.html, и вам нужно импортировать ReactDOM из'act-dom '.Также вы должны называть компоненты заглавной буквой (Navbar, а не navBar), что является условным обозначением.Чем ваш код должен выглядеть так:

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

class Navbar extends React.Component {
  render() {
    return <div>Hello world</div>;
  }
}

ReactDOM.render(<Navbar />, document.querySelector('#root'))
1 голос
/ 07 марта 2019

Согласно действующей документации, вы не должны использовать class/components имена, начинающиеся с небольшого регистра.

Измените navBar на NavBar и все будет хорошо.

Кроме того, вам не следует монтировать ваш компонент в тег body, так как некоторые сторонние библиотеки могут манипулировать телом страницы.

Также, пожалуйста, прочитайте предупреждение консоли и ошибки в инструменте разработчика, вы получите основные ответы оттуда.

0 голосов
/ 07 марта 2019

В jsx

Удалите операторы импорта.

Также добавьте скобки, окружающие div, в операторе возврата.

Назовите свои компоненты с помощьюзаглавная буква (NavBar вместо navBar)

Используйте ReactDOM.render

И для безопасности

Создайте Div внутри тела вашего html, чтобыСмонтируйте ваш компонент в.Это не позволит сторонним библиотекам манипулировать телом вашей страницы.

class NavBar extends React.Component {

    render() {
        return (
                <div>
                    Hello world
                </div>
        );
    }
}

ReactDOM.render(<NavBar />, document.querySelector('#root'))

В html Используйте https://unpkg.com/react@16/umd/react.development.js и https://unpkg.com/react-dom@16/umd/react-dom.development.js в качестве исходных скриптов

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>

            <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
            <script 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>
        <meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
    </head>

    <body>
        <div id="root"></div>
        <script type='text/babel' src='jsx/index.js'></script>

    </body>
</html>    
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...