React同构

前端之家收集整理的这篇文章主要介绍了React同构前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React同构

javascript同构是什么

让javascript代码在客户端和服务器端都能运行

关键是什么

mvc的框架是在DOM加载的时候渲染,这个当然也可以显示,但是会带来不好的用户体验。
另一个问题是MVC框架里面内容是不能被搜索引擎搜索到的(除非给钱给第三方服务),如果你的app提供一些用户需要搜索的数据,那就悲剧了。
但是当你在服务器端渲染javascript代码,就能解决这些问题,是不是觉得很酷。。。。

同构的好处

  1. 好的用户体验
  2. 可被搜索引擎索引
  3. 更容易维护
  4. 免费的渐进增强(这个如何解释?)

教程

https://www.youtube.com/watch?v=8wfY4TGtMUo
在server.js中安装jsx。

// Make sure to include the JSX transpiler
require("node-jsx").install();

然后如果你的组件是在一个单独的文件中,你需要使用module.exports导出你的组件。
然后确保调用React.createFactory,将你的组件在服务器端渲染出来。

/** @jsx React.DOM */

var React = require('react/addons');

/* create factory with griddle component */
var Griddle = React.createFactory(require('griddle-react'));

var fakeData = require('../data/fakeData.js').fakeData;
var columnMeta = require('../data/columnMeta.js').columnMeta;
var resultsPerPage = 100;

var ReactApp = React.createClass({

      componentDidMount: function () {
        console.log(fakeData);
      },render: function () {
        return (
          <div id="table-area">
             <Griddle results={fakeData} columnMetadata={columnMeta} resultsPerPage={resultsPerPage} tableClassName="table"/>
          </div>
        )
      }
  });

/* Module.exports instead of normal dom mounting */
module.exports.ReactApp = ReactApp;
/* Normal mounting happens inside of /main.js and is bundled with browerify */

现在,当你在路由里面使用React.renderToString时,奇迹就会发生。。。

var React = require('react/addons');
var ReactApp = React.createFactory(require('../components/ReactApp').ReactApp);

module.exports = function(app) {
    app.get('/',function(req,res){
        // React.renderToString takes your component
        // and generates the markup
        var reactHtml = React.renderToString(ReactApp({}));
        // Output html rendered by react
        // console.log(myAppHtml);
        res.render('index.ejs',{reactOutput: reactHtml});
    });
};

将reactOutput变量传递到template模板中。

<!doctype html>
<html>
  <head>
    <title>React Isomorphic Server Side Rendering Example</title>
    <link href='/styles.css' rel="stylesheet">
  </head>
  <body>
    <h1 id="main-title">React Isomorphic Server Side Rendering Example</h1>
    <!-- reactOutput is the server compiled React Dom Nodes -->
    <!-- comment out reactOutput to see empty non indexable source in browser -->
    <div id="react-main-mount">
      <%- reactOutput %>
    </div>

    <!-- comment out main.js to ONLY see server side rendering -->
    <script src="/main.js"></script>
  </body>
</html>

注意:因为这些文件是js后缀而不是jsx后缀的,所以使用React.createFactory来包含组件。想知道原因,看这里

Demo安装指引

如果你想下载代码自己尝试


  1. clone这个仓库:git clone git@github.com:HelloClicky/helloClicky.git
  2. 安装依赖包: npm install
  3. 运行代码:node server.js
  4. 在浏览器中输入网址访问:http://localhost:4444 5:想看看服务器端渲染做了什么,可以在index.ejs文件中注释掉main.js,然后你就会看到服务器端生成了什么内容

上面的仓库貌似不能访问,请访问这里https://github.com/DavidWells/isomorphic-react-example

原文链接:https://www.f2er.com/react/308016.html

猜你在找的React相关文章