1. 程式人生 > >基於Express 在服務端渲染React組件

基於Express 在服務端渲染React組件

ejs js模板 安裝 分享圖片 頁面 save 3.3 這一 webp

服務端渲染React組件的思路是: 在服務端先將React組件轉化成字符串,然後將字符串填充到ejs模板中,客戶端就得的了html頁面。但這還沒完,還要在客戶端render 一遍React 組件。這就意味著,還要在客戶端引用React組件。如果不在客戶端render 一遍,那麽該組件的響應事件就不能觸發。

1.創建express 項目

 express myReact //創建 名稱為 myReact 的express項目。

2.安裝相關依賴包

2.1 先安裝 express項目的依賴包

npm install

2,2 安裝 ejs 依賴包

  npm install ejs --save

 2.3 安裝webpack

  npm install -g webpack 全局安裝 或者 npm install webpack --save 在項目中安裝

· 2.4 安裝 React依賴包

  npm install react react-dom --save //react 和 react-dom 都要安裝。

 2.5 安裝轉化jsx及es6 轉es5 的轉換器 babel

  npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save //有需要還可以安裝其它的 babel

 依賴包安裝完畢就可以寫代碼了。要運行項目還需要配置相關文件。

3.配置相關文件

 3.1配置webpack 打包。

  在根目錄先創建webpack.config.js

如圖

  技術分享圖片

  3.2配置babel轉換配置

  .babelrc文件的內容如下

   { "presets": ["es2015","react"] }

  3.3配置package,json文件

  在文件中添加 script 節點或修改節點。

  ‘script’:{

    ‘start’:“webpack --progress && node ./bin/www”

  }

  這樣配置了package,json 文件 執行 npm start 命令就可以webpack 打包文件並啟動項目。 這一步可以忽略 但要啟動項目就要先webpack 打包一遍。

  項目地址在https://github.com/InfaceMan/express-react

  

 

基於Express 在服務端渲染React組件