0
私は、このリアクションのことに新しいブランドです。動きのある部分をすべて理解しようとしています。私はwebpack devサーバでサーバを起動し、コードをhttp://localhost:8080/にレンダリングしようとしましたが、役に立たないです。それは単純なフォームコンポーネントです。どのように私は物事を設定しているが、多くのことが間違っている可能性がありますが、それでも、まだ学習！誰もが提供できるお手伝いをありがとう。エラーがないので、コンポーネントがレンダリングされないのはなぜですか？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Practicing Components</title>
</head>
<body>
<div id="app"></div>
<script type='text/babel'></script>
</body>
</html>
このindex.htmlファイルは私のmain.jsファイルのレンダリングされています：私は私のモジュールローダーとエントリポイントを設定し、すべての点できた
import React from 'react';
import ReactDOM from 'react-dom';
class Main extends React.Component {
render() {
return (
<div>
<h1>Welcome to the Name Board!</h1>
<Form />
<Button />
</div>
);
}
}
class Form extends React.Component {
constructor(props) {
super(props);
this.state= {value: 'Please type your name.'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
return (
<input type="text" value={this.state.value} onChange={this.handleChange} />
);
}
}
class Button extends React.Component {
render() {
return (
<button value="Submit">
</button>
);
}
}
ReactDOM.render(<Main />, document.getElementById('app'));
を私はindex.htmlファイルを持っています私webpack.config.js：
var path = require("path");
module.exports = {
entry: {
app: ["./main.js"]
},
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}
]
}
};
はしかし、正常に接続されているすべてのエラーメッセージと自分のサーバーを持っていないにも関わらず、私は何もレンダリングしないのです。