陣營無法找到

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瀏覽器開發輸出：

Answer 1

這是crutial進口的名字陣營類開頭大寫字母。你的第一行應該是：import React from 'react';。這是因爲所有的JSX標籤都會被Babel轉換成類似React.createElement(....)和React的東西。究竟是什麼控制檯輸出告訴你。