Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
gulp + React
Search
mex-ichikawa
September 25, 2014
Programming
2
380
gulp + React
Reactを含むWebプロジェクト制作環境を模索。
Project template link:
http://goo.gl/a5FsNW
mex-ichikawa
September 25, 2014
Tweet
Share
More Decks by mex-ichikawa
See All by mex-ichikawa
Three.js vs Unity5
mex_ichikawa
0
53
WebAudioAPIで(目的の)SE作れなかった話
mex_ichikawa
0
30
Bower + WebComponents
mex_ichikawa
0
27
Blob URL Scheme
mex_ichikawa
0
400
Other Decks in Programming
See All in Programming
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
5
4.6k
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.2k
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
150
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
170
"config" ってなんだ? / What is "config"?
okashoi
0
210
Ruby Function Composition
bkuhlmann
1
320
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
360
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
390
Folding Cheat Sheet #2
philipschwarz
PRO
0
110
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~
shinout
1
640
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
430
ONE WEDGE_company_guide
1wedge_one
0
340
Featured
See All Featured
Practical Orchestrator
shlominoach
181
9.7k
Building Adaptive Systems
keathley
29
1.8k
How GitHub (no longer) Works
holman
304
140k
What's in a price? How to price your products and services
michaelherold
237
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.9k
What's new in Ruby 2.0
geeforr
336
31k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
What the flash - Photography Introduction
edds
64
11k
Making Projects Easy
brettharned
107
5.5k
We Have a Design System, Now What?
morganepeng
42
6.7k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Transcript
gulp + React @mex-ichikawa Tsukiji.front - 2014/09/25
Reactを使うための環境構築の話
What’s React? • MVCモデルにおけるViewとして利用できるWebUIライブラリ • polymer のような WebComponents 支援ライブラリではない •
facebook/instagram サイト内で実際に利用されている • 2013年に facebook が OSS として公開
Why React? • 他の技術に依存しないシンプルなViewエンジン • 仮想DOMを利用しnode.jsでレンダリングできる • コンパイルが必要なJSXというxml埋め込みオプションがある • ある程度自動化が必要な構成
React Demo 基本的な使い方
React Demo JSXの静的コンパイル npm install -g react-tools jsx src/ build/
Automation
React Demo gulp + React gulp-react
React Demo gulp + React + CoffeeScript gulp-cjsx
Project Template http://goo.gl/a5FsNW
And more... • renderComponentToString でコンポーネントを静的生成 • react component database -
http://react-components.com/
Thank you.