[译] 使用 styled-components 的 React 服务端渲染极简指南

时间 2019-11-16

标签使用 styled components react 服务渲染指南栏目 React 繁體版

原文原文链接

原文地址：The simple guide to server-side rendering React with styled-components

原文做者：Dennis Brotzky

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：Elliott Zhao

校对者：hannah lance10030

本指南旨在分享服务端渲染的 React App 中使用 style-components 的核心原则。当你意识到把 styled-components 集成到你的程序中是多么的完美，它的美才真正凸显出来。除此以外，styled-components 还很容易集成到使用其余样式方案的现有应用程序中。javascript

在本指南中，没有相似于 Redux，React Router 这类额外的库，或者代码拆分之类的概念 —— 让咱们从基础开始。html

你能够在这里看到最终能工做的例子： https://github.com/Jobeir/styled-components-server-side-rendering，这里参与此文的讨论： https://spectrum.chat/thread/b95c9ef2-20cb-4bab-952f-fadd90add391前端

开始构建咱们的 React 应用

应用架构。java

首先，让咱们来看看在这个指南中咱们的应用程序的架构是怎样的。咱们须要把全部的依赖和脚本放在 package.json 中，而且咱们的构建步骤会经过 webpack.config.js 进行处理。node

除此以外，一个单独的 server.js 文件来处理咱们的 React 应用程序的路由和服务。 client/ 目录中有含 App.js，Html.js 和 index.js 在内的咱们实际的应用程序。react

首先，新建一个空的文件目录，经过下面的指令建立一个空的 package.json 文件：android

npm init --yes 或者 yarn init --yeswebpack

而后把下方展现的脚本和依赖都粘进去。这个应用的依赖有 React，styled-components，Express，Wepback 和 Babel。ios

"scripts": {
  "start": "node ./dist/server",
  "build": "webpack"
},
"devDependencies": {
  "babel-core": "^6.10.4",
  "babel-loader": "^7.1.2",
  "babel-preset-env": "^1.6.1",
  "babel-preset-react": "^6.11.1",
  "webpack": "^3.8.1",
  "webpack-node-externals": "^1.2.0"
},
"dependencies": {
  "express": "^4.14.0",
  "react": "^16.2.0",
  "react-dom": "^16.2.0",
  "styled-components": "^2.2.4"
}
复制代码

既然咱们全部的依赖关系都已经被考虑到了，而且咱们已经设置了脚原本启动和构建咱们的项目，咱们如今能够设置咱们的 React 应用程序了。git

1.**src/client/App.js**

import React from 'react';

const App = () => <div>💅</div>;

export default App;
复制代码

App.js 返回一个包裹 💅 表情符的 div。这是一个很是基本的 React 组件，咱们将把它渲染到浏览器中。

2.**src/client/index.js**

import React from 'react';
import { render } from 'react-dom';
import App from './App';

render(<App />, document.getElementById('app')); 复制代码

index.js 是将 React 应用程序装入 DOM 的标准方式。它会取出 App.js 组件并渲染它。

3.**src/client/Html.js**

/** * Html * 这个 Html.js 文件充当了一个模板，咱们将全部生成的应用程序代码插入其中 * 而后做为常规的 HTML 发送给客户端。 * 注意咱们从这个函数返回一个模板字符串。 */
const Html = ({ body, title }) => ` <!DOCTYPE html> <html> <head> <title>${title}</title> </head> <body style="margin:0"> <div id="app">${body}</div> </body> </html> `;

export default Html;
复制代码

到目前为止，咱们已经有了一个 package.json，它包含了咱们全部的依赖和脚本，还有在 src/client/ 文件夹中的一个基本的 React 应用程序。这个 React 应用程序会把 Html.js 文件返回的模板字符串渲染为 HTML。

建立服务

为了在服务器上渲染咱们的应用，咱们须要安装 express 处理请求并返回咱们的 HTML。express 添加进来之后，咱们就能够建立服务了。

**src/server.js**

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './client/App';
import Html from './client/Html';

const port = 3000;
const server = express();

server.get('/', (req, res) => {
  /** * renderToString() 将获取咱们的 React 应用程序并将其转换为一个字 * 符串，以便插入到咱们的 Html 模板函数中。 */
  const body = renderToString(<App />); const title = 'Server side Rendering with Styled Components'; res.send( Html({ body, title }) ); }); server.listen(port); console.log(`Serving at http://localhost:${port}`); 复制代码

配置 Webpack

本指南专一于很是基础的知识，所以咱们让 Webpack 配置保持简单。咱们使用 Webpack 和 Babel 在生产模式下构建咱们的 React 应用程序。有一个单入口在 src/server.js 中，它将被输出到 dist/ 下。

const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const path = require('path');

module.exports = {
  entry: './src/server.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'server.js',
    publicPath: '/'
  },
  target: 'node',
  externals: nodeExternals(),
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: `'production'`
      }
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  }
};
复制代码

如今咱们已经能够构建并服务一个服务端渲染的 React 应用程序了。咱们能够运行两个命令并作好准备。

首先，运行：

yarn build 或者 npm build

而后用过运行如下命令启动程序：

yarn start 或者 npm start

若是它没有启动，你可能须要在项目的根目录中添加一个 _.babelrc_ 文件。

yarn build，而后 yarn start，成功后访问 http://localhost:3000。

添加 styled-components

到目前为止，一切都很好。咱们已经成功建立了一个在服务器上渲染的 React 应用程序。咱们没有任何相似 React Router，Redux 的第三方库，并且咱们的 Webpack 配置也是直奔主题的。

接下来，让咱们开始使用 styled-components 样式化咱们的应用。

**src/client/App.js**

让咱们建立咱们的第一个 styled component。要建立一个 styled component，首先要导入 styled 而且定义你的组件。

import React from 'react';
import styled from 'styled-components';

// 咱们的单个styled component 定义
const AppContaienr = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
  font-size: 40px;
  background: linear-gradient(20deg, rgb(219, 112, 147), #daa357);
`;

const App = () => <AppContaienr>💅</AppContaienr>;

export default App;
复制代码

把一个 styled component 添加到咱们的应用

2. **src/server.js**

这是最大的变化发生的地方。 styled-components 暴露了 ServerStyleSheet，它容许咱们用 <App /> 中的全部 styled 组件建立一个样式表。这个样式表稍后会传入咱们的 Html 模板。

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './client/App';
import Html from './client/Html';
import { ServerStyleSheet } from 'styled-components'; // <-- 导入 ServerStyleSheet

const port = 3000;
const server = express();

// 建立索引路由为咱们的 React 应用程序提供服务。
server.get('/', (req, res) => {
  const sheet = new ServerStyleSheet(); // <-- 建立样式表

  const body = renderToString(sheet.collectStyles(<App />)); // <-- 搜集样式 const styles = sheet.getStyleTags(); // <-- 从表中获取全部标签 const title = 'Server side Rendering with Styled Components'; res.send( Html({ body, styles, // <-- 将样式传递给咱们的 Html 模板 title }) ); }); server.listen(port); console.log(`Serving at http://localhost:${port}`); 复制代码

向 server.js 添加5行代码。

3. **src/client/Html.js**

将 styles 做为参数添加到咱们的 Html 函数中，并将 $ {styles} 参数插入到咱们的模板字符串中。

/** * Html * 这个 Html.js 文件充当了一个模板，咱们将全部生成的应用程序代码插入其中 * 成的应用程序字符串插入进去。 */
const Html = ({ body, styles, title }) => ` <!DOCTYPE html> <html> <head> <title>${title}</title> ${styles} </head> <body style="margin:0"> <div id="app">${body}</div> </body> </html> `;

export default Html;
复制代码

就是这样！让咱们构建并运行使用服务端渲染的 React 和 styled-components 应用程序吧。

yarn build 或者 npm build

而后用过运行如下命令启动程序：

yarn start 或者 npm start

结论

咱们已经建立了服务端渲染中使用 styled-components 的 React 应用程序的分步指南。本指南周围没有各类花哨的技巧，由于咱们想要关注核心概念。从这里开始，您能够在现有应用程序中使用这些原则，或者在本指南的基础上构建更复杂的应用程序。还有其余一些指南能够帮助您添加状态管理，路由，性能改进等等。

不要中止学习！

感谢您阅读本指南到最后。但愿它能帮助你理解并开始使用 React / SSR 和 styled-components。若是您认识任何可能从本指南中受益的人，我会很乐意推荐给他们！

若是您但愿看到使用样式化组件的服务端渲染的较大代码库，则能够查看个人另外一个项目，Jobeir, on Github. 最重要的是，styled-components文档老是一个不错的去处。

在 Jobeir 的在 SSR React 中使用 styled-components

我是谁？我是 Jobeir 的创始人，Jobeir 是一个专一于帮助每一个人找到科技领域最好的工做的工做布告栏。我在加拿大温哥华担任高级前端开发人员。能够在 Twitter 上问我问题，或者跟我打招呼，又或者检索咱们的 Github 仓库。

若是发现译文存在错误或其余须要改进的地方，欢迎到掘金翻译计划对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。