Let's react

② ライブラリ
Let’s React
キーワード
① コンポーネント

Let’s React
キーワード
component（構成要素・部品）
部品を使いまわしてページを作成する

Let’s React
キーワード
共通のDOMをページ毎に再度読み込ませるのは無駄
Single Page Application

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
各ページ毎作成する必要がある

Let’s React
キーワード
SPA
1<!DOCTYPE html>
2<html>
3<head>
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を作成する
22 );
23 }
24 });
25 // コンポーネントをidが"app"の場所に紐付けて埋め込む
26 ReactDOM.render(<HelloWorld />, document.getElementById('app'));
27 </script>
28</body>
29</html>
30
31

Let’s React
キーワード
SPA
コードが増えてるじゃん

Let’s React
キーワード
SPA
1<!DOCTYPE html>
2<html>
3<head>
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を作成する
22 );
23 }
24 });
25 // コンポーネントをidが"app"の場所に紐付けて埋め込む
26 ReactDOM.render(<HelloWorld />, document.getElementById('app'));
27 </script>
28</body>
29</html>
30
31
共通分

Let’s React
キーワード
共通分

Let’s React
キーワード
不必要な読み込みを無くし、効率よく開発を行える
部品単位で開発を行える

Let’s React
キーワード
自由レゴ
＜
＞
＝
制約家を作る

Let’s React
キーワード
レゴ自由＜
制約家を作る

Let’s React
キーワード
フレームワークライブラリ＜
制約画面を作る

Let’s React
キーワード
制約が少ないので自由な設計で構築する事ができる

Let’s React
キーワード
React Angular
他ライブラリ
満たしている機能

Let’s React
キーワード
React Angular
・機能が豊富
・Angularが機能を満たす
・導入が難しい
・中規模から大規模に対応
・フレームワークに準拠
・機能が限定的
・他のライブラリが必要
・導入がしやすい
・全プロジェクト規模に対応
・自由な設計が可能
・設計が重要で難しい

Let’s React
キーワード
React Angular
VS
OR

Let’s React
キーワード
ReactもAngularも方法でしかない
求められる物によって採択するのがベスト
まとめ

Let's react

Recommended

Recommended

More Related Content

Similar to Let's react

Similar to Let's react (20)

Let's react