标签: isomorphic-javascript

在这些年里,我们看到了多种处理Web开发的技术,例如:

同构反应:

它提供了在客户端和服务器之间共享的公共代码库.

网页组件:

Polymer.js显示了为浏览器创建本机元素的方法.

这两种技术都是相反的方向.网络开发人员应该遵循哪一项？欢迎任何建议/意见.

我目前正在尝试在我的node.js + express build中实现一个同构反应组件.但是,当我尝试将所述组件包含到我的jade模板中进行渲染时,我收到此错误:TypeError:无法添加属性上下文,对象不可扩展

这是我的路线文件:

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


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

/* GET home page. */
router.get('/', function(req, res, next) {
  var reactAppEl = ReactApp();
  console.log(reactAppEl);
  var reactHtml = React.renderToString(reactAppEl);
  res.render('index', { reactOutput: reactHtml });
});

module.exports = router;

组件:

/** @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 = …

我正在构建一个使用Express来处理服务器请求的同构React应用程序.

在客户端运行捆绑的React应用程序时,我的Firebase登录流程运行良好:

• 我使用Firebase的电子邮件/密码选项登录
• 验证后,ref.getAuth()成功返回用户的auth对象
• ref.getAuth()在我的应用程序客户端(通过react-router)导航时的后续调用也会返回一个成功的auth对象.

但是,即使在客户端成功登录后,硬刷新(来自服务器)也不会持续存在.在服务器上下文中使用相同的React组件,ref.getAuth()返回null.

我是否错过了在服务器上以与在客户端上工作相同的方式进行此工作的步骤(用例是网站的硬刷新)？

我正在尝试创建一个同构的React应用程序，以下是我的一些文件，当我尝试使用server.js时<Provider>，出现错误消息Unexpected token。

我认为这是因为我试图在server.js中使用jsx，但是，我不确定。

在index.js中，我需要require（'babel-core / register'）（{}）;

这不能够转换后继的Jsx语法吗？我在这里想念什么吗？

Package.json

  "main": "index.js",
  "scripts": {
    "start": "node --harmony .",
    "build": "rimraf build && cross-env NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors",

index.js

'use strict';

require('babel-core/register')({});
require('babel-polyfill');

var server = require('./server').default;

const PORT = process.env.PORT || 3000;

server.listen(PORT, function () {
  console.log('Server listening on: ' + PORT);
});

server.jsx

var webpack = require('webpack')
var webpackDevMiddleware = require('webpack-dev-middleware')
var webpackHotMiddleware = require('webpack-hot-middleware')
var config = require('./webpack.config')
var serveStatic = require('serve-static');
var path = …

在使用Reactjs的同构应用程序中,您需要将在服务器上呈现的相同初始状态传递给客户端(然后将使用事件绑定等来"补充"应用程序).

我已经看到两种方法可以将这个初始状态传递下去 -

将全局变量设置为窗口:

<script>
window.initialState = {{JSON.stringify(initialState)}} ;
</script>

或者将其作为JSON对象传递:

<script id="initial-state" type="application/json"> {{JSON.stringify(initialState)}}</script>

两者都可以从应用程序的任何位置轻松检索.使用一个优于另一个是否有任何优势？

我正在 clojure/clojurescript/reagentt 中制作一个同构应用程序。由于我依赖于用于服务器端渲染的 clojurescript 输出 js 文件，因此我希望在 jar 之前编译该文件。我怎么做？

这是“lein uberjar”的输出，注意首先编译jar。我的 clj 文件“nash.clj”需要运行编译好的 server-side.js 构建：

Johns-MacBook-Pro:bfa-clojure johnkealy$ lein uberjar

minifying assets...

minifying: resources/public/css/site.min.css
assets: site.css
original size: 88983
compressed size: 73886
gzipped size: 13676
Compiling bfa-clojure.api.auth
Compiling bfa-clojure.api.misc
Compiling bfa-clojure.api.photos
Compiling bfa-clojure.global
Compiling bfa-clojure.handler
Compiling bfa-clojure.nash
Compiling bfa-clojure.pages
Compiling bfa-clojure.server
2015-08-17 14:34:32.964:INFO::main: Logging initialized @21242ms
Compiling ClojureScript.
Compiling "resources/public/javascripts/server-side.js" from ("src/cljs" "src/server-cljs" "src/clj/bfa_clojure/queries" "src/cljs" "src/server-cljs" "src/clj/bfa_clojure/queries")...
Successfully compiled "resources/public/javascripts/server-side.js" in 7.441 seconds.

而我的 project.clj...整个 cljsbuild 事情目前对我来说是个谜。

(defproject bfa-clojure "0.1.0-SNAPSHOT"
  :description …

我有一个同构的React应用程序,组件在服务器端呈现.我希望使用第三方React组件:(GraphiQL),并且呈现如下:

var GraphiQLComponent = React.createElement(GraphiQL, { fetcher: graphQLFetcher}, "");

router.get('/graphiql', function (req, res) {
  res.send(ReactDOMServer.renderToString(GraphiQLComponent));
});

但是,此组件使用window对象:window.localStorage并且window.addEventListener,当我尝试在浏览器中加载页面时,我收到错误:

ReferenceError: window is not defined

我可以在服务器上渲染使用窗口对象的React组件吗？如果是这样,我需要做些什么来解决此错误？

我想根据浏览器窗口的当前大小设置组件的状态.已使用服务器端呈现(React + Redux).我正在考虑使用Redux商店作为粘合剂 - 只是在调整大小时更新商店.有没有其他/更好的解决方案,不涉及Redux.谢谢.

class FocalImage extends Component {

  // won't work - the backend rendering is used
  // componentDidMount() {
  //  window.addEventListener(...);
  //}

  //componentWillUnmount() {
  //  window.removeEventListener('resize' ....);
  //}

  onresize(e) {
    //
  }

  render() {
    const {src, className, nativeWidth, nativeHeight} = this.props;
    return (
      <div className={cn(className, s.focalImage)}>
        <div className={s.imageWrapper}>
          <img src={src} className={_compare_ratios_ ? s.tall : s.wide}/>
        </div>
      </div>
    );
  }
}