create-react-appにサーバーサイドレンダリングを追加する

私はcreate-react-appとSSRについて勉強中です。create-react-appにサーバーサイドレンダリングを追加する

私はこのRepo =>https://github.com/sarovin/StarteKitにreduxとreact-routerを追加しました。

これで、create-react-appに変更を加えずにSSR（サーバー側のレンダリング）を追加します。

私はそれ=>https://github.com/sarovin/StarteKit/pull/1

を実装しようとPRを持っていますが、機能onClick()は、私の例では動作しないので、私はいくつかのエラーを持っている：

// App.js

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import { switcher } from './actions/switcher'; 
import logo from './logo.svg'; 
import './App.css'; 

const propTypes = { 
    switch: PropTypes.bool, 
    dispatch: PropTypes.func, 
}; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.onClick = this.onClick.bind(this); 
    } 

    onClick() { 
    console.log('onClick'); 
    this.props.dispatch(switcher()); 
    } 

    render() { 
    console.log('Switch', this.props.switch); 
    return (
     <div className="App"> 
     <div className="App-header"> 
      {this.props.switch ? <img src={logo} className="App-logo" alt="logo" /> : null } 
      <h2>Welcome to React</h2> 
     </div> 
     <label className="switch" > 
      <input checked={this.props.switch} type="checkbox" onChange={this.onClick} /> 
      <div className="slider round"></div> 
     </label> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    switch: state.switcher.get('switch'), 
    }; 
} 

App.propTypes = propTypes; 

export default connect(mapStateToProps)(App);

を

//server.js

import express from 'express'; 
import path from 'path'; 
import bodyParser from 'body-parser'; 
import hbs from 'express-hbs'; 
import cors from 'cors'; 
import React from 'react'; 
import { createStore, combineReducers } from 'redux'; 
import { Provider } from 'react-redux'; 
import { renderToStaticMarkup } from 'react-dom/server'; 
import { RouterContext, match } from 'react-router'; 
import routes from './routes'; 
import * as reducers from './reducers'; 

console.log('info', 'Init App'); 

const app = express(); 
app.set("port", process.env.PORT || 8080); 
app.use(cors()); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({extended: true})); 
// Make index false, so that it is not resolved by default. 
app.use(express.static(path.resolve('build'), {index: false})); 

app.set("views", path.resolve('build')); 
app.set("view engine", "html"); 
app.engine("html", hbs.express4()); 

app.use((req, res, next) => { 
    match({routes: routes, location: req.url}, (err, redirectLocation, renderProps) => { 
    if (err) { 
     return res.status(500).send(err.message); 
    } else if (redirectLocation) { 
     res.redirect(302, redirectLocation.pathname + redirectLocation.search); 
    } else if(renderProps){ 
     res.status(200); 

     console.log(renderProps); 

     const reducer = combineReducers(reducers); 
     const initialState = {}; 
     let store = createStore(reducer, initialState); 

     let html = renderToStaticMarkup(
     <Provider store={store}> 
      <RouterContext {...renderProps}/> 
     </Provider> 
    ); 

     console.log('store', store.getState()); 
     res.render('index.html', { content: html }); 
    } 
    else res.status(404).send('Page not found'); 
    }); 
}); 

app.listen(app.get("port"),() => { 
    console.log("Express server starting on port: " + app.get("port")); 
});

は、任意の秒を持っていますuggestion？

出典

2016-10-21 SaroVin

FYI、Create React App **は、** servwレンダリングを明示的にサポートしていません。それはそのホームページでそう言います。 –

あなたはそれが仕事になったようです（PRはマージされています）。あなたはしませんでしたか？ – vcarel

@vcarel PRが私のレポにマージされました – SaroVin