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

Transcript

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

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

3. ޷ධൃചதʂ

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

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

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

7. // ୯ʹnodeͰಈ͔͢৔߹ const React = require('react'); const {renderToStaticMarkup} = require('react-dom/server');

   function HelloWorld() { return <div>Hello World!!!!</div>; } console.log(renderToStaticMarkup(<HelloWorld />));

8. // 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);

9. React as Template Engine

10. ͳͥ ී௨ͷςϯϓϨʔτΤϯδϯΑΓศར Ϧϯτ΍ܕνΣοΫ͕ޮ͘ Ϗϡʔͷڞ௨Խ͕؆୯ ςετ༻ͷϥΠϒϥϦ͕ॆ࣮

    ΤσΟλɾ*%&ͷࢧԉ΋ड͚ΒΕΔ

11. ·ͱΊ 3FBDUΛαʔόαΠυ͚ͩͰ࢖͏ ී௨ͷςϯϓϨʔτΤϯδϯΑΓ΋ ศར

12. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠