サーバサイドだけでReact使う / React as Template Engine

Slide 1

Slide 1 text

αʔόαΠυ͚ͩͰReact࢖͏ 3FMBZ)VC --$ٱอాޫଇ!BOBUPP

Slide 2

Slide 2 text

ٱอాޫଇ 3FMBZ)VC --$ !BOBUPP HJUIVCDPNBOBUPP ࣗݾ঺հ

Slide 3

Slide 3 text

޷ධൃചதʂ

Slide 4

Slide 4 text

ࠓճͷ࿩ αʔόαΠυ͚ͩͰ3FBDU࢖͏

Slide 5

Slide 5 text

͍ΘΏΔ443 αʔόαΠυͱΫϥΠΞϯτͰ  ίʔυΛڞ༗ αʔόͰ༧Ί)5.-Λੜ੒ 4&0 ύϑΥʔϚϯε౳ͷͨΊ

Slide 6

Slide 6 text

αʔόαΠυͷΈͰ࢖͏৔߹ ΫϥΠΞϯτͱڞ༗͠ͳ͍ OPEF੡ͷαʔόαΠυΞϓϦέʔ γϣϯ͔ΒͷΈར༻ ϝϦοτ͕े෼͋Δ

Slide 7

Slide 7 text

// ୯ʹnodeͰಈ͔͢৔߹ const React = require('react'); const {renderToStaticMarkup} = require('react-dom/server'); function HelloWorld() { return

Hello World!!!!

; } console.log(renderToStaticMarkup());

Slide 8

Slide 8 text

// expressͱ૊Έ߹Θͤͯ࢖͏৔߹ const express = require('express'); const React = require('react'); const {renderToStaticMarkup} = require('react-dom/server'); function HelloWorld() { return

Hello World!!!!

; } const app = express(); app.get('/', (req, res) => { res.send(renderToStaticMarkup()); }); app.listen(3000);

Slide 9

Slide 9 text

React as Template Engine

Slide 10

Slide 10 text

ͳͥ ී௨ͷςϯϓϨʔτΤϯδϯΑΓศར Ϧϯτ΍ܕνΣοΫ͕ޮ͘ Ϗϡʔͷڞ௨Խ͕؆୯ ςετ༻ͷϥΠϒϥϦ͕ॆ࣮ ΤσΟλɾ*%&ͷࢧԉ΋ड͚ΒΕΔ