web-dev-qa-db-fra.com

Reactjs: Jeton inattendu '<' Erreur

je viens juste de commencer avec Reactjs et écrivais un composant simple à afficher
li tag et a rencontré cette erreur: 

Jeton inattendu '<'

J'ai mis l'exemple ci-dessous à l'adresse jsbin http://jsbin.com/UWOquRA/1/edit?html,js,console,output

S'il vous plaît laissez-moi savoir ce que je fais mal.

reactjs
64
sam

Je l'ai résolu en utilisant type = "text/babel" 

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

UPDATE: Dans React 0.12+, le pragma JSX n'est plus nécessaire.

Assurez-vous d'inclure le pragma JSX en haut de vos fichiers:

/** @jsx React.DOM */

Sans cette ligne, le transformateur jsx binaire et dans le navigateur laissera vos fichiers inchangés.

29
Sophie Alpert

Le problème Le jeton inattendu '<' est dû à l'absence du préréglage babel.

Solution: vous devez configurer la configuration de votre webpack comme suit

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

ici .jsx vérifie les formats .js et .jsx.

vous pouvez simplement installer la dépendance babel en utilisant le noeud comme suit

npm install babel-preset-react

Je vous remercie

19
Nuwa

dans mon cas, je n’avais pas réussi à inclure l’attribut type dans ma balise script.

<script type="text/jsx">
17
Sean McMills

Vous devez transpiler/compiler ce code JSX en javascript ou utiliser le transformateur intégré au navigateur.

Regardez http://facebook.github.io/react/docs/getting-started.html et notez les balises <script>, vous avez besoin de celles incluses pour que JSX fonctionne dans le navigateur.

7
krs

Voici un exemple de travail de votre 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>

Exécutez ce code à partir d'un seul fichier et cela devrait fonctionner.

2
myusuf

J'ai cette erreur et je ne pouvais pas résoudre ce problème pendant deux jours.Alors la correction de l'erreur est très simple . Dans le corps, où vous connectez votre script, ajoutez type="text/jsx" et ceci résoudra le problème.

2
Руслан

Utilisez le code suivant. J'ai ajouté une référence à React et React DOM. Utilisez ES6/Babel pour transformer votre code JS en JavaScript Vanilla. Notez que la méthode de rendu provient de ReactDOM et assurez-vous que la cible de la méthode de rendu est spécifiée dans le DOM . Parfois, vous pouvez être confronté à un problème qui empêche la méthode de rendu () de trouver l'élément cible. Cela est dû au fait que le code de réaction est exécuté avant le rendu du DOM. Pour contrer cela, utilisez jQuery ready () pour appeler la méthode render () de React. De cette façon, vous serez sûr que DOM sera rendu en premier. Vous pouvez également utiliser l'attribut defer sur votre script d'application.

Code 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>

Code JS:

var LikeOrNot = React.createClass({
    render: function () {
      return (
        <li>Like</li>
      );
    }
});

ReactDOM.render(<LikeOrNot />,
                document.getElementById('main-content'));

J'espère que cela résout votre problème. :-)

1
Abhay Shiro

Pour une analyse correcte des balises, vous devez utiliser cette version de Babel: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js et attribut "type = 'text/babel '"dans le script. En outre, votre script personnalisé doit figurer dans les balises "body". 

1
Kirill Shur

si nous considérons la configuration de votre site réel, il vous faudra exécuter ReactJS en tête

<!-- Babel ECMAScript 6 injunction -->  
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

et ajouter un attribut à votre fichier js - type = "text/babel" like

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

alors l'exemple de code ci-dessous fonctionnera:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
1
Roman

voici une autre façon de le faire html 

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
     <div id="app"></div>

    <script src="src/index.js"></script>
</body>

</html>

fichier index.js avec le chemin 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"));

utilisez ce package.json vous permettra de démarrer rapidement

{
  "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": []
}
0
Snivio

Bien que j’ai eu tous les bons chargeurs de babel dans mon fichier de configuration .babelrc. Ce script build avec parcel-bundler produisait l’erreur de jeton inattendue <et les erreurs de type mime dans la console du navigateur lors de l’actualisation de la page de manuel.

"scripts": {
    "build": "parcel build ui/index.html --public-url ./",
    "dev": "parcel watch ui/index.html"
 }

La mise à jour du script de construction a corrigé les problèmes pour moi.

"scripts": {
    "build": "parcel build ui/index.html",
    "ui": "parcel watch ui/index.html"
 }
0
Ab.Progr

Si vous êtes comme moi et enclin à commettre des erreurs stupides, vérifiez également votre package.json s'il contient votre preset Babel:

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

Vous pouvez utiliser un code comme ceci:

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

Et n'oubliez pas d'ajouter <div id='main-content'></div> dans la body dans votre html

Mais dans votre fichier package.json, vous devriez utiliser ces dépendances:

  "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",
...
}

C'est un travail pour moi mais j'ai aussi utilisé webpack, avec cette option (dans webpack.config.js):

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

Dans mon cas, en plus des presets babel, je devais aussi ajouter ceci à mon .eslintrc:

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

Je viens de commencer à apprendre React aujourd'hui et je faisais face au même problème. Ci-dessous le code que j'avais écrit.

<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>

Et comme vous pouvez le constater, j’avais manqué une virgule après avoir utilisé <Hello/>. Et l'erreur elle-même indique sur quelle ligne nous devons regarder. 

 enter image description here

Donc, une fois que j'ai ajouté une virgule avant le deuxième paramètre pour la fonction ReactDOM.render(), tout a commencé à fonctionner correctement.

0
Sibeesh Venu