$30 off During Our Annual Pro Sale. View Details »

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
57
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
550

Other Decks in Programming

See All in Programming
30分でDoctrineの仕組みと使い方を完全にマスターする / phpconkagawa 2025 Doctrine
Avatar for Takashi Kanemoto ttskch
3
830
JETLS.jl ─ A New Language Server for Julia
Avatar for abap34 abap34
1
390
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
Avatar for Atsushi Kawamura (atzz/a2c) atzzcokek
0
220
Context is King？ 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
Avatar for r-kagaya rkaga
9
1.1k
「コードは上から下へ読むのが一番」と思った時に、思い出してほしい話
Avatar for HideyukiKitao panda728
PRO
38
25k
TestingOsaka6_Ozono
Avatar for O3(ozono) o3
0
150
Integrating WordPress and Symfony
Avatar for Alexandre Salomé alexandresalome
0
150
なあ兄弟、 余白の意味を考えてから UI実装してくれ！
Avatar for Ryomm ktcryomm
11
11k
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
AIコードレビューがチームの"文脈"を 読めるようになるまで
Avatar for Takumi Maruyama marutaku
0
350
まだ間に合う！Claude Code元年をふりかえる
Avatar for nogu nogu66
5
810
DSPy Meetup Tokyo #1 - はじめてのDSPy
Avatar for Masahiro Nishimi masahiro_nishimi
1
160

Featured

See All Featured
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
1k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.8k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k

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.