React 在小于号之前给出错误

Question

我有这样的问题： react-native unexpected token on less-than symbol

这是我所有的东西：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';

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

app.js

import React from 'react';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hi, my name is Cir. I am 19 and from Kiev, Ukraine. How are you ?</h1>  
      </div>
    );
  }
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>React ToDos App</title>
</head>
<body>
    <div id="app"></div>

    <script src="bundle.js"></script>
</body>
</html>

webapck.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080/',
        'webpack/hot/only-dev-server',
        './src'
    ],
    output: {
           path: path.join(__dirname, "public"),
           filename: "bundle.js"
    },
    resolve: {
        modulesDirectories: ['node_modules', 'src'],
        extensions: ['', '.js']
    },
    module: {
        loader: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loaders: ["react-hot-loader/webpack", "babel?presets[]=react,presets[]=es2015"]
        }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

我的文件树

这里是错误的。它发生在我的 index.js

中小于 sympol 之前

我还是 React 的新手，很抱歉我以后提出愚蠢的问题。

Answer 1

您需要将行更改为

import App from "./components/app";
ReactDOM.render(<App />, document.getElementById("app"));

如果您尝试使用 components/app，Node 认为您想要使用 components 模块中的 app.js 脚本。您可以在 node_modules 目录中看到模块。

其中 ./components/app 表示您要在 components 目录中使用 app.js。

此外，您需要使用<App />而不是<FirstRender />，因为您导出的是Appclass，而不是FirstRender。

Answer 2

您正在使用 babel 预设，因此首先确保您已经使用

安装了 babel-preset-loader

npm install babel-preset-loader

同时安装 babel-core 和 npm install babel-core

然后在您的 webpack 中，您需要将加载器编辑为

loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel?presets[]=es2015&presets[]=react']
      }
]

请注意，它在模块中是 loaders 而不是 loader。

如果这不起作用，那么您可以尝试另一种解决方案，即创建 .babelrc 文件，然后向其中添加以下内容

{
  "presets": ["react", "es2015", "stage-0"]
}

并省略 webpack.config.js 文件中的预设

React 在小于号之前给出错误

React give mistake before less-than symbol

javascript

reactjs

babeljs

webpack-dev-server