Reactjs: अप्रत्याशित टोकन '<' त्रुटि

Question 1

मैं सिर्फ Reactjs से शुरुआत कर रहा हूं और
liटैग प्रदर्शित करने के लिए एक सरल घटक लिख रहा था और इस त्रुटि के पार आया:

अप्रत्याशित टोकन '<'

मैंने jsbin पर नीचे उदाहरण दिया है http://jsbin.com/UWOquRA/1/edit?html,js,console,output

कृपया मुझे बताएं कि मैं क्या गलत कर रहा हूं।

Question 2

मैंने इसका हल = "text / babel" टाइप करके हल किया

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

Question 3

अद्यतन: प्रतिक्रिया 0.12+ में, JSX प्रागम अब आवश्यक नहीं है।

सुनिश्चित करें कि JSX प्राग्मा को अपनी फ़ाइलों के शीर्ष पर शामिल करें:

/** @jsx React.DOM */

इस लाइन के बिना, jsxबाइनरी और इन-ब्राउज़र ट्रांसफार्मर आपकी फ़ाइलों को अपरिवर्तित छोड़ देगा।

Question 4

समस्या अनपेक्षित टोकन '<' की वजह से बैबेल प्रीसेट गुम है।

समाधान: आपको अपना वेबपैक कॉन्फ़िगरेशन निम्नानुसार कॉन्फ़िगर करना होगा

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

यहाँ .jsx .js और .jsx प्रारूपों की जाँच करता है।

आप बस इस प्रकार नोड का उपयोग करके बेबल निर्भरता स्थापित कर सकते हैं

npm install babel-preset-react

धन्यवाद

Question 5

मेरे मामले में, मैं अपने स्क्रिप्ट टैग पर प्रकार विशेषता को शामिल करने में विफल रहा।

<script type="text/jsx">

Question 6

आपको या तो ट्रांसफ़ाइल / कंपाइल करने की ज़रूरत है कि JSX कोड को जावास्क्रिप्ट में या इन-ब्राउज़र ट्रांसफार्मर का उपयोग करें

को देखो 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

यदि आप मेरे जैसे हैं और मूर्खतापूर्ण गलतियों का सामना कर रहे हैं, तो अपने पैकेज की भी जांच करें। यदि आपके बबैल में प्रीसेट हो तो भी देखें:

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

Question 10

सही टैग पार्सिंग के लिए आपको इस बैबल संस्करण का उपयोग करने की आवश्यकता होगी: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js और विशेषता "टाइप = 'टेक्स्ट / बैबल'" स्क्रिप्ट में। इसके अलावा, आपकी कस्टम स्क्रिप्ट "बॉडी" टैग में होनी चाहिए।

Question 11

यदि हम आपके वास्तविक साइट कॉन्फ़िगरेशन पर विचार करते हैं, तो आपको सिर में रिएक्टजेएस को चलाने की आवश्यकता है

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

और अपनी js फ़ाइल में विशेषता जोड़ें - जैसे = "टेक्स्ट / बैबल"

<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 का उपयोग करें। ध्यान दें कि रेंडर विधि ReactDOM से आती है और सुनिश्चित करें कि रेंडर विधि में DOM में निर्दिष्ट लक्ष्य है। कभी-कभी आपको एक समस्या का सामना करना पड़ सकता है जो कि रेंडर तत्व को प्रस्तुत नहीं कर सकता है। ऐसा इसलिए होता है क्योंकि DOM रेंडर करने से पहले रिएक्शन कोड निष्पादित होता है। प्रतिक्रिया के रेंडर () विधि को कॉल करने के लिए इस उपयोग के लिए तैयार jQuery का उपयोग करें। इस तरह से आप पहले दिए गए 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>

जेएस कोड:

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

लेकिन आपके पैकेज में.जेसन फ़ाइल में आपको इस निर्भरता का उपयोग करना चाहिए:

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

इस पैकेज का उपयोग करें। जसन आपको ऊपर और जल्दी से चल रहा है

{
  "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 config फाइल में सभी उचित बबल लोडर थे। पार्सल-बंडलर के साथ यह बिल्ड स्क्रिप्ट अप्रत्याशित टोकन त्रुटि पैदा कर रही थी <और मैनुअल कंसोल में मेरे लिए ब्राउज़र कंसोल में माइम प्रकार की त्रुटियां।

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