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

您正在使用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文件

中的预设

Answer 2

您需要将行更改为

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

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

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

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

React在小于符号之前给出错误

2 个答案: