javascript - ReactJS:意外的 token <-6ren

javascript - ReactJS:意外的 token <

转载作者：行者123 更新时间：2023-11-28 15:12:29

25

4

TL;DR:为什么我的代码会出现错误？ Previous question是不同的(在线与桌面)，它的答案对我不起作用。

完整代码here

基于或多或少源自 here 的代码(我的“类(class)”还没有结束

问题:关注this “ReactJS 简介”。本演练有 Webpack/Babel 设置。它使用纯 JS 运行，但是当我切换到 JSX 时，它就卡住了。这类似于 this question ，但这些答案似乎都不起作用。主要区别:网络 Playground 与我的盒子上的本地 Playground ？

我正在处理的视频的结尾指向 this code - 不过，我只完成了 3/4，所以部分内容尚未包含在内。所以，我又拨回 this fork with my edits (抱歉，如果我已经放弃了 fork 和推送我的更改......)

注释: BEFORE 和 AFTER 是我唯一更改的内容。它适用于 javascript/jquery - 但不适用于 JSX。我发现了一些拼写错误、大小写错误(thisItem 与 thisitem)以及一些不应该出现的项目(删除了括号)。

我已经更改了“我的”键入的版本，以更紧密地匹配“他们的”版本(Hello 而不是 HelloWorld)，并进行了其他细微更改...相同的错误。

除了一些间距问题之外，我看到的最大的剩余变化是版本 - 记录类的次要版本碰撞。

我的代码:

.babelrc

{ "presets": [ "react" ] }

package.json

 {
  "name": "github-battle",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "production": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  },
  "devDependencies": {
    "babel-core": "^6.6.0",
    "babel-loader": "^6.2.4",
    "babel-preset-react": "^6.5.0",
    "html-webpack-plugin": "^2.9.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin')
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
})

module.exports = {
    entry: [
        './app/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        filename: "index_bundle.js"
    },
    module: {
        loaders:[
            { test: /\.js$/,include: __dirname + '/app',loader: "babel-loader" }
        ]
    },
    plugins: [HtmlWebpackPluginConfig]
}

应用程序\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Github Battle</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
</head>
<body>
<div id="app"></div>
</body>
</html>

app\index.js 之前

var app = document.getElementbyid('app')
app.innerHTML = 'Hello

app\index.js 之后

var React = require('react');
var ReactDOM = require('react-dom');

var HelloWorld = React.createClass({
    render: function () {
        return <div> Hello World </div>
    }
});

ReactDOM.render(
    <HelloWorld />,
    document.getElementById('app')
);

结果:

> B:\Users\Chris\react-js\React-Fundamentals>npm run production
> gh-battle@1.0.0 production B:\Users\Chris\react-js\React-Fundamentals
> webpack -p

Hash: 21e367e251c35209471c
Version: webpack 1.12.14
Time: 375ms
          Asset       Size  Chunks             Chunk Names
index_bundle.js  289 bytes       0  [emitted]  main
     index.html  305 bytes          [emitted]
   [0] multi main 28 bytes {0} [built] [1 error]
   [1] ./app/index.js 0 bytes [built] [failed]

ERROR in ./app/index.js
Module parse failed: B:\Users\Chris\react-js\React-Fundamentals\app\index.js Line 6: Unexpected token <
You may need an appropriate loader to handle this file type.
| var Hello = React.createClass({
|   render: function () {
|     return <div> Hello ReactJS World! </div>
|   }
| });
 @ multi main
Child html-webpack-plugin for "index.html":
        + 3 hidden modules

B:\Users\Chris\react-js\React-Fundamentals>

webpack.config.js #2:同样的错误

var HtmlWebpackPlugin = require('html-webpack-plugin');
...
module.exports = {
  ...
  module: {
    loaders: [
      {test: /\.js$/, include: __dirname + '/app', loader: "babel-loader"}
    ],
    query: {
      presets: ['react']
    }
  },
  plugins: [HTMLWebpackPluginConfig]
};

最佳答案

您需要将 index.js 重命名为 index.jsx。

关于javascript - ReactJS:意外的 token <，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35756241/

25

4

0

文章推荐： swift - Swift 的 DateInterval 中的时区不正确

文章推荐： html - 仅为 div 的外边框设置边距

文章推荐： javascript - 无法在ajax中执行成功函数

文章推荐： javascript - 运算符 === 和 ||

UBUNTU:安装语法错误: "("意外
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许在 Stack Overflow 上提出有关通用计算硬件和软件的问题。您可以编辑问题，使其成为
DB2 - 创建表抛出语法错误 "("意外
当我尝试在 db2 中创建表时，它抛出以下错误 $ db2 CREATE TABLE employee(emp_id INT NOT NULL, emp_name VARCHAR(100)) sh:
javascript - 意外 'continue'
我有: while (i < l) { if (one === two) { continue; } i++; } 但是 JSLint 说: Problem at line 1 chara
c - while 循环工作不正常/意外？
所以我有这个代码: char inputs[10] = ""; int numInputs = 0; while (numInputs < 10){ char c; printf("E
JavaScript - 意外/奇怪的构造函数
var ninja = { name: 'Ninja', say: function () { return 'I am a ' + this.name; }
c++ - 类型名称不允许/意外
我收到一个我不明白的错误，请注意，我是编码新手，所以这可能是一个简单的错误。 #include using namespace std; int main() { //Initialise Fahr
javascript - 意外 token `}`
我正在使用 javascript 和 react，由于某种原因，我收到了一个奇怪的 token 错误。这是发生错误的代码: renderNavBar() { if (!this.us
linux - 我收到错误语法错误:”(“意外”
Closed. This question is off-topic。它当前不接受答案。
c++ - 意外#else
由于某种我无法解释的原因，编译器正在输出一个错误，指出它发现了一个意外的#else 标记。这发生在文件的开头: #if defined( _USING_MFC ) #include "stda
php - 意外 = 错误信息
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
linux - bash 脚本中的语法错误 `("意外
这个问题在这里已经有了答案: Difference between sh and Bash (11 个答案) 关闭 2 年前。我正在编写一个简单的 bash 脚本，我在 XX `(' unexpe
bash - 意外 token 'fi'
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。此问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-topic
if-statement - 批处理脚本 if 语句 - 意外(
我在 Windows 7 上编写了一个脚本，它不断给我一个错误“(此时出乎意料。”对于以下代码 if %vardns%=="NODNS" ( netsh interface ipv4 set ad
bash - 意外 token (带有xmlstarlet
我正在尝试使用xmlstarlet（使用xpath）解析XML文件，但是出现语法错误，并且我不知道如何更正我的代码。这是我的脚本： #!/bin/bash if [ $1=="author" ];
shell - 意外 token 附近的语法错误
以下脚本旨在在目录中的所有文件上运行程序“senna”，并将每个文件的输出(保留输入文件名)写入另一个目录 for file in ./Data/in/*; do ./senna -iobta
javascript - 意外 -> userSelect.on 'valuesChanged' ->
我从 challengers.coffee 运行此代码，并收到错误 ActionView::Template::Error (SyntaxError: [stdin]:3:31:unexpected
javascript - NodeJS 意外 token "."
我在 config.db.database; 行中有语法错误(意外的标记“.”)。这是我在文件中的代码 const config = require('../config/config') const
powershell - Powershell:意外 token
这一定很明显，但是我无法使它正常工作。我正在尝试传输应该用于构建$ classKey的对象，这反过来又导致删除所需的软件(amd64或i386)。好吧，这里的代码: $name = @("softwa
grails - 意外 token : mapping
我正在使用 1.3.7 版学习 Grails，但我一直无缘无故地遇到以下语法错误: unexpected token: mapping @ line x, column y. 有一次，我通过运行“gr
syntax - 意外 token 附近的Pascal语法错误
我正在尝试找出这段Pascal代码的问题 function Factorial(n: integer): integer; begin if n = 0 then Result := 1

首页

博学

6Ren·AI

商城

javascript - ReactJS:意外的 token <