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

Other Decks in Programming

See All in Programming
Improving my own Ruby thereafter
Avatar for monochrome sisshiki1969
1
160
1から理解するWeb Push
Avatar for Minoru Takeuchi dora1998
7
2k
今だからこそ入門する Server-Sent Events (SSE)
Avatar for NearMeの技術発表資料です nearme_tech
PRO
3
260
Updates on MLS on Ruby (and maybe more)
Avatar for sylph01 sylph01
1
190
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
Avatar for azukiazusa azukiazusa1
11
4.5k
RDoc meets YARD
Avatar for Masafumi Okura okuramasafumi
4
170
Platformに“ちょうどいい”責務ってどこ？ 関心の熱さにあわせて考える、責務分担のプラクティス
Avatar for estie | エスティ estie
1
250
FindyにおけるTakumi活用と脆弱性管理のこれから
Avatar for adachi.ryo rvirus0817
0
550
旅行プランAIエージェント開発の裏側
Avatar for Ippo Matsui / 令和トラベル ippo012
2
930
Design Foundational Data Engineering Observability
Avatar for suci sucitw
3
210
GitHubとGitLabと AWS CodePipelineで CI/CDを組み比べてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
4
250
OSS開発者という働き方
Avatar for ANDPAD inc andpad
5
1.7k

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
87
4.8k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
74
5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
113
20k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Done Done
Avatar for chrislema chrislema
185
16k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
26
1.9k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
3k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k

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.