$30 off During Our Annual Pro Sale. View Details »

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

久保田光則
June 05, 2019
550

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

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

久保田光則

June 05, 2019
Tweet

More Decks by 久保田光則

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