У меня есть простой компонент React, который я пытаюсь включить в веб-страницу.Компонент выглядит следующим образом (в файле like_button.js).Этот JSX, который я компилирую, используя babel v6.4.1.
'use strict';
import React, {Component} from 'react';
const e = React.createElement;
class LikeButton extends Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return (
<button onClick={() => this.setState({ liked: true })}>
Like
</button>
);
}
}
const frmReg = document.querySelector('#frmReg');
ReactDOM.render(e(LikeButton), frmReg)
HTML-страница (index.php), которую я пытаюсь использовать, выглядит следующим образом.
<html>
<head>
<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>
<!-- Load our React component. -->
</head>
<body>
<div id="frmReg"></div>
</body>
<!-- <script src="assets/js/like_button.js"></script> -->
<script src="assets/js/admincomponent.js"></script>
</html>
Mypackage.json файл выглядит следующим образом.
{
"name": "react_dt",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.9.0",
"babel-plugin-transform-es2015-modules-amd": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1"
}
}
Также включены .babelrc, включенные в корень проекта, который выглядит следующим образом.
{
presets: ["es2015", "react"],
plugins: ["transform-es2015-modules-amd"]
}
Однако, когда я пытаюсь запуститьэто в браузере, я не вижу ничего на странице.Кроме того, в консоли инструментов разработчика у меня появляется ошибка Uncaught SyntaxError: Unexpected identifier с выделенным оператором import React, { Component } from 'react';.
Я пробовал то же самое без оператора импорта и получилэто работать без нареканий .Так что в основном это сводится к проблеме с import.После исследования я прочитал, что это проблема от ES5 до ES6 (ES2015) .Кроме того, я нашел около 5 странных вопросов по той же проблеме, которые ни одно из их решений не помогло мне найти решение.
Что не так?Почему он не позволяет мне делать импорт?