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

gulp + React

Avatar for mex-ichikawa mex-ichikawa
September 25, 2014
Programming
440
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
41
Bower + WebComponents
Avatar for mex-ichikawa mex_ichikawa
0
43
Blob URL Scheme
Avatar for mex-ichikawa mex_ichikawa
0
580

Other Decks in Programming

See All in Programming
私のClaude Code活用法 （個人開発編） - PHPerKaigi mini #4（2026/08/24）
Avatar for panda_program panda_program
1
140
Go を使い始めて 2 ヶ月の学び / My first two months with Go
Avatar for Daisuke Garaike contour_gara
0
370
Japan Community Day at Kubecon + CloudNativeCon Japan 2026: Learning Container Privilege Control by Building My Own Low-Level Container Runtime
Avatar for ternbusty ternbusty
1
170
PyConJP2026_wat_Python × Signal Processing: How to Draw Pictures with Sound Using Spectrogram Art
Avatar for wat wat
0
290
AI Readyの正体はデータマネジメントだ メダリオン2.0の最前線
Avatar for freee freee
PRO
0
360
Pythonの実行はどこまで賢くなったのか？ CPythonとPyPyから見る最適化のしくみ
Avatar for curekoshimizu curekoshimizu
3
1.7k
komatsuna「分散システムにおけるバグ分析手法」
Avatar for こまつな komatsunaqa
0
270
freeeにおけるEvalsの実践例の紹介
Avatar for freee freee
PRO
0
140
自動化したのに回らない テスト運用の壁 ―AI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
430
進化を続けるGo toolsの現在地 / The Current State of Ever-Evolving Go Tools
Avatar for hond hond0413
0
250
[PyCon KR 2026] More Variants, More Diversity for AI Accelerators
Avatar for Joongi Kim achimnol
0
110
運用ダッシュボードの設計を誰も教えてくれないのだけど みなさんどうしてるんですか？ - チームに監視するという文化を根付かせるための第一歩を踏みたい -
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
140

Featured

See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
400
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
530
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
380
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
430
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
280
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
280
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.5k

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.