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

Transcript

1. 1.

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

2. 2.

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

3. 3.

   ޷ධൃചதʂ

4. 4.

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

5. 5.

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

6. 6.

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

7. 7.

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

   function HelloWorld() { return <div>Hello World!!!!</div>; } console.log(renderToStaticMarkup(<HelloWorld />));
8. 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. 9.

   React as Template Engine

10. 10.

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

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

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

12. 12.

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