React.js服務器渲染實例(React server side rendering exampl

qpwoeiru96 發布于2019-08-20 11:42 / 3320人閱讀

摘要：零基礎學了快兩個月的了，所謂的基礎是指完全不懂，，還有任何相關概念，等等。這里說服務器渲染，是誤打誤撞了，我剛只是想把換掉而已。由負責將翻譯成對應的文件順帶解決了語法問題。

零基礎學了快兩個月的React了(React-native + React.js)，所謂的000基礎是指完全不懂JS，CSS，HTML5還有任何相關概念Dom，Server rendering等等。
PS：這里說服務器渲染，是誤打誤撞了，我剛只是想把Jade Template換掉而已。

本來我一個移動端的，和React.js是不沾邊的，但是我學的時候React-native(0.25)教程里有句“我們認為你有Reactjs的相關經驗，如果沒有，可以學一下”，原文如下：

"We assume you have experience writing applications with React. If not, you can learn about it on the?React website."

技多不加深嘛，既然大神都說了，正好有阿里云可以練手, 開搞！！！

改版前：

Express框架，使用的默認模版引擎Jade(新版改名為Pug)。由express-jsx負責將.jsx翻譯成對應的.js文件，以便能在jade引用

問題一：名字我已經起不出來了，每一個頁面即有.jade和.jsx, 自己寫的都容易看暈

./views/

doctype html
html
  head
    title=title
    link(rel="stylesheet", href="/css/style.css")
    link(rel="stylesheet", href="/css/bootstrap.min.css")
    block head
  body
    script(src="/js/react.min.js")
    script(src="/js/react-dom.min.js")
    block content
    script(src="/js/jquery.min.js")
    script(src="/js/bootstrap.min.js")

./views/

extends layout

block content
    
    script(src="index.js")
    script.
        "use strict";
        var result = !{param};
        ReactDOM.render(React.createElement(Index, { name: result }), content);

./views/

var Index = React.createClass({
  getInitialState: function () {
    return { count: 0 };
  },
  handleClick: function () {
    this.setState({
      count: this.state.count + 1,
    });
  },
  render: function () {
    return (
      
    );
  }
});

問題二：需要把變量轉為json，然后傳給jade，再由jade傳給react.js

./routes/index.js

var express = require("express");
var router = express.Router();

/* GET home page. */
router.get("/", function(req, res, next) {
  var jsonStr = JSON.stringify({"name": "here"}, {indent: true});
  res.render("index", { param: jsonStr });
});

module.exports = router;

問題三: react-native支持es6, 但express默認es5，更何況瀏覽器支持相當差, 同一個項目用量終于發現寫特別鬧騰，能不能講react.js項目語法升級下呢？

問題四：加載速度，這也恰恰是服務器渲染能解決的，不過另一個好處SEO，這個我目前到不在意。

改版后：

Express框架，使用模版引擎express-react-views。由webpack負責將.jsx翻譯成對應的.js文件(webpack順帶解決了es6語法問題)。

寫不動了，感興趣直接看代碼吧：

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80704.html

基于 Webpack 4 多入口生成模板用于服務端渲染的方案及實戰

摘要：原作者原鏈接基于多入口生成模板用于服務端渲染的方案及實戰法律聲明警告本作品遵循署名非商業性使用禁止演繹未本地化版本協議發布。這是什么背景現代化的前端項目中很多都使用了客戶端渲染的單頁面應用。原作者：@LinuxerPHL原鏈接：基于 Webpack 4 多入口生成模板用于服務端渲染的方案及實戰法律聲明警告：本作品遵循署名-非商業性使用-禁止演繹3.0 未本地化版本（CC BY-...

big_cat 2019-08-26 10:37 評論0 收藏0
基于 Webpack 4 多入口生成模板用于服務端渲染的方案及實戰

摘要：原作者原博文地址基于多入口生成模板用于服務端渲染的方案及實戰法律聲明警告本作品遵循署名非商業性使用禁止演繹未本地化版本協議發布。這是什么背景現代化的前端項目中很多都使用了客戶端渲染的單頁面應用。原作者：@LinuxerPHL原博文地址: 基于 Webpack 4 多入口生成模板用于服務端渲染的方案及實戰法律聲明警告：本作品遵循署名-非商業性使用-禁止演繹3.0 未本地化版本（...

Lavender 2019-08-26 10:37 評論0 收藏0
一篇包含了react所有基本點的文章

摘要：今年我要挑戰自己，把它歸納為一篇文章。將忽略該函數并呈現常規的空按鈕。這是中唯一的約束只有表達式。將，，和視為沒有呈現任何內容的有效元素子元素。使用自己的對象將事件對象包裝起來，以優化事件處理的性能。任何已掛載元件的狀態可能會改變。去年，我寫了一本關于學習React.js的小書，原來是大約100頁。今年我要挑戰自己，把它歸納為一篇文章。本文不會涵蓋什么是React，或者為什么要學...

Chiclaim 2019-08-22 11:09 評論0 收藏0
從零開始搭建React同構應用（三）：配置SSR

摘要：從零開始搭建同構應用三配置這篇文章來講解來配置，我們先從最簡單的方法開始，用的方式模擬實現。影響生產環境下執行效率。最后權衡下，還是決定使用現在多一套編譯配置的方案。新建，寫入以下內容以為例，注意不能少。從零開始搭建React同構應用（三）：配置SSR 這篇文章來講解來配置server side render，我們先從最簡單的方法開始，用cli的方式模擬實現SSR。 demo在這里 ...

jzzlee 2019-08-20 14:03 評論0 收藏0
不得不聊聊的react--入門篇

摘要：一誕生的性能瓶頸，主要有以下原因。注意組件類的第一個字母必須大寫，否則會報錯。組件并不是真實的節點，而是存在于內存之中的一種數據結構，叫做虛擬。此外，還提供兩種特殊狀態的處理函數。不會隨著時間改變可能不是。本文為學習筆記，適合入門的童鞋，如有錯誤，請多多指教。一、react誕生 Web app的性能瓶頸，主要有以下原因。（1）Web基于DOM，而DOM很慢。瀏覽器打開網頁時，需要...

lidashuang 2019-08-19 18:04 評論0 收藏0