import RaisedButton from 'material-ui/RaisedButton';
<RaisedButton label="Primary" primary={true} style={style} />
Last updated
1.React Server Side Rendering
2.註冊
3.登入import {renderToString} from 'react-dom/server';
import {RouterContext, match, createRoutes} from 'react-router';
app.get('*', (req, res) => {
let initialState = {
todos:[{
id:0,
completed: false,
text:'initial for demo'
}],
userInfo:{
}
}
const store = configureStore(initialState);
const muiTheme = getMuiTheme({
userAgent: req.headers['user-agent'],
});
match({routes, location: req.url}, (error, redirectLocation, renderProps) => {
if (error) {
res.status(500).send(error.message);
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search);
} else if (renderProps) {
const content = renderToString(
<Provider store={store}>
<MuiThemeProvider muiTheme={muiTheme}>
<RouterContext {...renderProps} />
</MuiThemeProvider>
</Provider>
);
let state = store.getState();
let page = renderFullPage(content, state);
return res.status(200).send(page);
} else {
res.status(404).send('Not Found');
}
});
});const renderFullPage = (html, preloadedState) => (`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1">
<title>React Todo List</title>
<link rel="stylesheet" type="text/css" href="/css/reset.css">
</head>
<body>
<div id="app">${html}</div>
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\x3c')}
</script>
<script src="vendor.bundle.js"></script>
<script src="bundle.js"></script>
</body>
</html>
`
);MuiThemeimport React from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-dom'
import root from './root.js'
import {Provider} from 'react-redux'
import {configureStore} from '../redux/store'
import {Router, browserHistory, Route} from 'react-router';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';
const initialState = window.__PRELOADED_STATE__;
injectTapEventPlugin();//Material UI中用來解決onClick相關Bug
const store = configureStore(initialState);
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider>
<Router history={browserHistory} routes={root} />
</MuiThemeProvider>
</Provider>
,document.getElementById('app')
)/server --- server.js => api.js => DB.js => index.js
/containers --- App.js => Header.js => Main.js
Navbar.js
/util --- Menu.js => SimpleDialog.js
/components --- Login.js => Register.js