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.

3

Share

Download to read offline

20160421 react勉強会

Download to read offline

2016/04/21 開催のReact.js & AngularJSの勉強会資料です

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

20160421 react勉強会

  1. 1. React.jsコンポーネント設 計のツボ
  2. 2. • • オンライン 顧問 税理士・社労士・弁理士・行政書士・司法書士
  3. 3. 本⽇の内容 1. 組織のスキルセット 2. 学ぶステップ 3. props, state, fluxアーキテクチャ
  4. 4. 1. 組織のスキルセット
  5. 5. • HTMLとCSSの専⾨家 JavaScript: △ の⼈ よくあるスキルセット デザイナー、HTML/CSSコーダー • JavaScript: ○ HTML: △ CSS: × の⼈ サーバーサイドエンジニア だけ だと…
  6. 6. • デザイン上のエレメント構成 • 再利⽤や責務、テストのしやすさ を考慮したコンポーネント分割 ほぼ無理 両立させる必要がある
  7. 7. • HTMLとCSSの専⾨家 最低限 • JavaScript OKな⼈ が何⼈か必要
  8. 8. 大まかな手順 デザイン (イラレ的な) JavaScript 仮のHTML構築 HTML/CSS コーディング 1 HTML/CSSな⼈JavaScriptな⼈ 2 3 コンポーネント設計 2でreact-bootstrapやmaterial-ui等 UIツールキットを利用するとうまく行きやすい
  9. 9. 2. 学ぶステップ
  10. 10. • react-howto https://github.com/petehunt/react-howto • 翻訳: React初学者のためのガイド @Qiita (原⽂の⽅が若⼲新しいようです) 参考文献
  11. 11. 1. React (公式のチュートリアルを⾒る・やる) 2. npm (モジュールシステム, パッケージシステム) 3. JavaScriptのバンドラ (gulp, browserify, webpack等) 4. ES6 (俄然JSが楽しくなる) 5. ルーティング (react-router⼀択か) 6. Flux 7. Immutable.js (バグを減らすために) 推奨ステップ
  12. 12. 3. props, state, flux
  13. 13. デモ
  14. 14. Reactのモノ作り コンポーネントのツリー構造を作っていくこと 1. ある「画⾯」を表すコンポーネントを作る 2. 画⾯内の「部分」を担うコンポーネントを切り出す or 既存コンポーネントを配置する
  15. 15. コンポーネント分割 画面内で持つべき「責務/役割」をベースに なるべく小さく • ⾒通しが良くなる • テストしやすい
  16. 16. データフロー設計 基本、なるべくツリーの上部のコンポーネント 誰がデータを持つべきか 中間状態を持つ必要があれば 末端コンポーネントにstateを持たせる 全体としてstateの利⽤を極⼒控える
  17. 17. 中間状態? データとして不完全な(例えば編集中)の状態 良い⾔葉を思いつかなかったので… (適当な造語) e.g. • ⽇付を⼊⼒中のテキストフィールド
  18. 18. Screen ToolsWidget VisibleColumns Table 表示カラム
  19. 19. VisibleColumnsStore Fluxは平たく言うと グローバル変数 Screen ToolsWidget VisibleColumns Table 表示カラム 変更Action 通知
  • KazukiImamura

    Apr. 21, 2016
  • atsukoshibuya

    Apr. 21, 2016
  • ChieArai

    Apr. 21, 2016

2016/04/21 開催のReact.js & AngularJSの勉強会資料です

Views

Total views

1,198

On Slideshare

0

From embeds

0

Number of embeds

49

Actions

Downloads

7

Shares

0

Comments

0

Likes

3

×