【发布时间】：2016-08-08 15:08:56
【问题描述】：
我刚开始学习 ReactJS，我在这里学习本教程。 egghead.io我刚刚完成了它的第一个视频并开发了一个应用程序，如视频所示，但是我可以看到 html 部分但无法加载来自 App.js 的动态内容下面是我的代码：
App.js
import React from 'react';
class App extends React.Component {
// always expected to return
render() {
return '<div><h4>Hello World of ReactJS</h4></div>'
}
}
export default App;
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ReactJS Tutorial</title>
</head>
<body>
<h1>ReactJS First Project</h1>
<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'));
package.json
{
"name": "App",
"version": "1.0.0",
"description": "First application of ReactJS",
"private": true,
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "AD",
"license": "Apache",
"dependencies": {
"babel-core": "^6.13.1",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.13.1",
"babel-preset-react": "^6.11.1",
"react": "^15.3.0",
"react-dom": "^15.3.0"
},
"devDependencies": {
"webpack-dev-server": "^1.9.0"
}
}
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: ['es2015', 'react']
}
}
]
}
}
需要一些帮助才能运行它，不确定。我已经按照视频中的要求安装了所有东西，我使用的是节点 6.2.2。
【问题讨论】：
-
concole 有错误吗？
-
控制台没有错误，但我发现一个奇怪的东西，而 npm start 它在末尾显示 1 个模块隐藏
-
发现了一个问题：localhost:3333/index.js 不知道为什么会这样，但是 index.js 没有被构建
-
这个问题没有提出任何具体的问题！
-
@YanFoto 问题出现了，它没有反映 index.js 中的更改，没有生成应该由 babel 生成的文件
标签： javascript node.js reactjs