Я только начинаю с Reactjs и пишу простой компонент для отображения
li и наткнулся на эту ошибку:
Неожиданный токен '<'
Я привел пример в jsbin ниже http://jsbin.com/UWOquRA/1/edit?html,js,console,output
Пожалуйста, дайте мне знать, что я делаю неправильно.
Я решил это с помощью type = "text/babel"
<script src="js/reactjs/main.js" type = "text/babel"></script>
UPDATE: В React 0.12+ прагма JSX больше не нужна.
Удостоверьтесь, что прагма JSX находится в верхней части ваших файлов:
/** @jsx React.DOM */
Без этой строки двоичный и встроенный браузер jsx оставит ваши файлы без изменений.
в моем случае, я не смог включить атрибут type в свой тег script.
<script type="text/jsx">
Проблема Неожиданный токен '<' объясняется отсутствием предустановки Babel.
Решение: вам необходимо настроить конфигурацию вашего веб-пакета следующим образом
{
test :/\.jsx?$/,
exclude:/(node_modules|bower_components)/,
loader :'babel',
query :{
presets:['react','es2015']
}
}
здесь .jsx проверяет форматы .js и .jsx.
вы можете просто установить зависимость babel с помощью node следующим образом
npm install babel-preset-react
Спасибо
Вам нужно либо перевести/скомпилировать этот код JSX в javascript, либо использовать встроенный в браузер преобразователь
Посмотрите http://facebook.github.io/react/docs/getting-started.html и обратите внимание на теги <script>, вам нужны те, которые включены для JSX для работы в браузере.
Вот рабочий пример из jsbin:
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.9.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="main-content"></div>
</body>
</html>
JSX:
<script type="text/jsx">
/** @jsx React.DOM */
var LikeOrNot = React.createClass({
render: function () {
return (
<p>Like</p>
);
}
});
React.renderComponent(<LikeOrNot />, document.getElementById('main-content'));
</script>
Запустите этот код из одного файла, и он будет работать.
У меня есть эта ошибка и я не могу решить это в течение двух дней. Поэтому исправление ошибки очень простое.
В теле, где вы подключаете script, добавьте type="text/jsx", и это разрешит проблему.
Для правильного анализа синтаксиса вам необходимо использовать эту версию: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js и атрибут "type = 'text/babel'" в script. Кроме того, ваш пользовательский script должен находиться в тегах body.
если мы рассмотрим вашу реальную конфигурацию сайта, вам нужно запустить ReactJS в голове
<!-- Babel ECMAScript 6 injunction -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
и добавьте атрибут в ваш файл js - type = "text/babel", например
<script src="../js/r1HeadBabel.js" type="text/babel"></script>
то пример ниже кода будет работать:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Используйте следующий код. Я добавил ссылку на React and React DOM. Используйте ES6/Babel, чтобы преобразовать JS-код в ванильный JavaScript. Обратите внимание, что метод Render поступает из ReactDOM и гарантирует, что метод render имеет цель, указанную в DOM. Иногда может возникнуть проблема с тем, что метод render() не может найти целевой элемент. Это происходит из-за того, что код выполнения выполняется до отображения DOM. Чтобы противостоять этому, используйте jQuery ready(), чтобы вызвать метод render() для React. Таким образом вы будете уверены в том, что DOM будет отображаться первым. Вы также можете использовать атрибут defer в своем приложении script.
Код HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id='main-content'></div>
<script src="CDN link to/react-15.1.0.js"></script>
<script src="CDN link to/react-dom-15.1.0.js"></script>
</body>
</html>
Код JS:
var LikeOrNot = React.createClass({
render: function () {
return (
<li>Like</li>
);
}
});
ReactDOM.render(<LikeOrNot />,
document.getElementById('main-content'));
Надеюсь, это решит вашу проблему.: -)
Вы можете использовать такой код:
import React from 'react';
import ReactDOM from 'react-dom';
var LikeOrNot = React.createClass({
displayName: 'Like',
render: function () {
return (
React.createElement("li", null, "Like")
);
}
});
ReactDOM.render(<LikeOrNot />, document.getElementById('main-content'));
И не забудьте добавить <div id='main-content'></div> в body в html
Но в вашем файле package.json вы должны использовать эти зависимости:
"dependencies": {
...
"babel-core": "^6.18.2",
"babel-preset-react": "^6.16.0",
...
}
"devDependencies": {
...
"babel": "^6.5.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"jsx-loader": "^0.13.2",
...
}
Это работает для меня, но я также использовал webpack, с этими параметрами (в webpack.config.js):
module: {
loaders: [
{
test: /\.jsx?$/, // Match both .js and .jsx files
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets: ['es2015', 'react']
}
}
]
}
В моем случае, помимо пресетов babel, мне также пришлось добавить это в мой .eslintrc:
{
"extends": "react-app",
...
}
Если вы похожи на меня и склонны к глупым ошибкам, также проверьте свой пакет. Json, если он содержит вашу настройку Babel:
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},
Я только начал изучать React сегодня и столкнулся с одной и той же проблемой. Ниже приведен код, который я написал.
<script type="text/babel">
class Hello extends React.Component {
render(){
return (
<div>
<h1>Hello World</h1>
</div>
)
}
}
ReactDOM.render(
<Hello/>
document.getElementById('react-container')
)
</script>
И, как вы видите, я пропустил запятую (,) после использования <Hello/>. И сама ошибка говорит о том, какую строку нам нужно искать.
Поэтому, как только я добавляю запятую перед вторым параметром для функции ReactDOM.render(), все начали работать нормально.
heres другим способом вы можете сделать это html
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="src/index.js"></script>
</body>
</html>
файл index.js с помощью пути src/index.js
import React from "react";
import { render } from "react-dom";
import "./styles.scss";
const App = () => (
<div>
<h1>Hello test</h1>
</div>
);
render(<App />, document.getElementById("app"));
используйте этот пакет. json быстро запустится и работает
{
"name": "test-app",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"start": "parcel index.html --open",
"build": "parcel build index.html"
},
"dependencies": {
"react": "16.2.0",
"react-dom": "16.2.0",
"react-native": "0.57.5"
},
"devDependencies": {
"@types/react-native": "0.57.13",
"parcel-bundler": "^1.6.1"
},
"keywords": []
}
Хотя в моем конфигурационном файле .babelrc были все нужные загрузчики. Этот скрипт сборки с parcel-bundler вызывал неожиданную ошибку токена <и ошибки типа mime в консоли браузера для меня при обновлении страницы вручную.
"scripts": {
"build": "parcel build ui/index.html --public-url ./",
"dev": "parcel watch ui/index.html"
}
Обновление скрипта сборки исправило проблемы для меня.
"scripts": {
"build": "parcel build ui/index.html",
"ui": "parcel watch ui/index.html"
}