Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
65
WebAudioAPIで(目的の)SE作れなかった話
Avatar for mex-ichikawa mex_ichikawa
0
42
Bower + WebComponents
Avatar for mex-ichikawa mex_ichikawa
0
43
Blob URL Scheme
Avatar for mex-ichikawa mex_ichikawa
0
590

Other Decks in Programming

See All in Programming
巨大モノリシックアプリ モダン化大作戦
Avatar for Ryomm ktcryomm
1
1.1k
Omarchy Tokyo やると聞いて UMPC 買ってセットアップしてきた
Avatar for Fumiaki MATSUSHIMA mtsmfm
0
160
モデルのリファクタリングが難しいと思ったら、そもそも複雑だったのはビジネス仕様だった ? / is-the-business-domain-the-real-complexity
Avatar for hatsu hatsu38
0
390
Apple Intelligence を用いた個人情報誤送信防止、及びユーザーリクエスト体験の改善について
Avatar for Yuki Kuwashima yukiny
0
130
Family mrubyの進捗
Avatar for Katsuhiko Kageyama kishima
1
130
モジュールの視点からSwiftを読み解く #iosdc
Avatar for Shigure Shimotori s_shimotori
0
190
スマート反転とウェブアクセシビリティ
Avatar for KAMIHARA Takumi camiha
0
210
選挙速報を多くのユーザーへ 届ける Live Activities 設計
Avatar for kengo saito hamayokokuririn
0
160
仕様駆動開発による爆速プロダクト開発 / Bakusoku Spec Driven Development
Avatar for Keisuke Kobayashi kobakei
0
130
大喜利で理解するLLM as a Judge / Understanding LLM-as-a-Judge through Ogiri
Avatar for rockname rockname
0
160
setup-vp GitLab対応の裏側
Avatar for Naoki Haba naokihaba
0
120
WebRTC映像をAirPlayに対応させる挑戦.pdf
Avatar for monolithic-adam monolithic_adam
0
300

Featured

See All Featured
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
4
1.2k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
810
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.3k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
520
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
880
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.8k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
340
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
410
From π to Pie charts
Avatar for Rasagy Sharma rasagy
1
380
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
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.