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

gulp + React

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
7
8.5k
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
450
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
770
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
CSC307 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
670
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
組織で育むオブザーバビリティ
Avatar for ryotaro kobayashi ryota_hnk
0
170
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
CSC307 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
690
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
640
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
150
Automatic Grammar Agreementと Markdown Extended Attributes
について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
180

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
130
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
97
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
220
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
190
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
280
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k

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.