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

gulp + React

Avatar for mex-ichikawa mex-ichikawa
September 25, 2014
Programming
430
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
62
WebAudioAPIで(目的の)SE作れなかった話
Avatar for mex-ichikawa mex_ichikawa
0
36
Bower + WebComponents
Avatar for mex-ichikawa mex_ichikawa
0
41
Blob URL Scheme
Avatar for mex-ichikawa mex_ichikawa
0
580

Other Decks in Programming

See All in Programming
ユニットテストの先へ：テスト技法で要求・仕様を整理するJava開発実践 / Beyond_Unit_Testing_Practical_Java_Development_Techniques_for_Organizing_Requirements_and_Specifications
Avatar for SHIMANE, Yoshikazu shimashima35
0
400
エージェンティックRAGにAWSで入門しよう！
Avatar for Har1101 har1101
8
1.5k
Composerを使ったサプライチェーン攻撃の様子を眺めてみる #phpstudy
Avatar for hideki kinjyo o0h
PRO
2
250
LLMによるContent Moderationの本番運用の裏側と品質担保への挑戦
Avatar for suikabar suikabar
2
620
過去最大のMCPアップデート! 2026-07-28 RC版の謎に迫る
Avatar for matsukada licux
6
280
New "Type" system on PicoRuby
Avatar for pocke pocke
1
860
ADKを使って簡単にAIエージェントを作ってみよう
Avatar for K1mu21 k1mu21
0
260
フロントエンドとバックエンドで「1文字」を揃えよう
Avatar for てきめん tekimen youkidearitai
PRO
0
510
Developing with AI Agents — Codex, Claude Code & Cowork Practical Guide
Avatar for Daisuke Masuda x5gtrn
PRO
0
1.3k
Inside Stream API
Avatar for Yuichi.Sakuraba skrb
1
700
気圧・高度・GPSを記録&可視化するアプリ「Koudo」を作った話
Avatar for Hajime Kato hjmkth
1
200
タクシーアプリ『GO』の バックエンド開発のおける AI利活用と若者のすべて
Avatar for Kazuhiko Yamashita pyama86
3
2k

Featured

See All Featured
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
950
HDC tutorial
Avatar for Michiel Stock michielstock
2
710
Designing for Performance
Avatar for Lara Hogan lara
611
70k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
290
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
330
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
790
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.3k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
200
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.9k

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.