在 CodeAcademy 中,这是编写 react 组件的示例语法
var Input = React.createClass({
getInitialState: function () {
return {
userInput: ''
};
},
handleUserInput: function (e) {
this.setState({
userInput: e.target.value
});
},
render: function () {
return (
<div>
<input
type="text"
onChange={this.handleUserInput}
value={this.state.userInput} />
<h1>{this.state.userInput}</h1>
</div>
);
}
});
它通常看起来像一个具有各种属性的基本 Javascript 对象,这对我来说很有意义。
这是反应官方教程的示例
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
我是Javascript和React的新手,所以第二种方法对我来说意义不大。 有人可以帮我了解像class NameForm extends React.Component
这样的东西与var Input = React.createClass
这样的东西相比如何吗? 另外,很想知道是否有更基本的教程可以使用官方教程中的语法来教授 react (在基本级别上解释了语法)
第一个例子是 ECMAScript 5,第二个是 ECMAScript 6
。在这里,您可以找到它们之间的更改列表。
要在 ECMAScript 6 上运行 React,你应该使用 Babel,但首先我建议:
ReactJS有很好的文档,首先 - 用它做"Hellow Word"应用程序。