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
410

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
530

Other Decks in Programming

See All in Programming
「ElixirでIoT!!」のこれまでとこれから
Avatar for takasehideki takasehideki
0
350
Create a website using Spatial Web
Avatar for Akio Itaya akkeylab
0
280
イベントストーミングから始めるドメイン駆動設計
Avatar for おだかとしゆき jgeem
4
830
技術懸念に立ち向かい 法改正を穏便に乗り切った話
Avatar for popCashew pop_cashew
0
1.4k
LINEヤフー データグループ紹介
Avatar for LINEヤフー株式会社 採用情報 lycorp_recruit_jp
0
440
TypeScript LSP の今までとこれから
Avatar for Yosuke Kurami quramy
1
500
try-catchを使わないエラーハンドリング！？ PHPでResult型の考え方を取り入れてみよう
Avatar for Takuma Kajikawa kajitack
3
510
データベースコネクションプール(DBCP)の変遷と理解
Avatar for k.fujikawa8 fujikawa8
1
250
無関心の谷
Avatar for kanayannet kanayannet
0
160
CSC307 Lecture 17
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
110
ReadMoreTextView
Avatar for Sungyong An fornewid
1
390
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
Avatar for kasacchiful kasacchiful
0
300

Featured

See All Featured
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
50
8.3k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
56
9.4k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.2k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.7k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.4k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k

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.