Mais conteúdo relacionado
Semelhante a React.jsでHowManyPizza (20)
React.jsでHowManyPizza
- 20. Componentの例
var PizzaFooter = React.createClass({
render: function(){
return(
<footer className="navbar navbar-default navbar-static-top
……
</footer>
);
}
});
- 21. Componentの例
var PizzaFooter = React.createClass({
render: function(){
return(
<footer className="navbar navbar-default navbar-static-top
……
</footer>
);
}
});
赤字の部分はコピペでOK
- 30. JSXを便利に使う
var PizzaHeader = React.createClass({
render: function(){
return(
<div className= container">
……
{this.props.title}
</div>
);
}
});
- 31. JSXを便利に使う
var PizzaHeader = React.createClass({
render: function(){
return(
<div className="container">
……
{this.props.title}
</div>
);
}
});
何か変数っぽい
- 39. var Result = React.createClass({
getInitialState() {
return {
textValue: 1,
…
};
},
changeText(e) {
this.setState({textValue: this.refs.inputText.value });
},
render() {
return (
<dd>{this.state.textValue}名</dd>
);
}
});
デフォルト値
- 40. var Result = React.createClass({
getInitialState() {
return {
textValue: 1,
…
};
},
changeText(e) {
this.setState({textValue: this.refs.inputText.value });
},
render() {
return (
<dd>{this.state.textValue}名</dd>
);
}
});
フォームの文字列を取得
- 41. var Result = React.createClass({
getInitialState() {
return {
textValue: 1,
…
};
},
changeText(e) {
this.setState({textValue: this.refs.inputText.value });
},
render() {
return (
<dd>{this.state.textValue}名</dd>
);
}
});
フォームの入力値ここに
- 42. var Result = React.createClass({
getInitialState() {
return {
textValue: 1,
…
};
},
changeText(e) {
this.setState({textValue: this.refs.inputText.value });
},
render() {
return (
<dd>{this.state.textValue}名</dd>
);
}
});
デフォルトから値変更
- 46. 注意点
var Pizza = React.createClass({
render: function(){
return(
<div className="navbar navbar-default navbar-static-top">
…….
</div>
<footer className="navbar navbar-default navbar-static-to
…….
</footer>
);
}
});
- 47. 注意点
var Pizza = React.createClass({
render: function(){
return(
<div className="navbar navbar-default navbar-static-top">
…….
</div>
<footer className="navbar navbar-default navbar-static-to
…….
</footer>
);
}
});
複数項目はNG! エラー発生!
- 48. 複数出力
var Pizza = React.createClass({
render: function(){
return(
<div>
<PizzaHeader />
<Result />
<PizzaFooter />
</div>
);
}
});
- 49. 複数出力
var Pizza = React.createClass({
render: function(){
return(
<div>
<PizzaHeader />
<Result />
<PizzaFooter />
</div>
);
}
});
先にJSX定義して複数呼び出し
- 50. 複数出力
var Pizza = React.createClass({
render: function(){
return(
<div>
<PizzaHeader />
<Result />
<PizzaFooter />
</div>
);
}
});
複数JSXを持つ、新たなJSXを定義