Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React.jsでHowManyPizza

3,502 views

Published on

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

Published in: Internet

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. ありがとうございました

×