Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
gulp + React
Search
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
Share
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
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
35
14k
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
870
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
時計仕掛けのCompose
mkeeda
1
290
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
820
Immutable ActiveRecord
megane42
0
140
昭和の職場からアジャイルの世界へ
kumagoro95
1
360
定理証明プラットフォーム lapisla.net
abap34
1
1.8k
Conform を推す - Advocating for Conform
mizoguchicoji
3
690
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
120
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.6k
Designing Experiences People Love
moore
139
23k
Navigating Team Friction
lara
183
15k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The Language of Interfaces
destraynor
156
24k
Statistics for Hackers
jakevdp
797
220k
Become a Pro
speakerdeck
PRO
26
5.1k
A better future with KSS
kneath
238
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Code Reviewing Like a Champion
maltzj
521
39k
Transcript
gulp + React @mex-ichikawa Tsukiji.front - 2014/09/25
Reactを使うための環境構築の話
What’s React? • MVCモデルにおけるViewとして利用できるWebUIライブラリ • polymer のような WebComponents 支援ライブラリではない •
facebook/instagram サイト内で実際に利用されている • 2013年に facebook が OSS として公開
Why React? • 他の技術に依存しないシンプルなViewエンジン • 仮想DOMを利用しnode.jsでレンダリングできる • コンパイルが必要なJSXというxml埋め込みオプションがある • ある程度自動化が必要な構成
React Demo 基本的な使い方
React Demo JSXの静的コンパイル npm install -g react-tools jsx src/ build/
Automation
React Demo gulp + React gulp-react
React Demo gulp + React + CoffeeScript gulp-cjsx
Project Template http://goo.gl/a5FsNW
And more... • renderComponentToString でコンポーネントを静的生成 • react component database -
http://react-components.com/
Thank you.