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

gulp + React

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

gulp + React

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

28cb8e73f08ad17ef0370b6b6a51630c?s=128

mex-ichikawa

September 25, 2014
Tweet

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.