Reactjs: неожиданный токен '<' ошибка

Question 1

Я только начинаю с Reactjs, писал простой компонент для отображения
liтега и наткнулся на эту ошибку:

Неожиданный токен '<'

Я поместил пример в jsbin ниже http://jsbin.com/UWOquRA/1/edit?html,js,console,output

Пожалуйста, дайте мне знать, что я делаю не так.

Question 2

Я решил это с помощью type = "text / babel"

<script src="js/reactjs/main.js" type = "text/babel"></script>

Question 3

ОБНОВИТЬ: в React 0.12+ прагма JSX больше не нужна.

Убедитесь, что прагма JSX находится в верхней части ваших файлов:

/** @jsx React.DOM */

Без этой строки jsxдвоичный преобразователь и преобразователь в браузере оставят ваши файлы без изменений.

Question 4

Проблема Неожиданный токен '<' связана с отсутствием предустановки babel.

Решение: вам необходимо настроить конфигурацию вашего веб-пакета следующим образом

{
  test   : /\.jsx?$/,
  exclude: /(node_modules|bower_components)/,
  loader : 'babel',
  query  : {
    presets:[ 'react', 'es2015' ]
  }
}

здесь .jsx проверяет форматы .js и .jsx.

вы можете просто установить зависимость babel с помощью узла следующим образом

npm install babel-preset-react

Спасибо

Question 5

в моем случае мне не удалось включить атрибут type в свой тег скрипта.

<script type="text/jsx">

Question 6

Вам нужно либо преобразовать / скомпилировать этот код JSX в javascript, либо использовать преобразователь в браузере.

Посмотрите на http://facebook.github.io/react/docs/getting-started.html и обратите внимание на <script>теги, вам нужны те, которые включены для JSX, чтобы работать в браузере.

Question 7

У меня есть эта ошибка, и я не мог ее решить в течение двух дней, поэтому исправить ошибку очень просто. В теле, куда вы подключаете свой script, добавьте type="text/jsx"и это решит проблему.

Question 8

Вот рабочий пример из вашего 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>

Запустите этот код из одного файла, и он должен работать.

Question 9

Если вы похожи на меня и склонны к глупым ошибкам, также проверьте свой package.json, если он содержит ваш пресет babel:

  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },

Question 10

Для правильного разбора тегов вам необходимо использовать эту версию babel: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js и атрибут "type = 'text / babel'" в сценарии. Кроме того, ваш собственный сценарий должен быть в пределах тегов body.

Question 11

если рассматривать вашу реальную конфигурацию сайта, то вам нужно запустить 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')
);

Question 12

Используйте следующий код. Я добавил ссылку на React и React DOM. Используйте ES6 / Babel, чтобы превратить ваш JS-код в обычный JavaScript. Обратите внимание, что метод Render исходит из ReactDOM, и убедитесь, что у этого метода есть цель, указанная в DOM. Иногда вы можете столкнуться с проблемой, что метод render () не может найти целевой элемент. Это происходит потому, что код реакции выполняется до рендеринга DOM. Чтобы противостоять этому, используйте jQuery ready () для вызова метода render () React. Таким образом, вы будете уверены, что сначала отрисовывается DOM. Вы также можете использовать атрибут defer в скрипте приложения.

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'));

Надеюсь, это решит вашу проблему. :-)

Question 13

Убедитесь, что .babelrc находится внутри корневой папки вашего приложения, а не внутри подпапки. в этом случае переместите файл в корневой каталог.

Question 14

Вы можете использовать такой код:

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.config.js):

  module: {
    loaders: [
      { 
        test: /\.jsx?$/,         // Match both .js and .jsx files
        exclude: /node_modules/, 
        loader: "babel-loader", 
        query:
        {
          presets: ['es2015', 'react']
        }
      }
    ]
  }

Question 15

В моем случае, помимо babelпресетов, мне также пришлось добавить это в свой .eslintrc:

{
  "extends": "react-app",
  ...
}

Question 16

Я только начал учиться 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()функции, все заработало нормально.

Question 17

Вот еще один способ сделать это 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": []
}

Question 18

Хотя в моем конфигурационном файле .babelrc были все подходящие загрузчики babel. Этот сценарий сборки с 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"
 }