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

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

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