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

gulp + React

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

gulp + React

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

Avatar for mex-ichikawa

mex-ichikawa

September 25, 2014
Tweet

More Decks by mex-ichikawa

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

Other Decks in Programming

See All in Programming
育てるアーキテクチャ：戦い抜くPythonマイクロサービスの設計と進化戦略
Avatar for fujidomoe fujidomoe
1
170
明日から始めるリファクタリング
Avatar for ryounasso ryounasso
0
140
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
4
380
After go func(): Goroutines Through a Beginner’s Eye
Avatar for Vaibhav Gupta 97vaibhav
0
390
monorepo の Go テストをはやくした〜い！~最小の依存解決への道のり~ / faster-testing-of-monorepos
Avatar for convto convto
2
490
Six and a half ridiculous things to do with Quarkus
Avatar for Holly Cummins hollycummins
0
170
Catch Up: Go Style Guide Update
Avatar for ANDPAD inc andpad
0
230
なぜGoのジェネリクスはこの形なのか？ Featherweight Goが明かす設計の核心
Avatar for Ryotaro ryotaros
7
1.1k
タスクの特性や不確実性に応じた最適な作業スタイルの選択（ペアプロ・モブプロ・ソロプロ）と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
Avatar for yuki honyanya
3
170
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
350
Le côté obscur des IA génératives
Avatar for Pascal Le Merrer pascallemerrer
0
140
TFLintカスタムプラグインで始める Terraformコード品質管理
Avatar for bells17 bells17
2
170

Featured

See All Featured
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
185
22k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.9k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
61k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
6
240
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k

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.