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

久保田光則

June 05, 2019

Tweet Share

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠