Copy import RaisedButton from 'material-ui/RaisedButton';
<RaisedButton label="Primary" primary={true} style={style} /> 稍後記得把範例的mLab URL與帳號密碼改為你自己的
Copy 1.React Server Side Rendering
2.註冊
3.登入 1.React Server Side Rendering
簡介：我們寫React.js時轉換頁面都不會重新跟server要資料，所以才會不需要進行重新整理，但這樣子我們頁面都是由js所產生的，而老舊的搜尋引擎比較不容易找到此種類型的網站，所以我們可以讓React使用Server Side Rendering，讓第一次讀取到頁面時也從資料庫加載一些我們所需要的資料進來
Copy 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' );
}
});
});
Copy 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>
`
);
Copy import 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' )
)
Copy /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 