Let's react
- 2. ② ライブラリ Let’s React キーワード ① コンポーネント
- 4. Let’s React キーワード 共通のDOMをページ毎に再度読み込ませるのは無駄 Single Page Application
- 5. Let’s React キーワード 1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>sample</title> 6</head> 7<body> 8 <div> 10 <p>HelloWorld</p> 11 </div> 13</body> 14</html> 15 16 非SPA 各ページ毎作成する必要がある
- 6. Let’s React キーワード SPA 1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>ReactSample</title> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script> 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 9</head> 10<body> 11 <!-- ここに埋め込まれる --> 12 <div id="app"></div> 13 14 <!-- 実行したいコード --> 15 <script type="text/babel"> 16 // コンポーネント 17 var HelloWorld = React.createClass({ 18 render: function() { 19 return ( 20 // JSXというhtmlに似た記述方法でdomを作成する 21 <p>HelloWorld</p> 22 ); 23 } 24 }); 25 // コンポーネントをidが"app"の場所に紐付けて埋め込む 26 ReactDOM.render(<HelloWorld />, document.getElementById('app')); 27 </script> 28</body> 29</html> 30 31
- 8. Let’s React キーワード SPA 1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>ReactSample</title> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script> 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 9</head> 10<body> 11 <!-- ここに埋め込まれる --> 12 <div id="app"></div> 13 14 <!-- 実行したいコード --> 15 <script type="text/babel"> 16 // コンポーネント 17 var HelloWorld = React.createClass({ 18 render: function() { 19 return ( 20 // JSXというhtmlに似た記述方法でdomを作成する 21 <p>HelloWorld</p> 22 ); 23 } 24 }); 25 // コンポーネントをidが"app"の場所に紐付けて埋め込む 26 ReactDOM.render(<HelloWorld />, document.getElementById('app')); 27 </script> 28</body> 29</html> 30 31 共通分
- 11. Let’s React キーワード 自由 レゴ ＜ ＞ ＝ 制約 家を作る
- 12. Let’s React キーワード レゴ自由 ＜ 制約 家を作る
- 13. Let’s React キーワード フレームワークライブラリ ＜ 制約 画面を作る