Реакция: сбой анализа модуля: неожиданный токен

Question

начал учиться реагировать пытаясь следовать инструкциям в Интернете и чтобы выполнить базовую настройку, но получить ошибку ниже:

>  ERROR in ./src/index.js 7:11
>     Module parse failed: Unexpected token (7:11)

You may need an appropriate loader to handle this file type.
|     render(){
|        return (
>            <div>
|                <h1>Hello!</h1>
|            </div>

Answer 1

Конфигурация вашего веб-пакета должна загружать файлы с помощью загрузчиков. Пример конфигурации webpack с использованием webpack 4 и babel 7:

const path = require('path');
const webpack = require('webpack');
const urlLoader = require('url-loader');

// copy manifest.json to the path: 'public/build'
// this will allow for the authRequest to see the file at www.example.com/manifest.json
const CopyWebpackPlugin = require('copy-webpack-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    target: 'web',
    output: {
        path: path.resolve('dist'),
        filename: 'index_bundle.js',
    },
    devtool: "source-map",
    devServer: {
        historyApiFallback: true,
        watchOptions: {aggregateTimeout: 300, poll: 1000},
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
            "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
        },
    },
    module: {
        rules: [
            {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
            {
                test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
                loader: 'file-loader',
            },
            {test: /\.css$/, loader: 'style-loader!css-loader'}
        ]
    },
    plugins: [HtmlWebpackPluginConfig]
};

Обратите внимание, что в вашей конфигурации это babel-loader, а не babel linke. Теперь мои зависимости:

"@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-proposal-function-bind": "^7.2.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
    "@babel/plugin-transform-shorthand-properties": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "bootstrap": "^3.3.7",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "deep-freeze": "^0.0.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "json-loader": "^0.5.7",
    "path": "^0.12.7",
    "style-loader": "^0.16.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.2.0",
    "webpack-dev-server": "^3.1.14"

конечно, некоторые из них могут не понадобиться в вашем случае. Также рассмотрите возможность использования webpack-encore - это более простая версия webpack, созданная для облегчения взаимодействия с бэкэндом Symfony, но она вполне подходит для других бэкэндов. См. Например Конфигурация веб-пакета (-encore):

// webpack.config.js
const Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public')
    .setPublicPath('/')

    // read main.js     -> output as web/build/app.js
    .addEntry('js/main', './public/src/main.js')
    // read global.scss -> output as web/build/global.css
    .addStyleEntry('css/styles', './public/scss/global.scss')
    .disableSingleRuntimeChunk()
    // enable features!
    .enableSassLoader()
    .autoProvidejQuery()
    .enableSourceMaps(!Encore.isProduction());

module.exports = Encore.getWebpackConfig();

Answer 2

Настройка webpack и babel НЕ является одним из простых шагов, когда «начал учиться реагировать», поэтому я бы рекомендовал использовать create-react-app.

https://facebook.github.io/create-react-app/docs/getting-started