ReactJS：意外的標記<

TL; DR：爲什麼我會得到我的代碼中的錯誤？ Previous question是不同的（在線VS桌面）和它的答案，不要爲我工作。ReactJS：意外的標記<

完整代碼here

基於代碼或多或少始發here（我不太給「教訓」結束

問：繼this「介紹到ReactJS」的。演練的WebPack /巴貝爾設置它運行與普通的JS，但是當我切換到JSX它悶死這類似於this question，但沒有這些問題的答案似乎工作的主要區別：。。？本地網絡遊樂場VS在我的箱子

我正在製作的視頻的結尾會導致this code - 雖然我只有3/4的路徑，所以還沒有包含這些部分。所以，我撥它放回this fork with my edits（很抱歉，如果我宰了分叉，推動我的變化...）

注：前後是唯一的事情，我已經改變了。它可以與JavaScript/jquery協同工作 - 但不能與JSX協同工作。我發現一對夫婦錯別字，錯誤的情況下（thisItem VS 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>

應用程序\ index.js前

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

應用程序\ 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 
> [email protected] 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] 
};

來源

2016-03-02 WernerCD

你有沒有嘗試添加'查詢：{預設：[ '反應' ]}'？ –

@The for .babelrc'？在put查詢中：在最初的括號之前？似乎沒有在任何一個git倉庫或在[這裏]列出的任何例子中（https://babeljs.io/blog/2015/10/31/setting-up-babel-6） - 和擺弄用引號/不引號 - 單/雙引號留下相同的錯誤。 – WernerCD

你也可以將它添加到你的'webpack.config.js'文件中，就像這裏[gitrepo]（https://github.com/babel/babel-loader） –

您需要將index.js重命名爲index.jsx。

來源

2016-03-02 20:18:10

我不認爲這很重要，因爲您可以在應用程序的入口點處輸入內容，加載器將其轉換爲輸出格式......到目前爲止，我正努力嘗試通過的所有示例都有一直是js。 – WernerCD

儘管我認爲這個過程並不重要，但我認爲我會轉向jsx擴展......我喜歡不同擴展給出的區別。 – WernerCD

愚蠢的問題：你有沒有嘗試刪除「條目」聲明中的方括號？

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

來源

2016-03-02 21:57:01 JulioCT

它與「字符串」或「字符串數組」相同。這個「班級」就是這樣，因爲在「即將到來」的時候，我們會在那裏使用很多東西。 – WernerCD

從您的第二個webpack配置文件中，查詢應該在babel加載器對象中。

module: { 
    loaders: [ 
    { 
     test: /\.js$/, 
     include: __dirname + '/app', 
     loader: "babel-loader", 
     query: { 
     presets: ['react'] 
     } 
    } 
    ] 
}

如果您打算使用es6，請不要忘記安裝babel-preset-es2015插件。

來源

2016-03-02 23:26:04

工作守則here

敲我的頭撞在牆上後（其中，說實話，幫助擊敗知識 - 因此它不是都是多餘的）......我做了幾個小的改動和似乎現在是成功的：

更改.js爲.jsx - 我喜歡「明確」的確認，這些不是純粹的js。（不需要我認爲，更多的風格）
~~我已經刪除了babelrc文件並將查詢移入webpack.config ...似乎更容易將事物劃分到單個文件中。~~這實際上不適用於我... se'la'vie
「解決方案」似乎是__dirname + '/dir'更改爲path.join(...) - 實際包含var path = require('path')。我會研究（如果我沒有找到一個新問題，我會問一個新問題）這兩個問題/方式爲何不相等，但我只能假定它與不同的操作系統（Windows 10x64）有關。

編輯::只是一些隨機的戳，但include:__dirname + 'app',失敗......一樣'\app'，'\app\'，'/app'，'/app/' ...不知道爲什麼，但path.join（...）的作品。

另外值得注意的是，template: __dirname + '...',似乎工作，但不是它下面的部分。文件名與目錄，所以再次不確定的區別。

webpack.config.js

var path = require('path'); 

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.jsx' 
    ], 
    output: { 
    path: path.join(__dirname, '/dist'), 
    filename: "index_bundle.js" 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     include: path.join(__dirname, '/app'), 
     loader: "babel-loader"}, 
    ] 
    }, 
    plugins: [HTMLWebpackPluginConfig] 
};

index.jsx

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

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

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

的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> 
    <script src="index_bundle.js"></script></body> 
</html>

來源

2016-03-03 14:54:44 WernerCD

ReactJS：意外的標記<

回答

相關問題