React Todo List

> For the complete documentation index, see [llms.txt](https://easonwang.gitbook.io/class/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easonwang.gitbook.io/class/node.jsreact.js1.md). # 結合Node.js與React.js搭建論壇網站1 ## #Material UI 類似於Bootstrap，為google Material Design 的網頁實作UI框架我們這次會使用Material Design 的React.js實作版本Material UI 當我們的前端UI框架，所以我們先到他的網站看其原件的使用方法使用它包好的元件例如: ``` import RaisedButton from 'material-ui/RaisedButton'; ``` 我們到可直接點選`<>`橫條部分即會出現程式碼範例，拉到頁面最下方會顯示該元件可使用的所有`props` ## 第一部分先從單元上點選按鈕下載這次的課程範例 > 稍後記得把範例的mLab URL與帳號密碼改為你自己的 ![](/files/-M0u4VQSC2kYFWEIB30B) 這一部分講解有關以下三個部分 ``` 1.React Server Side Rendering 2.註冊 3.登入 ``` 我們把下載下來的檔案解壓縮後即可打開，之後一樣用`terminal`之後`cd`到該目錄輸入`npm install`，大約需等候1\~3分鐘 ### 1.React Server Side Rendering 簡介：我們寫React.js時轉換頁面都不會重新跟server要資料，所以才會不需要進行重新整理，但這樣子我們頁面都是由js所產生的，而老舊的搜尋引擎比較不容易找到此種類型的網站，所以我們可以讓React使用Server Side Rendering，讓第一次讀取到頁面時也從資料庫加載一些我們所需要的資料進來 ```javascript 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( ); let state = store.getState(); let page = renderFullPage(content, state); return res.status(200).send(page); } else { res.status(404).send('Not Found'); } }); }); ``` ```markup const renderFullPage = (html, preloadedState) => (` React Todo List

${html}

` ); ``` 包含上面和之後所看到有關 ``` MuiTheme ``` 都是Material UI中的環境配置需求接著是Router ```javascript 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( ,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 ```