// [...]
```
- 修改 `src/shared/component/page/home.jsx`：
```js
// @flow
import React from 'react'
import Helmet from 'react-helmet'
import { APP_NAME } from '../../config'
const HomePage = () =>
{APP_NAME}
export default HomePage
```
- 修改 `src/shared/component/page/hello.jsx`：
```js
// @flow
import React from 'react'
import Helmet from 'react-helmet'
import HelloButton from '../../container/hello-button'
import Message from '../../container/message'
const title = 'Hello Page'
const HelloPage = () =>
{title}
export default HelloPage
```
- 修改 `src/shared/component/page/hello-async.jsx` ：
```js
// @flow
import React from 'react'
import Helmet from 'react-helmet'
import HelloAsyncButton from '../../container/hello-async-button'
import MessageAsync from '../../container/message-async'
const title = 'Async Hello Page'
const HelloAsyncPage = () =>
{title}
export default HelloAsyncPage
```
- 修改 `src/shared/component/page/not-found.jsx` ：
```js
// @flow
import React from 'react'
import Helmet from 'react-helmet'
const title = 'Page Not Found'
const NotFoundPage = () =>
{title}
export default NotFoundPage
```
事实上， `
` 组件没有渲染任何东西，它只是向 `head` 标签中插入内容，并且向服务端暴露了相同的内容。
🏁 运行 `yarn start` 和 `yarn dev:wds`，在页面之间做跳转。当你跳转页面的时候，title 应该已经变了；并且当你刷新页面的时候，title 不会更改。查看页面的源文件，研究一下 React Helmet 是怎样为服务端渲染设置 `title` 和 `meta` 值的。
下一章: [07 - Socket.IO](07-socket-io.md#readme)
回到 [上一章](05-redux-immutable-fetch.md#readme) 或者 [目录](https://github.com/verekia/js-stack-from-scratch#table-of-contents).
================================================
FILE: tutorial/07-socket-io.md
================================================
# 07 - Socket.IO
本章代码在 [这里](https://github.com/verekia/js-stack-walkthrough/tree/master/07-socket-io).
> 💡 **[Socket.IO](https://github.com/socketio/socket.io)** 是一个用来处理 Websockets 的库。它的 API 设计简单，并且能为不支持 Websockets 的浏览器提供回退策略。
在本章中，我们会在客户端和服务器之间进行简单的信息交换。为了不加入新的页面 —— 新页面意味着要加入我们不感兴趣的东西 —— 信息交换的结果会展示在浏览器的 console 面板中。所有本章没有 UI 相关的操作。
- 运行 `yarn add socket.io socket.io-client`
## Server-side（服务端）
- 编辑 `src/server/index.js`：
```js
// @flow
import compression from 'compression'
import express from 'express'
import { Server } from 'http'
import socketIO from 'socket.io'
import routing from './routing'
import { WEB_PORT, STATIC_PATH } from '../shared/config'
import { isProd } from '../shared/util'
import setUpSocket from './socket'
const app = express()
// flow-disable-next-line
const http = Server(app)
const io = socketIO(http)
setUpSocket(io)
app.use(compression())
app.use(STATIC_PATH, express.static('dist'))
app.use(STATIC_PATH, express.static('public'))
routing(app)
http.listen(WEB_PORT, () => {
// eslint-disable-next-line no-console
console.log(`Server running on port ${WEB_PORT} ${isProd ? '(production)' :
'(development).\nKeep "yarn dev:wds" running in an other terminal'}.`)
})
```
注意，为了使用 Socket.IO，你需要使用 `http` 包的 `Server` 创建的服务器来 `listen（监听）` 请求，而不是用 Express 创建的 `app` 服务器。幸运的是，我们不用更改太多代码。Websocket 的细节写在另一个文件中，我们用 `setUpSocket` 来调用这个文件。
- 把下面的常量添加到 `src/shared/config.js`：
```js
export const IO_CONNECT = 'connect'
export const IO_DISCONNECT = 'disconnect'
export const IO_CLIENT_HELLO = 'IO_CLIENT_HELLO'
export const IO_CLIENT_JOIN_ROOM = 'IO_CLIENT_JOIN_ROOM'
export const IO_SERVER_HELLO = 'IO_SERVER_HELLO'
```
这些常量代表着浏览器和服务器会进行交换的 *消息类型*。我建议给这些常量加上 `IO_CLIENT` 或者 `IO_SERVER` 前缀，清楚地表示出 *谁* 是消息的发送方。否则，看到那么多消息类型的时候，你可能有点懵。
如你所见，有一个名为 `IO_CLIENT_JOIN_ROOM` 的消息类型。为了演示，我们让客户端加入一个房间（类似聊天室）。当向特定的用户群发送消息的时候，房间非常有用。
- 创建 `src/server/socket.js`：
```js
// @flow
import {
IO_CONNECT,
IO_DISCONNECT,
IO_CLIENT_JOIN_ROOM,
IO_CLIENT_HELLO,
IO_SERVER_HELLO,
} from '../shared/config'
/* eslint-disable no-console */
const setUpSocket = (io: Object) => {
io.on(IO_CONNECT, (socket) => {
console.log('[socket.io] A client connected.')
socket.on(IO_CLIENT_JOIN_ROOM, (room) => {
socket.join(room)
console.log(`[socket.io] A client joined room ${room}.`)
io.emit(IO_SERVER_HELLO, 'Hello everyone!')
io.to(room).emit(IO_SERVER_HELLO, `Hello clients of room ${room}!`)
socket.emit(IO_SERVER_HELLO, 'Hello you!')
})
socket.on(IO_CLIENT_HELLO, (clientMessage) => {
console.log(`[socket.io] Client: ${clientMessage}`)
})
socket.on(IO_DISCONNECT, () => {
console.log('[socket.io] A client disconnected.')
})
})
}
/* eslint-enable no-console */
export default setUpSocket
```
下面，我们解释一下 *当客户端连接到服务端并发送消息的时候，服务端该做些什么*：
- 当客户端连接到服务端，连接信息会在服务端 log 出来，并且得到 `socket` 对象。这个对象可以用来向客户端发起通信。
- 当客户端发送 `IO_CLIENT_JOIN_ROOM` 消息时，如它所愿，我们让它加入一个 `room（房间）`。一旦客户端加入房间，我们发送三条 demo 消息：一条消息发送给所有用户，一条发送给房间内的用户，还有一条只发送给这个客户端。
- 当客户端发送 `IO_CLIENT_HELLO`，在服务端上 log 出来。
- 当客户端断开连接的时候，服务端也会 log 出来。
## Client-side（客户端）
客户端的代码相对简单：
- 编辑 `src/client/index.jsx`：
```js
// [...]
import setUpSocket from './socket'
// [at the very end of the file]
setUpSocket(store)
```
如你所见，我们把 Redux store 传给了 `setUpSocket`。这样，无论什么时候服务端向客户端推送了消息，都会改变 Redux 的 state。我们可以 `dispatch（分发）` actions，但在这个例子中，我们没有 `dispatch（分发）` 任何东西。
- 创建 `src/client/socket.js`：
```js
// @flow
import socketIOClient from 'socket.io-client'
import {
IO_CONNECT,
IO_DISCONNECT,
IO_CLIENT_HELLO,
IO_CLIENT_JOIN_ROOM,
IO_SERVER_HELLO,
} from '../shared/config'
const socket = socketIOClient(window.location.host)
/* eslint-disable no-console */
// eslint-disable-next-line no-unused-vars
const setUpSocket = (store: Object) => {
socket.on(IO_CONNECT, () => {
console.log('[socket.io] Connected.')
socket.emit(IO_CLIENT_JOIN_ROOM, 'hello-1234')
socket.emit(IO_CLIENT_HELLO, 'Hello!')
})
socket.on(IO_SERVER_HELLO, (serverMessage) => {
console.log(`[socket.io] Server: ${serverMessage}`)
})
socket.on(IO_DISCONNECT, () => {
console.log('[socket.io] Disconnected.')
})
}
/* eslint-enable no-console */
export default setUpSocket
```
如果你已经理解了我们在服务端做的事情，那么理解客户端的东西也不难：
- 客户端连接成功后，会在 console 面板 log 出来；并且发送一条 `IO_CLIENT_JOIN_ROOM` 类型的消息，内容是 `hello-1234`。
- 然后发送一条值 `Hello!` 的 `IO_CLIENT_HELLO` 消息。
- 如果服务端推送一条 `IO_SERVER_HELLO`，我们会在客户端 log 出来。
- 在断开连接的时候，也会有 log 信息。
🏁 运行 `yarn start` 和 `yarn dev:wds`，打开 `http://localhost:8000`。然后打开浏览器的 console 面板和 Express 服务器的命令窗口；这样，你就能看到客户端和服务端之间的通信了。
下一章：[08 - Bootstrap, JSS](08-bootstrap-jss.md#readme)
回到 [上一章](06-react-router-ssr-helmet.md#readme) 或者 [目录](https://github.com/verekia/js-stack-from-scratch#table-of-contents).
================================================
FILE: tutorial/08-bootstrap-jss.md
================================================
# 08 - Bootstrap and JSS
本章代码在 [JS-Stack-Boilerplate repository](https://github.com/verekia/js-stack-boilerplate) 的分支 [`master-no-services`](https://github.com/verekia/js-stack-boilerplate/tree/master-no-services)
我们的 app 有点丑，让我们用推特的 Bootstrap 加点样式美化一下。我们会引入 CSS-in-JS 包来加入自定义的样式。
## Twitter Bootstrap
> 💡 **[Twitter Bootstrap](http://getbootstrap.com/)** 是一个 UI 组件库。
有两种方式把 Bootstrap 引入到你的 React app，两种引入方式都有支持者和反对者：
- 使用官方发布版本，**该版本使用了 jQuery 和 Tether**。
- 使用重新实现的第三方库 [React-Bootstrap](https://react-bootstrap.github.io/) 或者 [Reactstrap](https://reactstrap.github.io/).
和官方版本相比，第三方库的 React 组件用起来相当简单。虽然这么说，但我本人并不太想用第三方库。因为第三方版本总是在官方版本 *之后* 发布（有时候要隔很久才更新）。有时，第三方的库还不能和 Bootstrap 的主题相兼容，因为这些主题使用了自己的 JS。Bootstrap 的一大优点就是拥有一个庞大的设计师社区，如果这些设计者提供的主题不被第三方库支持，那实在是有点说不过去。
因为以上原因，我做出了妥协：选择官方版本，并结合 jQuery 和 Tether 使用。但这样的话，打包后的文件大小成了个问题 —— 打包后的文件大约 200KB （开启了 Gzipped 压缩）。我觉得这个大小还可以接受，但如果对你来说文件还是太大，那你可能需要找另一种方式来用 Bootstrap，或者干脆不选择 Bootstrap。
### Bootstrap's CSS
- 删除 `public/css/style.css`
- 运行 `yarn add bootstrap@4.0.0-alpha.6`
- 从 `node_modules/bootstrap/dist/css` 把 `bootstrap.min.css` 和 `bootstrap.min.css.map` 拷贝到 `public/css` 文件夹。
- 修改 `src/server/render-app.jsx`：
```html
```
### 结合了 jQuery 和 Tether 的 Bootstrap JS
Bootstrap 的样式已经会在页面上加载了；为了给组件添加行为，我们需要导入 JS。
- 运行 `yarn add jquery tether`
- 修改 `src/client/index.jsx`：
```js
import $ from 'jquery'
import Tether from 'tether'
// [right after all your imports]
window.jQuery = $
window.Tether = Tether
require('bootstrap')
```
这样 Bootstrap 的 JavaScript 代码会被加载进来。
### Bootstrap 组件
现在，你可以做一些复制粘贴的工作：
- 修改 `src/shared/component/page/hello-async.jsx`：
```js
// @flow
import React from 'react'
import Helmet from 'react-helmet'
import MessageAsync from '../../container/message-async'
import HelloAsyncButton from '../../container/hello-async-button'
const title = 'Async Hello Page'
const HelloAsyncPage = () =>
export default HelloAsyncPage
```
- 修改 `src/shared/component/page/hello.jsx`：
```js
// @flow
import React from 'react'
import Helmet from 'react-helmet'
import Message from '../../container/message'
import HelloButton from '../../container/hello-button'
const title = 'Hello Page'
const HelloPage = () =>
export default HelloPage
```
- 修改 `src/shared/component/page/home.jsx`：
```js
// @flow
import React from 'react'
import Helmet from 'react-helmet'
import ModalExample from '../modal-example'
import { APP_NAME } from '../../config'
const HomePage = () =>
JSS (soon)
Websockets
Open your browser console.
export default HomePage
```
- 修改 `src/shared/component/page/not-found.jsx`：
```js
// @flow
import React from 'react'
import Helmet from 'react-helmet'
import { Link } from 'react-router-dom'
import { HOME_PAGE_ROUTE } from '../../routes'
const title = 'Page Not Found!'
const NotFoundPage = () =>
{title}
Go to the homepage.
export default NotFoundPage
```
- 修改 `src/shared/component/button.jsx`：
```js
// [...]
// [...]
```
- 创建 `src/shared/component/footer.jsx`：
```js
// @flow
import React from 'react'
import { APP_NAME } from '../config'
const Footer = () =>
export default Footer
```
- 创建 `src/shared/component/modal-example.jsx`：
```js
// @flow
import React from 'react'
const ModalExample = () =>
Modal title
This is a Bootstrap modal. It uses jQuery.
export default ModalExample
```
- 修改 `src/shared/app.jsx`：
```js
const App = () =>
```
这是一个 *React 行内样式* 的示例。
这段代码在 DOM 中会被转换成： `
`。 [React 行内样式](https://speakerdeck.com/vjeux/react-css-in-js) 把你从 CSS 全局命名空间里解放出来，让组件作用域成为可能。但是这样做也有代价：某些原生的 CSS 特点还没有被支持，比如说 `:hover`，媒体查询，动画或者 `font-face` 就不能用了。这也是我们稍后引入 CSS-in-JS，JSS 库的[原因之一](https://github.com/cssinjs/jss/blob/master/docs/benefits.md#compared-to-inline-styles)。
- 修改 `src/shared/component/nav.jsx`：
```js
// @flow
import $ from 'jquery'
import React from 'react'
import { Link, NavLink } from 'react-router-dom'
import { APP_NAME } from '../config'
import {
HOME_PAGE_ROUTE,
HELLO_PAGE_ROUTE,
HELLO_ASYNC_PAGE_ROUTE,
NOT_FOUND_DEMO_PAGE_ROUTE,
} from '../routes'
const handleNavLinkClick = () => {
$('body').scrollTop(0)
$('.js-navbar-collapse').collapse('hide')
}
const Nav = () =>
export default Nav
```
这里添加了点新东西：`handleNavLinkClick`。在开发 SPA(单页面应用)时，我用 Bootstrap 的 `navbar` 时遇到了一个问题：在手机上点击链接的时候，菜单栏不会折叠，而且没有滚动到页面顶部。这正好给我机会，向你演示一下怎样在你的 app 中结合使用 jQuery 和 Bootstrap 的某些代码。
```js
import $ from 'jquery'
// [...]
const handleNavLinkClick = () => {
$('body').scrollTop(0)
$('.js-navbar-collapse').collapse('hide')
}
```
**注意**: 为了 *本教程代码* 的可读性，我移除了一些易访问性相关的属性 (比如 `aria` 属性)。在实际开发时，**你当然应该把这些属性加回来**。阅读 Bootstrap 文档和代码示例，研究下怎么使用它们。
🏁 现在你的 app 终于用了 Bootstrap 的样式。
## CSS 发展现状
2016 年的 JavaScript 技术栈之争已经尘埃落定。在本教程中使用到的库和工具应该能让你站在 *工业标准的前沿阵地*（*然而 —— 即使是这样，本教程还是可能在一年后完全过时 —— O__O*）。必须承认，这个技术栈设置起来有点复杂；但是，至少大多数前端开发者认为 React-Redux-Webpack 是前端的发展方向。说到 CSS，我就有点悲观了 —— 什么都没定下来，没有标准化的方向，也没有标准的技术栈。
SASS， BEM， SMACSS， SUIT， Bass CSS， React Inline Styles， LESS， Styled Components， CSSX， JSS， Radium， Web Components， CSS Modules， OOCSS， Tachyons， Stylus， Atomic CSS， PostCSS， Aphrodite， React Native for Web（都是术语，就不翻译啦 O——0 ），还有很多我已经忘了名字，不过照样能完成工作的工具。这些工具都很棒，但问题是，没有一种工具占压倒性优势，这就让人头大了。
React 党偏爱行内样式，CSS-in-JS 或者 CSS Modules，因为这些工具能和 React 组合得完美无瑕；而且还能用编程的方式来解决 CSS 的一些常见 [问题](https://speakerdeck.com/vjeux/react-css-in-js)。
CSS Modules 挺好用，但它不能完全发挥 JavaScript 的威力。它只是提供了不错的封装，但在我看来，React 行内样式和 CSS-in-JS 完全把写样式带到了一个新高度。我个人建议是普通的样式就用 React 行内样式（你在 React Native 中也是用它）；当要用 `:hover` 或者媒体查询的时候，就用 CSS-in-JS。
有 [太多 CSS-in-JS 的库](https://github.com/MicheleBertoli/css-in-js)了。JSS 是一个功能全面、写法简单、 [性能优异](https://github.com/cssinjs/jss/blob/master/docs/performance.md) 的库。
## JSS
> 💡 **[JSS](http://cssinjs.org/)** 是一个用 JavaScript 来写样式，并把样式插入 app 中的 CSS-in-JS 库。
基本的 Bootstrap 模板已经定义好了，现在我们加入一些自定义的样式。我之前提到过 React 行内样式处理不了 `:hover` 和媒体查询，所以我们就在首页展示一下怎么用 JSS 来解决这些问题。JSS 可以通过 `react-jss` 实现。
- 运行 `yarn add react-jss`
以下内容添加到 `.flowconfig` 文件，因为 Flow 目前和 JSS 兼容还有点 [问题](https://github.com/cssinjs/jss/issues/411)：
```flowconfig
[ignore]
.*/node_modules/jss/.*
```
### Server-side（服务端）
JSS 可以在服务端初始化的时候渲染样式。
- 以下变量添加到 `src/shared/config.js`：
```js
export const JSS_SSR_CLASS = 'jss-ssr'
export const JSS_SSR_SELECTOR = `.${JSS_SSR_CLASS}`
```
- 修改 `src/server/render-app.jsx`：
```js
import { SheetsRegistry, SheetsRegistryProvider } from 'react-jss'
// [...]
import { APP_CONTAINER_CLASS, JSS_SSR_CLASS, STATIC_PATH, WDS_PORT } from '../shared/config'
// [...]
const renderApp = (location: string, plainPartialState: ?Object, routerContext: ?Object = {}) => {
const store = initStore(plainPartialState)
const sheets = new SheetsRegistry()
const appHtml = ReactDOMServer.renderToString(
)
// [...]
// [...]
```
## Client-side（客户端）
客户端渲染 app 后的第一件事情，就是处理服务端生成的 JSS 样式。
- 以下内容放在 `src/client/index.jsx` 文件的 `ReactDOM.render` 方法后面（在 `setUpSocket(store)` 之前）：
```js
import { APP_CONTAINER_SELECTOR, JSS_SSR_SELECTOR } from '../shared/config'
// [...]
const jssServerSide = document.querySelector(JSS_SSR_SELECTOR)
// flow-disable-next-line
jssServerSide.parentNode.removeChild(jssServerSide)
setUpSocket(store)
```
修改 `src/shared/component/page/home.jsx` ：
```js
import injectSheet from 'react-jss'
// [...]
const styles = {
hoverMe: {
'&:hover': {
color: 'red',
},
},
'@media (max-width: 800px)': {
resizeMe: {
color: 'red',
},
},
specialButton: {
composes: ['btn', 'btn-primary'],
backgroundColor: 'limegreen',
},
}
const HomePage = ({ classes }: { classes: Object }) =>
// [...]
JSS
Hover me.
Resize the window.
// [...]
export default injectSheet(styles)(HomePage)
```
和 React 行内样式不同的是，JSS 使用了 class。样式作为参数传递给 `injectSheet`，最终，CSS 的 class 作为属性传递给组件。
🏁 运行 `yarn start` 和 `yarn dev:wds`。打开主页，查看页面源文件（不是审查元素）。你会发现，初始化渲染的时候，JSS 是在 DOM 中的。初始化时，JSS 在 `