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

F7dd7b43a0cc6c063f7d98ba23a1d359?s=47 久保田光則
June 05, 2019
270

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

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

F7dd7b43a0cc6c063f7d98ba23a1d359?s=128

久保田光則

June 05, 2019
Tweet

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