Upgrade to Pro — share decks privately, control downloads, hide ads and more …

gulp + React

28cb8e73f08ad17ef0370b6b6a51630c?s=47 mex-ichikawa
September 25, 2014
Programming
2
360

gulp + React

Reactを含むWebプロジェクト制作環境を模索。
Project template link: http://goo.gl/a5FsNW

28cb8e73f08ad17ef0370b6b6a51630c?s=128

mex-ichikawa

September 25, 2014
Tweet

More Decks by mex-ichikawa

See All by mex-ichikawa
28cb8e73f08ad17ef0370b6b6a51630c?s=48 mex_ichikawa
0
47
28cb8e73f08ad17ef0370b6b6a51630c?s=48 mex_ichikawa
0
19
28cb8e73f08ad17ef0370b6b6a51630c?s=48 mex_ichikawa
0
23
28cb8e73f08ad17ef0370b6b6a51630c?s=48 mex_ichikawa
0
250

Other Decks in Programming

See All in Programming
2b67c3578e104daca8c6609e5be43d8d?s=48 balconia
0
150
7afd74181738991f61d6061562ff419d?s=48 hitsuji_haneta
2
680
7437b838338581b08ca72340b05475b9?s=48 abt
0
350
8d7983d03db1fb756ccdbcbf7b760f98?s=48 yamada1826
0
340
D840733454bebebb5d6f0a2d95754897?s=48 aokabic
1
150
F0012066f4fad79deb33bf5e9799b557?s=48 francescostrazzullo
0
130
347b7e6efc62b633d37a5d0a8d62ae86?s=48 junghyeonjae
0
180
0abc75d0ead1b1300178fad993308c67?s=48 motchy1204
0
140
D9455a5dc3e3ea4fcca207da70c306b0?s=48 murabayashi
0
1.2k
4fe56d2e6ecf4cbde3ddbf6ef54fc568?s=48 kairiyasumatsu
0
170
F5781435bf6dbab3cbbe791111383cf1?s=48 yannickbaron
0
110
Ac6dba8ce93944d17714de362ca17e54?s=48 muryoimpl
0
130

Featured

See All Featured
78b475797a14c84799063c7cd073962f?s=48 holman
293
130k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
19k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
247
21k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
633
49k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
117
26k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
13
920
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
61k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
364
63k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
660
54k
245cee81a9c424266e5e401d844ea881?s=48 lara
175
10k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
161
6.7k

Transcript

  1. gulp + React @mex-ichikawa Tsukiji.front - 2014/09/25

  2. Reactを使うための環境構築の話

  3. What’s React? • MVCモデルにおけるViewとして利用できるWebUIライブラリ • polymer のような WebComponents 支援ライブラリではない •

    facebook/instagram サイト内で実際に利用されている • 2013年に facebook が OSS として公開

  4. Why React? • 他の技術に依存しないシンプルなViewエンジン • 仮想DOMを利用しnode.jsでレンダリングできる • コンパイルが必要なJSXというxml埋め込みオプションがある • ある程度自動化が必要な構成

  5. React Demo 基本的な使い方

  6. React Demo JSXの静的コンパイル npm install -g react-tools jsx src/ build/

  7. Automation

  8. React Demo gulp + React gulp-react

  9. React Demo gulp + React + CoffeeScript gulp-cjsx

  10. Project Template http://goo.gl/a5FsNW

  11. And more... • renderComponentToString でコンポーネントを静的生成 • react component database -

    http://react-components.com/

  12. Thank you.