Question

我对React很新。我正在尝试使用webpack和babel创建简单的反应配置。但我的尝试都没有成功。当我运行npm start，然后从浏览器输入http://localhost:3333时，会出现一个空白页面。我只能看到页面的标题。我错过了什么？

这是我的代码。

webpack.config.js

module.exports = {
 entry: './main.js',
 output: {
    path: './',
    filename: 'index.js'
 },
 devServer: {
    inline: true,
    port: 3333
 },
 module: {
    loaders: 
    [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
            presets: ['react','es2015']
        }
    }]
 }
}

的package.json

{
"name": "es6-react-setup",
"version": "1.0.0",
"main": "index.js",
"scripts": {
  "start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
  "react": "^0.14.3",
  "react-dom": "^0.14.3"
},
"devDependencies": {
  "babel-core": "^6.3.17",
  "babel-loader": "^6.2.0"
},
"description": ""
}

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Setup</title>     
</head>
<body>
    <div id="app"></div>
    <script src="index.js"></script>
</body>
</html>

main.js

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

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

App.js

import React from 'react'; 
class App extends React.Component {
    render(){
        return <div>Hello</div>
    }
}

export default App

编辑：

我删除了index.js和node_modules。在那之后，我安装了反应反应-bom babel-loader babel-core babel-preset-es2015和babel-preset-react。然后出现在package.json下面。我还运行webpack命令来生成index.js

{
  "name": "es6-react-setup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "nw": "webpack --progress --profile --colors"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.3.17",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  }
}

Answer 1

你仍然缺少

＆＃13;

"webpack": "^1.8.5",
"webpack-dev-server": "^1.4.7"

＆＃13;

来自你的依赖。

简单的React组件不会出现

1 个答案: