React.jsでHowManyPizza

3,074 views

Published on

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

Published in: Internet
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,074
On SlideShare
0
From Embeds
0
Number of Embeds
1,775
Actions
Shares
0
Downloads
3
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

React.jsでHowManyPizza

  1. 1. React.jsで HowManyPizza?? React.js 超入門
 年末JavaScript祭2015 ゆく年くる年 Written By ITかあさん
  2. 2. Who am I ?
  3. 3. ITかあさんITかあさんブログ運営5年
 業界10年になる生粋のフリーのWEB屋

  4. 4. What s React.js
  5. 5. What s React.js M V C
  6. 6. What s React.js M V C View (これ
  7. 7. 元ネタHOW MANY BEER AND PIZZA?
 安藤 祐介さん
 

  8. 8. –ただ、それだけ。(許可とってます これパクってReactで作りたい
  9. 9. React.js • Componentを作るためのViewライブラリ • Virtual DOMという仕組み • ブラウザのコンソールでエラー管理が出来て楽
  10. 10. –それがReact.js 速くて、管理しやすい,イケメン。
  11. 11. でも難しそう。。
  12. 12. 15分でReact.jsは理解しきれないかも。
  13. 13. たった2つの言葉を覚えてください
  14. 14. JSXとComponent
  15. 15. JSXとComponent ジェーエスエックスとコンポーネント
  16. 16. JSX • JavaScript XMLの略。
  17. 17. JSXの例 <div className="navbar-header"> <a className="navbar-brand" href="#">ああああ< </div>
  18. 18. JSXの例 <div className="navbar-header"> <a className="navbar-brand" href="#">ああああ< </div> ほぼほぼHTML。
  19. 19. Component React.jsはComponent(構成要素)を定義するよ
  20. 20. Componentの例 var PizzaFooter = React.createClass({ render: function(){ return( <footer className="navbar navbar-default navbar-static-top …… </footer> ); } });
  21. 21. Componentの例 var PizzaFooter = React.createClass({ render: function(){ return( <footer className="navbar navbar-default navbar-static-top …… </footer> ); } }); 赤字の部分はコピペでOK
  22. 22. Componentの出力 ReactDOM.render( <PizzaFooter />, document.getElementById('result_area') );
  23. 23. Componentの出力 ReactDOM.render( <PizzaFooter />, document.getElementById('result_area') ); さっきの
 PizzaFooterタグ
  24. 24. Componentの出力 ReactDOM.render( <PizzaFooter />, document.getElementById('result_area') ); PizzaFooter出力先
  25. 25. Gist https://gist.github.com/chihirokaasan/a5325ba3032108cd4a74
  26. 26. React.js JSXのいいところ • ほぼほぼHTML! • 自分で新しくタグを定義する • ライブラリ群読み込むだけで導入もラク! • ブラウザさえあればすぐにReact.js使える!
  27. 27. はい、私のReactネタは終了です
  28. 28. はえーよ
  29. 29. せっかくなのでJSXをもう少し詳しく
  30. 30. JSXを便利に使う var PizzaHeader = React.createClass({ render: function(){ return( <div className= container"> …… {this.props.title} </div> ); } });
  31. 31. JSXを便利に使う var PizzaHeader = React.createClass({ render: function(){ return( <div className="container"> …… {this.props.title} </div> ); } }); 何か変数っぽい
  32. 32. 変数っぽいのを出力 ReactDOM.render( < PizzaHeader title="あああ"/>, document.getElementById('result_area') ); <!̶出力結果̶>
 <div class= container > あああ </div>
  33. 33. ちなみにprop this.props.●● で管理 
 PropにはObjectも関数も何でも入る (ゆるい
 PropTypesで型定義できる(それはまたの機会
 Component内で変更はしない。それはState
 

  34. 34. JSX Reactで • オリジナルのタグが作れる! • props使って中身の文字列だけ変更可能
  35. 35. 簡単だし、明日からちょっと使えそう。
  36. 36. で、ピザアプリ 新しい知識はほぼ無し
  37. 37. 雑っ。。How Many Pizza Do You Need?
 ITかあさん作

  38. 38. React.jsのイベント
  39. 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. 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. 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. 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. 43. 入力した値
  44. 44. こちらに反映
  45. 45. こちらに反映 ただ、それだけ 後の項目は足し算、割り算、かけ算してるだけ

  46. 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. 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. 48. 複数出力 var Pizza = React.createClass({ render: function(){ return( <div> <PizzaHeader /> <Result /> <PizzaFooter /> </div> ); } });
  49. 49. 複数出力 var Pizza = React.createClass({ render: function(){ return( <div> <PizzaHeader /> <Result /> <PizzaFooter /> </div> ); } }); 先にJSX定義して複数呼び出し
  50. 50. 複数出力 var Pizza = React.createClass({ render: function(){ return( <div> <PizzaHeader /> <Result /> <PizzaFooter /> </div> ); } }); 複数JSXを持つ、新たなJSXを定義
  51. 51. 複数出力 ReactDOM.render( <Pizza />, document.getElementById('result_area') );
  52. 52. 複数出力 ReactDOM.render( <Pizza />, document.getElementById('result_area') ); JSXを呼び出したJSXを定義して出力
  53. 53. 複雑なHTMLもOK JSXの組み合わせ! <PizzaHeader /> <Result />
  54. 54. 便利なアドオン • formsy-react • TestUtils • PureRenderMixin • LinkedStateMixin
  55. 55. 便利なアドオン • formsy-react • TestUtils • PureRenderMixin • LinkedStateMixin 他にも色々あるよー
  56. 56. 導入簡単、 アドオンたくさん
  57. 57. 導入簡単、 アドオンたくさん 2016年ますます流行るかもしれないReact.js
  58. 58. 導入簡単、 アドオンたくさん 2016年ますます流行るかもしれないReact.js この機会にぜひ!
  59. 59. ありがとうございました

×