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

UPDATE:ใน React 0.12+ JSX pragma ไม่จำเป็นอีกต่อไป

ตรวจสอบให้แน่ใจว่ามี JSX pragma ที่ด้านบนของไฟล์ของคุณ:

/** @jsx React.DOM */

หากไม่มีบรรทัดนี้ตัวแปลงjsxไบนารีและในเบราว์เซอร์จะปล่อยให้ไฟล์ของคุณไม่เปลี่ยนแปลง

Question 4

ปัญหาโทเค็นที่ไม่คาดคิด '<'เป็นเพราะไม่มีค่าที่ตั้งไว้ล่วงหน้าของ Babel

วิธีแก้ไข: คุณต้องกำหนดค่าการกำหนดค่า webpack ของคุณดังนี้

{
  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 นั้นเป็นจาวาสคริปต์หรือใช้ตัวแปลงในเบราว์เซอร์

ดูที่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" like

<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 ด้วยตัวเลือกนี้ (ลงใน 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"));

ใช้ package.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

แม้ว่าฉันมีตัวโหลด Babel ที่เหมาะสมทั้งหมดในไฟล์ config. babelrc ของฉัน นี้สร้างสคริปต์ด้วยพัสดุ-Bundlerกำลังการผลิตข้อผิดพลาดที่ไม่คาดคิดโทเค็น <และข้อผิดพลาดชนิดไมม์ในคอนโซลเบราว์เซอร์สำหรับฉันในหน้าคู่มือการฟื้นฟู

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