无法找到反应

Question

index.js：

import react from 'react';
import {render} from 'react-dom';

render(
    <h1>Hello World!</h1>,
    document.getElementById('root')
);

package.json：

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --progress --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Callum Linington",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "whatwg-fetch": "^2.0.3"
  },
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-env": "^1.3.2",
    "bluebird": "^3.5.0",
    "eslint": "^3.19.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  }
}

Webpack配置：

var webpack = require('webpack');
var packages = require('./package.json');
var path = require('path');

module.exports = {
    entry: {
        main: './src/index.js',
        vendor: Object.keys(packages.dependencies)
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor' // Specify the common bundle's name.
        })
    ],

    devtool: "cheap-eval-source-map",

    devServer: {
        contentBase: path.join(__dirname, "dist"),
        publicPath: '/',
        port: 9000
    },

    module: {
        rules: [
            {
                test: /\.js?$/,
                use: [ 'babel-loader', ],
                exclude: /node_modules/
            }
        ]
    }
};

Webpack输出：

Chrome Dev输出：

Answer 1

以大写字母开头命名导入的React类是非常重要的。你的第一行应该是：import React from 'react';。这是因为Babel将所有JSX标记转换为React.createElement(....)并且React不存在select * from your_table t where id = ( select id from your_table t2 where least(t.sender_id, t.recipient_id) = least(t2.sender_id, t2.recipient_id) and greatest(t.sender_id, t.recipient_id) = greatest(t2.sender_id, t2.recipient_id) order by id limit 1 ); 。正是控制台输出告诉你的。