Reactjs: jeton inattendu ‘<' erreur

Je commence juste avec Reactjs et écrivais un composant simple à afficher
li tag et est tombé sur cette erreur:

Jeton inattendu ‘<'

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

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

MISE À JOUR: 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 jsx binary et in-browser laissera vos fichiers inchangés.

Je l’ai résolu en utilisant type = “text / babel”

  

dans mon cas, je n’ai pas réussi à inclure l’atsortingbut type sur ma balise script.

  

Le problème Jeton inattendu ‘<' est dû à l’absence du paramètre prédéfini babel.

Solution: Vous devez configurer votre configuration 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

Vous devez soit transstackr / comstackr ce code JSX en JavaScript ou utiliser le transformateur intégré au navigateur.

Regardez http://facebook.github.io/react/docs/getting-started.html et prenez note des balises , vous avez besoin de celles incluses pour que JSX fonctionne dans le navigateur.

Voici un exemple de travail de votre jsbin:

HTML:

      JS Bin   

jsx:

  

Exécutez ce code à partir d’un seul fichier et votre fichier devrait fonctionner.

Pour une parsing correcte des balises, vous devez utiliser cette version de babel: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js et l’atsortingbut “type = ‘text / babel'” dans le script. De plus, votre script personnalisé devrait être dans les balises “body”.

si nous considérons votre configuration réelle du site, vous devez exécuter ReactJS dans la tête

   

et append un atsortingbut à votre fichier js – type = “text / babel” comme

  

alors l’exemple de code ci-dessous fonctionnera:

 ReactDOM.render( 

Hello, world!

, document.getElementById('root') );

J’ai cette erreur et je n’ai pas pu résoudre ce problème pendant deux jours. Le correctif d’erreur est donc très simple. Dans body, où vous connectez votre script , ajoutez type="text/jsx" et cela résoudra le problème.

Vous pouvez utiliser un code comme celui-ci:

 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(, document.getElementById('main-content')); 

Et n’oubliez pas d’append

dans le body de votre html

Mais dans votre fichier package.json, vous devez 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 du travail pour moi mais j’ai aussi utilisé webpack, avec ces options (dans webpack.config.js):

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

Dans mon cas, outre les presets de babel , il fallait aussi que j’ajoute ceci à mon .eslintrc :

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

Utilisez le code suivant. J’ai ajouté une référence à React et React DOM. Utilisez ES6 / Babel pour transformer votre code JS en code JavaScript. Notez que la méthode Render provient de ReactDOM et assurez-vous que la méthode de rendu a une cible spécifiée dans le DOM. Vous pouvez parfois rencontrer un problème que la méthode render () ne trouve pas l’élément cible. Cela se produit car 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’atsortingbut defer sur votre script d’application.

Code HTML:

     JS Bin   

Code JS:

 var LikeOrNot = React.createClass({ render: function () { return ( 
  • Like
  • ); } }); ReactDOM.render(, document.getElementById('main-content'));

    J’espère que cela résout votre problème. 🙂

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

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