Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
サーバサイドだけでReact使う / React as Template Engine
久保田光則
June 05, 2019
1
400
サーバサイドだけでReact使う / React as Template Engine
React勉強会@福岡 vol.2での発表資料
久保田光則
June 05, 2019
Tweet
Share
More Decks by 久保田光則
See All by 久保田光則
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
anatoo
0
2.9k
Mastodonとその脱中央集権の仕組み
anatoo
11
20k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
9.1k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
9k
Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima
anatoo
4
1.4k
PHPで学ぶVM型正規表現エンジンの仕組み
anatoo
8
6.3k
チームで作る!イケてるデザイン
anatoo
16
14k
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
anatoo
27
17k
最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門
anatoo
20
19k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
38
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Six Lessons from altMBA
skipperchong
14
1.3k
Rails Girls Zürich Keynote
gr2m
86
12k
Code Review Best Practice
trishagee
41
6.7k
Building Your Own Lightsaber
phodgson
94
4.6k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
In The Pink: A Labor of Love
frogandcode
130
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
910
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
Thoughts on Productivity
jonyablonski
43
2.2k
Transcript
αʔόαΠυ͚ͩͰReact͏ 3FMBZ)VC --$ٱอాޫଇ!BOBUPP
ٱอాޫଇ 3FMBZ)VC --$ !BOBUPP HJUIVCDPNBOBUPP ࣗݾհ
ධൃചதʂ
ࠓճͷ αʔόαΠυ͚ͩͰ3FBDU͏
͍ΘΏΔ443 αʔόαΠυͱΫϥΠΞϯτͰ ίʔυΛڞ༗ αʔόͰ༧Ί)5.-Λੜ 4&0 ύϑΥʔϚϯεͷͨΊ
αʔόαΠυͷΈͰ͏߹ ΫϥΠΞϯτͱڞ༗͠ͳ͍ OPEFͷαʔόαΠυΞϓϦέʔ γϣϯ͔ΒͷΈར༻ ϝϦοτ͕े͋Δ
// ୯ʹnodeͰಈ͔͢߹ const React = require('react'); const {renderToStaticMarkup} = require('react-dom/server');
function HelloWorld() { return <div>Hello World!!!!</div>; } console.log(renderToStaticMarkup(<HelloWorld />));
// expressͱΈ߹Θͤͯ͏߹ const express = require('express'); const React = require('react');
const {renderToStaticMarkup} = require('react-dom/server'); function HelloWorld() { return <div>Hello World!!!!</div>; } const app = express(); app.get('/', (req, res) => { res.send(renderToStaticMarkup(<HelloWorld />)); }); app.listen(3000);
React as Template Engine
ͳͥ ී௨ͷςϯϓϨʔτΤϯδϯΑΓศར ϦϯτܕνΣοΫ͕ޮ͘ Ϗϡʔͷڞ௨Խ͕؆୯ ςετ༻ͷϥΠϒϥϦ͕ॆ࣮
ΤσΟλɾ*%&ͷࢧԉड͚ΒΕΔ
·ͱΊ 3FBDUΛαʔόαΠυ͚ͩͰ͏ ී௨ͷςϯϓϨʔτΤϯδϯΑΓ ศར
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠