Я тільки починаю з 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>ОНОВЛЕННЯ: У React 0,12+ або більше, прагма JSX більше не потрібна.
Обов’язково включіть прагму JSX у верхню частину файлів:
/** @jsx React.DOM */Без цього рядка jsxдвійковий та трансформатор у браузері залишать ваші файли незмінними.
type="text/babel". Хоробрий новий світ javascript
Проблема Неочікуваний маркер '<' через відсутність попередньо встановленої лексеми .
Рішення: Ви повинні налаштувати конфігурацію веб-пакету наступним чином
{
test : /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader : 'babel',
query : {
presets:[ 'react', 'es2015' ]
}
}
тут .jsx перевіряє формати .js та .jsx.
ви можете просто встановити залежність бабеля за допомогою вузла наступним чином
npm install babel-preset-reactДякую
npm install babel-preset-reactвирішив мою проблему.
.babelrcпроект у проекті просто так, "presets": ["env", "react", "es2015"]і це все !!
Вам потрібно або транспілювати / компілювати цей код JSX у javascript, або використовувати внутрішньо-браузерний трансформатор
Подивіться на http://facebook.github.io/react/docs/getting-started.html і візьміть на замітку <script>теги, вам потрібні ті, які включені в JSX для роботи в браузері.
<script type="text/jsx">тезі, якщо ви хочете , будь ласка , вставте весь код в hastebin.org паста
У мене є ця помилка, і я не міг її вирішити протягом двох днів. Тому виправити помилку дуже просто. У тілі, де ви підключите своє script, додайте, type="text/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>
Запустіть цей код з одного файлу і ваш він повинен працювати.
Якщо ви схожі на мене і схильні до нерозумних помилок, також перевірте свій пакунок.json, чи містить він ваш попередньо встановлений наказ:
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},
Для коректного розбору тегів ви повинні використовувати цю версію Бабеля: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js і атрибут «Тип =" текст / Бабель » у сценарії. Крім того, ваш користувальницький сценарій повинен містити теги "body".
якщо ми врахуємо вашу реальну конфігурацію сайту, то вам потрібно запустити ReactJS в голові
<!-- Babel ECMAScript 6 injunction -->
<script src="https://unpkg.com/babel-standalone@6/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 і React DOM. Використовуйте ES6 / Babel, щоб перетворити код JS у ванільний JavaScript. Зауважте, що метод візуалізації походить від ReactDOM і переконайтеся, що метод рендерінга має ціль, вказану в DOM. Іноді ви можете зіткнутися з проблемою, що метод render () не може знайти цільовий елемент. Це відбувається тому, що код реагування виконується до надання DOM. Щоб протистояти цьому, використовуйте jQuery ready () для виклику методу render () React. Таким чином, ви будете впевнені, що DOM буде наданий першим. Ви також можете використовувати атрибут відстрочки в сценарії програми.
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'));
Сподіваюся, це вирішить вашу проблему. :-)
Перевірте, чи .babelrc знаходиться в кореневій папці програми, а не в підпапці. якщо це так, перемістіть файл у корінь.
Ви можете використовувати такий код:
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']
}
}
]
}Я щойно почав вчитися 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()функції, все почало працювати добре.
ось ще один спосіб ви можете це зробити 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 у мене були всі належні навантажувачі. Цей сценарій збірки з пакетом-пакетом створював несподівану помилку лексеми <та помилки типу 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"
}