2015年　年末JavaScript祭を開催しました。そのときのスライドを公開。 React.jsのHellow Worldをもう少しがんばろうか。っていうゆるふわなReact.js超超入門。JSXと初めてのComponent。

1. React.jsで
HowManyPizza??
React.js 超入門
年末JavaScript祭2015 ゆく年くる年
Written By ITかあさん

2. Who am I ?

3. ITかあさんITかあさんブログ運営5年
業界10年になる生粋のフリーのWEB屋

4. What s React.js

5. What s React.js
M V C

6. What s React.js
M V C
View （これ

7. 元ネタHOW MANY BEER AND PIZZA?
安藤 祐介さん

8. –ただ、それだけ。（許可とってます
これパクってReactで作りたい

9. React.js
• Componentを作るためのViewライブラリ
• Virtual DOMという仕組み
• ブラウザのコンソールでエラー管理が出来て楽

10. –それがReact.js
速くて、管理しやすい,イケメン。

11. でも難しそう。。

12. 15分でReact.jsは理解しきれないかも。

13. たった２つの言葉を覚えてください

14. JSXとComponent

15. JSXとComponent
ジェーエスエックスとコンポーネント

16. JSX
• JavaScript XMLの略。

17. JSXの例
<div className="navbar-header">
<a className="navbar-brand" href="#">ああああ<
</div>

18. JSXの例
<div className="navbar-header">
<a className="navbar-brand" href="#">ああああ<
</div>
ほぼほぼHTML。

19. Component
React.jsはComponent(構成要素）を定義するよ

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

22. Componentの出力
ReactDOM.render(
<PizzaFooter />,
document.getElementById('result_area')
);

23. Componentの出力
ReactDOM.render(
<PizzaFooter />,
document.getElementById('result_area')
);
さっきの
PizzaFooterタグ

24. Componentの出力
ReactDOM.render(
<PizzaFooter />,
document.getElementById('result_area')
); PizzaFooter出力先

25. Gist
https://gist.github.com/chihirokaasan/a5325ba3032108cd4a74

26. React.js JSXのいいところ
• ほぼほぼHTML！
• 自分で新しくタグを定義する
• ライブラリ群読み込むだけで導入もラク！
• ブラウザさえあればすぐにReact.js使える！

27. はい、私のReactネタは終了です

28. はえーよ

29. せっかくなのでJSXをもう少し詳しく

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>
);
}
});
何か変数っぽい

32. 変数っぽいのを出力
ReactDOM.render(
< PizzaHeader title="あああ"/>,
document.getElementById('result_area')
);
<!̶出力結果̶>
<div class= container >
あああ
</div>

33. ちなみにprop
this.props.●● で管理
PropにはObjectも関数も何でも入る （ゆるい
PropTypesで型定義できる（それはまたの機会
Component内で変更はしない。それはState

34. JSX Reactで
• オリジナルのタグが作れる！
• props使って中身の文字列だけ変更可能

35. 簡単だし、明日からちょっと使えそう。

36. で、ピザアプリ
新しい知識はほぼ無し

37. 雑っ。。How Many Pizza Do You Need?
ITかあさん作

38. React.jsのイベント

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>
);
}
});
デフォルトから値変更

43. 入力した値

44. こちらに反映

45. こちらに反映
ただ、それだけ
後の項目は足し算、割り算、かけ算してるだけ

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を定義

51. 複数出力
ReactDOM.render(
<Pizza />,
document.getElementById('result_area')
);

52. 複数出力
ReactDOM.render(
<Pizza />,
document.getElementById('result_area')
);
JSXを呼び出したJSXを定義して出力

54. 複雑なHTMLもOK
JSXの組み合わせ！
<PizzaHeader />
<Result />

55. 便利なアドオン
• formsy-react
• TestUtils
• PureRenderMixin
• LinkedStateMixin

56. 便利なアドオン
• formsy-react
• TestUtils
• PureRenderMixin
• LinkedStateMixin
他にも色々あるよー

57. 導入簡単、
アドオンたくさん

58. 導入簡単、
アドオンたくさん
2016年ますます流行るかもしれないReact.js

59. 導入簡単、
アドオンたくさん
2016年ますます流行るかもしれないReact.js
この機会にぜひ！

60. ありがとうございました