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

gulp + React

mex-ichikawa
September 25, 2014
Programming
2
400

gulp + React

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

mex-ichikawa

September 25, 2014
Tweet

More Decks by mex-ichikawa

See All by mex-ichikawa
Three.js vs Unity5
mex_ichikawa
0
56
WebAudioAPIで(目的の)SE作れなかった話
mex_ichikawa
0
32
Bower + WebComponents
mex_ichikawa
0
36
Blob URL Scheme
mex_ichikawa
0
500

Other Decks in Programming

See All in Programming
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
CloudNativePGがCNCF Sandboxプロジェクトになったぞ！ 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
チームリードになって変わったこと
isaka1022
0
190
Domain-Driven Transformation
hschwentner
2
1.9k
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
JavaScriptツール群「UnJS」を5分で一気に駆け巡る！
k1tikurisu
10
1.8k
DROBEの生成AI活用事例 with AWS
ippey
0
130
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Automating Front-end Workflow
addyosmani
1367
200k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Documentation Writing (for coders)
carmenintech
67
4.6k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Rails Girls Zürich Keynote
gr2m
94
13k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Faster Mobile Websites
deanohume
306
31k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k

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.