Javascript ReactJS：意外标记<；_Javascript_Jquery_Reactjs

Javascript ReactJS：意外标记<；

javascript jquery reactjs

Javascript ReactJS：意外标记<；,javascript,jquery,reactjs,Javascript,Jquery,Reactjs,TL；DR:为什么我的代码会出错？是不同的（在线与桌面），它的答案不适合我完整代码基于或多或少的源代码（我还没讲完“课程” 问题：以下是“ReactJS简介”。本演练有Webpack/Babel设置。它使用普通JS运行，但当我切换到JSX时，它会窒息。这与类似，但这些答案似乎都不起作用。主要区别：网络游乐场与我的盒子上的本地我正在制作的视频的结尾将导致-尽管我只完成了3/4，所以部分还没有包括在内。所以，我已经将其拨回（如果我已经进行了分岔和推送更改，请原谅…）注意：之前和之后是我唯一更

TL；DR:为什么我的代码会出错？是不同的（在线与桌面），它的答案不适合我

完整代码

基于或多或少的源代码（我还没讲完“课程”

问题：以下是“ReactJS简介”。本演练有Webpack/Babel设置。它使用普通JS运行，但当我切换到JSX时，它会窒息。这与类似，但这些答案似乎都不起作用。主要区别：网络游乐场与我的盒子上的本地

我正在制作的视频的结尾将导致-尽管我只完成了3/4，所以部分还没有包括在内。所以，我已经将其拨回（如果我已经进行了分岔和推送更改，请原谅…）

注意：之前和之后是我唯一更改的内容。它适用于javascript/jquery，但不适用于JSX。我发现了一些打字错误、大小写错误（thisItem vs thisItem）和一些不应该出现的项目（括号已删除）

我已经更改了“我的”打印版本以更接近“他们的”版本（Hello而不是HelloWorld），并做了其他小更改…相同的错误

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

我的代码：

B.法律改革委员会

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

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

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>
</body>
</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>

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

您需要将

index.js

重命名为

index.jsx
您需要将index.js
重命名为index.jsx
愚蠢的问题：您尝试过删除“条目”声明中的方括号吗
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]
}

愚蠢的问题：你试过去掉“条目”声明中的方括号吗
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]
}

从第二个webpack配置文件中，查询应该位于babel loader对象内部
module: {
  loaders: [
    {
      test: /\.js$/, 
      include: __dirname + '/app', 
      loader: "babel-loader",
      query: {
        presets: ['react']
      } 
    }
  ]
}

如果您计划使用es6，请不要忘记安装babel-preset-es2015
插件。
从第二个网页配置文件中，查询应该位于babel loader对象内部
module: {
  loaders: [
    {
      test: /\.js$/, 
      include: __dirname + '/app', 
      loader: "babel-loader",
      query: {
        presets: ['react']
      } 
    }
  ]
}

如果您计划使用es6，请不要忘记安装babel-preset-es2015
插件。
工作代码
在我的头撞到墙上（老实说，这有助于击败知识-所以这不是毫无意义的）…我做了一些小的改变，现在似乎成功了：
将.js改为.jsx——我喜欢“明确”地承认这些不是普通的OLEJS（我认为不是必需的，更多样式）
我已经删除了babelrc文件，并将查询移动到webpack.config…似乎更容易在单个文件中划分内容。这实际上对我不起作用…se'la'vie
“解决方案”似乎是将\uuu dirname+'/dir'
更改为路径。将（…）
-withvar path=require（'path'）
实际包括在内。我将研究（如果找不到一个问题，我会问一个新问题）这两者如何/为什么不相等，但我只能假设这与不同的操作系统有关（我的Windows 10x64）
编辑：只是一些随机的戳，但是包括：{u dirname+'app'，
失败…就像'\app'
，'\app\'
，'/app'
，'/app/'code>…不知道为什么，但是path.join（…）是有效的
同样值得注意的是，模板：uuu dirname+“…”，
似乎可以工作，但它下面的部分不行。Filename vs directory，所以同样不能确定区别
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]
}

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

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var HelloWorld=React.createClass({
渲染：函数（）{
返回世界你好！
}
});
ReactDOM.render(
,
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>
</body>
</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>


Github战役
工作代码
在我的头撞到墙上（老实说，这有助于击败知识-所以这不是毫无意义的）…我做了一些小的改变，现在似乎成功了：
将.js改为.jsx——我喜欢“明确”地承认这些不是普通的OLEJS（我认为不是必需的，更多样式）
我已经删除了babelrc文件，并将查询移动到webpack.config…似乎更容易在单个文件中划分内容。这实际上对我不起作用…se'la'vie
“解决方案”似乎是将\uuu dirname+'/dir'
更改为路径。将（…）
-withvar path=require（'path'）
实际包括在内。我将研究（如果找不到一个问题，我会问一个新问题）这两者如何/为什么不相等，但我只能假设这与不同的操作系统有关（我的Windows 10x64）
编辑：只是一些随机的戳，但是包括：{u dirname+'app'，
失败…就像'\app'
，'\app\'
，'/app'
，'/app/'code>…不知道为什么，但是path.join（…）是有效的
同样值得注意的是，模板：uuu dirname+“…”，
似乎可以工作，但它下面的部分不行。Filename vs directory，所以同样不能确定区别
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]
}

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

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var HelloWorld=React.createClass({
渲染：函数（）{
返回世界你好！
}
});
ReactDOM.render(
,
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>
</body>
</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>


Github战役
您是否尝试添加查询：{presets:['react']}
？@for.babelrc
？如输入查询：在初始括号之前？似乎不在任何git repo或列出的任何示例中-摆弄引号/无引号单引号/双引号会产生相同的错误。您也可以将其添加到webpack.config.js
文件中，就像这里的index.js不应该是index.jsx吗？@删除的.babelrc
，移动