0
私は今、ReactJSの学習を始めました。私はここでこのチュートリアルを続けています。 egghead.io私はちょうど最初のビデオを完成させ、ビデオのようにアプリケーションを開発しましたが、htmlの部分を見ることはできますが、App.jsから動的コンテンツを読み込むことができませんでした。 JSReactJSの最初のプログラムに関するいくつかの問題に直面
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が、それは最後に1つのモジュールに問題が見つかりました –
隠さ言い始める一方で、私は奇妙なことを発見します。http：// localhost：3333/index.jsませんが、必ず、なぜそれが起こって何とかでindex.jsさを構築されていない –