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

React勉強会@福岡 vol.2での発表資料

Transcript

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

   View Slide

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

   View Slide

3. ޷ධൃചதʂ
   

   View Slide

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

   View Slide

5. ͍ΘΏΔ443
   αʔόαΠυͱΫϥΠΞϯτͰ

   ίʔυΛڞ༗
   αʔόͰ༧Ί)5.-Λੜ੒
   4&0 ύϑΥʔϚϯε౳ͷͨΊ
   

   View Slide

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

   View Slide

7. // ୯ʹnodeͰಈ͔͢৔߹
   const React = require('react');
   const {renderToStaticMarkup} = require('react-dom/server');
   function HelloWorld() {
   return Hello World!!!!;
   }
   console.log(renderToStaticMarkup());
   

   View Slide

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

   View Slide

9. React as Template Engine
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide