REACT.jsx не отображается в браузере

avatar
Joe Pirtle Jr.
7 апреля 2018 в 23:29
933
3
0

Сейчас я изучаю React. Однако у меня куча проблем с запуском.

HTML

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

ReactDOM.render(<Person />  document.querySelector('#p1'));
.person {
    display: inline-block;
    margin: 10px;
    border: 1px solid #eee;
    box-shadow: 0 2px 2px #ccc;
    width: 200px;
    padding: 20px;
}
    <link rel="stylesheet" href="react.css">

</head>
<body>
    
    <!-- He created a div block with a class of person -->    <link rel="stylesheet" href="react.css">

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

    </div>

    <!-- He makes another div -->
    <div class="person">
            <h1>Manu</h1>
            <p>Your Age: 29</p>
        </div>
        
        <script src="react.jsx"></script>

Извините за комментарии. Я чувствую, что большая часть моей проблемы действительно сводится к источнику сценария. Всякий раз, когда я пытаюсь загрузить это на CodePen (используя Babel), он работает отлично. Я не уверен, как заставить это работать. Если я запущу это в своем браузере, я увижу...

Uncaught SyntaxError: Unexpected token <

Я пытался использовать CDN для Babel JS сэтого сайта, но если я добавлю это и изменю приведенный выше скрипт на "type="text/bable", он даже не появится.

Спасибо за помощь.

Источник
fastr.de
7 апреля 2018 в 23:36
0

ReactDOM.render(<Person /> document.querySelector('#p1')); должно быть ReactDOM.render('<Person />', document.querySelector('#p1'));

iceveda06
8 апреля 2018 в 00:09
0

есть ли что-то еще в документе или вы просто скопировали и вставили определенный раздел своего кода? Можете ли вы загрузить весь свой код на codepen или codeandbox.io и поделиться им с нами?

Ответы (3)

avatar
Mahdi P.
6 октября 2021 в 12:55
0

JSX не поддерживается браузером напрямую. Чтобы играть в React с JSX, вам нужно использовать Babel (онлайн-конвертер). Добавьте следующий <script> в основной HTML-файл.

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

И добавьте атрибут type="text/babel" в тег script, где используется добавление файла JSX. В вашем случае это будет <script type="text/babel" src="react.jsx"></script>

Источник: Попробуйте React с JSX

avatar
tenor528
8 апреля 2018 в 03:03
0

JSX не является стандартным JavaScript. Вы должны транспилировать это с помощью какого-то шага сборки (например, Babel) или загрузить в скрипт транспиляции, чтобы вы могли использовать JSX в браузере. Это было доступно пару лет назад, но я больше не могу его найти.

tenor528
8 апреля 2018 в 03:06
0

Вот ссылка на преобразователь JSX, но похоже, что React вообще больше не поддерживает этот метод. Хотя может еще сработает. shripadk.github.io/react/downloads.html#jsx-transformer.

avatar
Jon Grant
7 апреля 2018 в 23:40
0

Похоже, у вас 2 тега body; один из них в голове. Не уверен, что это то, что дает вам ошибку, но я случайно заметил это. Похоже, что сообщение об ошибке имеет отношение к случайному '<' где-то.

Joe Pirtle Jr.
7 апреля 2018 в 23:44
0

По какой-то странной причине, когда я разместил этот фрагмент HTML, он содержал 2 тега body. Однако их нет в моем текущем HTML!