React.js服务器渲染实例(React server side rendering exampl

qpwoeiru96 发布于2019-08-20 11:42 / 3217人阅读

摘要：零基础学了快两个月的了，所谓的基础是指完全不懂，，还有任何相关概念，等等。这里说服务器渲染，是误打误撞了，我刚只是想把换掉而已。由负责将翻译成对应的文件顺带解决了语法问题。

零基础学了快两个月的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语法问题)。

写不动了，感兴趣直接看代码吧：

云服务器服务器托管 React.js react.js cdn Side Examples

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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