[譯] 使用 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注掘金翻譯計劃、官方微博、知乎專欄。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。