@neiroman2k

Как подключить ReactJS в существующее приложение на jQuery?

Есть приложение на jquery (админка). Хочется малой кровью начать использовать в нем ReactJS

Для теста сделал два файла
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

    <script type="text/javascript" src="./app.js"></script>
    <script>
        $(document).ready(function() {
            React.render(<App />, document.getElementById('App');
        });
    </script>
</head>
<body>
    <div id="App"></div>
</body>
</html>

app.js
class App extends React.Component {
    constructor(props) {
        super(props);
    }

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

Однако при открытии выдает две ошибки Uncaught SyntaxError: Unexpected token '<'
1. Строка 8 в app.js (Hello)
2. Строка 12 в index.html (React.render(, document.getElementById('App');)

Я иду правильным путем или что-то радикально упустил?
  • Вопрос задан
  • 74 просмотра
Решения вопроса 1
IceRD
@IceRD
Все классно, но для < App / > нужен Babel, чтобы работал JSX
jquery удалить вообще.
В обертку скрипта добавить type="text/babel"
Пример https://metanit.com/web/react/1.2.php
Без JSX https://ru.reactjs.org/docs/react-without-jsx.html
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
KickeRocK
@KickeRocK
FrontFinish
Упустили, про JSX и Babel читайте, или юзайте без JSX
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы