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
58
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
560

Other Decks in Programming

See All in Programming
なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)
Avatar for HIBIKI CUBE hibiki_cube
0
140
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
Avatar for Yoichiro Kubo heimusu
7
2.8k
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
330
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
130
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
400
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
0
540
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
1
230
AI巻き込み型コードレビューのススメ
Avatar for Nealle nealle
0
130
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k
Oxlintはいいぞ
Avatar for Yuji Yamaguchi yug1224
5
1.3k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
650
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
170

Featured

See All Featured
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
200
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
1.9k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.8k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
46
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
96

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.