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

gulp + React

Avatar for mex-ichikawa mex-ichikawa
September 25, 2014
Programming
430
2

gulp + React

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

Avatar for mex-ichikawa

mex-ichikawa

September 25, 2014

More Decks by mex-ichikawa

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

Other Decks in Programming

See All in Programming
AIとASP.NET Coreで雑Webアプリを作った話
Avatar for Mayuki Sawatari mayuki
0
530
例外の正しい扱い方 そのエラー try-catchして大丈夫？
Avatar for Watanabe Jin jinwatanabe
0
230
DynamoDBには集計系のクエリがないけどなんとかしたい
Avatar for 村上優稀 musan
1
140
「エンジニアインターン、どうやって取った？」準備のリアルを語るLT会 Progate BAR
Avatar for akio akiomatic
0
130
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
Avatar for terry-u16 terryu16
0
260
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
Avatar for Daisuke Garaike contour_gara
0
540
New "Type" system on PicoRuby
Avatar for pocke pocke
1
860
Mujeres en SEO Summit 2026 - Greatest Disaster Hits en Web Performance
Avatar for Estela Franco guaca
0
170
Creating Composable Callables in Contemporary C++
Avatar for Björn Fahller rollbear
0
120
過去最大のMCPアップデート! 2026-07-28 RC版の謎に迫る
Avatar for matsukada licux
6
280
Oxcを導入して開発体験が向上した話
Avatar for Yuji Yamaguchi yug1224
4
310
dRuby over BLE
Avatar for makicamel makicamel
2
330

Featured

See All Featured
It's Worth the Effort
Avatar for 3n 3n
188
29k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
460
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
380
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
270
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.5k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
420
Leo the Paperboy
Avatar for Maya Tellez mayatellez
7
1.8k

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.