Tag: isomorphic javascript

如何利用节点后端的浏览器库

我正在开发一个服务器端渲染的React应用程序。 在客户端中,我使用的是使用文档对象的库,所以当我尝试在服务器端节点上运行我的代码时,崩溃,因为文档没有在该环境中定义。 我目前正在通过手动检查文档对象是否存在来解决这个问题,并且只有在定义了文档的情况下才导入浏览器特定的库,但是这在我看来是一个非常草率和不方便的解决scheme。 有谁知道更好的方法来解决这个问题?

React服务器端渲染,如何导入一个React组件?

我正在把ES6转换成ES5。 用于NodeJS Express服务器文件的BabelJS和服务器端渲染输出到目录build / server /。 Browserify + babelify将ReactComponents输出到build / client / bundle.js文件 当试图将一个React Component从build / client / bundle.js导入到构build/服务器/文件时,应用程序崩溃,因为我正在导入一个未转换的ReactComponent。 如何导入ReactComponent而不复制服务器中的代码(重新使用client / bundle.js中的代码)?

NodeJS HTML呈现策略

我们要build立一个生产就绪的社交网站(Facebook或Instagram风格)。 我们计划在服务器端使用Node,并且正在寻找在服务器端渲染视图组件的最佳技术。 search引擎优化友好是必须的,所以angular度似乎不是一个合适的(除非任何人可以提倡Prerender.io作为一个坚实的select)。 我们也希望支持AJAX,以便大部分渲染将在服务器上完成,但更新将在客户端完成。 看了React,看起来这是一个不错的select,但是有一件事我很担心 – 事实上,你需要加载路由级的所有数据,而不是组件级(因为renderToString是同步的 – 请参阅这里的讨论 我真的不明白,如果我们传递React,那么服务器端渲染将是一个强大的替代scheme。 如果我正确地理解了,基本的方法(允许子组件内的asynchronous加载)就像这样: // The main page route app.get('/',function(){ var html = renderBase(); renderHeader(html) .then( renderFeed(html) ).then( renderFooter(html) ); }) renderBase = function(){ return = "<html><body>…" } renderHeader = function(){ someIoFunction(function(){ // build HTML based on data }) } 貌似使用像Jade这样的模板引擎可能会减轻我们的一些负担,但是我似乎无法在这个“React vs. Templating引擎”上find所谓的问题,所以可能我没有正确的看到它。 谢谢。

无法使用derbyjs在视图中显示文档列表

这是我第一次与derbyjs,不知道我是愚蠢的还是缺乏文档。 我有一个名为“书”的模型,我只是想显示书的名单。 这里是我的代码: module.exports = { properties: { title: {type: 'string', minLength: 6}, author: {type: 'integer', minimum: 0}, image: {type: 'string'}, status: {type: 'integer', minimum: 0, maximum: 1}, // 1 read, 0 wants to read comment: {type: 'string'} }, required: ['title'] } 和架构列表 module.exports = { schemas: { auths: require('./model/auths'), products: require('./model/products'), books: require('./model/books') } […]

Webpack-dev-server和isomorphic react-node应用程序

我设法正确使用webpack开发服务器和一个节点服务器(express),使用webpackconfiguration中的插件部分。 这一切工作正常,但现在我试图去同构,并在快速应用程序内使用客户端组件。 到目前为止唯一的问题,我遇到的是,没有webpack“parsing”我的服务器端代码,我得到的情况下,我需要的组件,但path没有解决 IE 在组件内部 'use strict'; import React from 'react'; import { RouteHandler, Link } from 'react-router'; import Header from 'components/header/main'; // <– This line causes the error because webpack is not working when parsing this JSX server-side export default React.createClass({ displayName: 'App', render() { return ( // … More code 我应该以另一种方式configurationwebpack,还是必须将所有导入更改为有效的服务器端? 代码是这里万一你想看到实际的状态https://github.com/vshjxyz/es6-react-flux-node-quickstart

在使用React路由器时得到这个错误TypeError:type.toUpperCase不是函数

我正在开发一个使用react和express.js的同构应用程序。 我正在使用React路由器进行客户端路由。 运行应用程序时,我正在控制台中出现错误和警告 警告 :失败propType:提供给Route ,期望function objecttypes的prop handler无效。 警告 :提供给UnknownComponent期望function objecttypes的未定义handler无效。 TypeError:type.toUpperCase不是一个函数 这里是components / main.jsx的代码 var React = require('react'); var Counter = require('./flashCard.js'); var RouterModule = require('react-router'); var RouteHandler = require('react-router').RouteHandler var routes = require('./routes.js') var APP = React.createClass({ render: function() { return ( <html> <head> <title>8 facts</title> <link rel="stylesheet" type="text/css" href="/stylesheets/style.css"/> <script src="/javascripts/bundle.js"></script> </head> […]

两个通配符路由在反应路由中意味着什么?

我试图了解kirasoft的react-starter-kit,注意到他们的路由有两个“*”通配符路由条目。 为什么有两个,优先顺序是什么? 第一条路线似乎设置了整体的应用程序,然后第二个似乎引发了默认的内容处理程序…都被解雇了,如果是的话,这两者之间的逻辑是什么,他们都只是顺序触发,并得到追加不知何故在一起的答复? import React from 'react'; import Router from 'react-routing/src/Router'; import http from './core/HttpClient'; import App from './components/App'; import ContentPage from './components/ContentPage'; import ContactPage from './components/ContactPage'; import LoginPage from './components/LoginPage'; import RegisterPage from './components/RegisterPage'; import NotFoundPage from './components/NotFoundPage'; import ErrorPage from './components/ErrorPage'; const router = new Router(on => { on('*', async (state, next) => […]

React – 服务器端组件呈现

我试图renderToString一个非常简单的React组件在服务器上: /** @jsx dom */ var React = require("react"); var Title = React.createClass({ render: function(){ return(<h1>Hello World</h1>) } }); module.exports = React.createFactory(Title); 当我调用ReactDOMServer.renderToString(组件)时,我得到Error: Invariant Violation: renderToString(): You must pass a valid ReactElement. 如果我做React.createElement(标题),我得到 return(dom.h1(null, "Hello World")) ^ ReferenceError: dom is not defined 路线文件: var express = require('express'), router = express.Router(), React = require("react") ReactDOMServer = […]

使用webpack渲染节点服务器上的组件

我有一个反应组件。 <myFooter> 。 这是一个简单的页脚。 import React from 'react'; import './my-footer.scss'; export default class myFooter extends React.Component { render() { return ( <footer className="col-xs-12"> hello ! </footer> ); } } 我想从服务器端渲染它。 在后端,我有一个快递服务器。 为此我写了这个: import myFooter from '../components/my-footer.jsx'; app.get('/footer', function(req, res) { var string1 = ReactDOMServer.renderToString(myFooter); res.send(string1); }); 现在的问题是服务器无法读取sass文件。 对于客户端渲染,我使用的是webpack。 Webpack构build一切,并提供一个包文件。 但我不知道如果它的服务器端发生了什么。 我怎样才能编译使用webpack。 如果可以的话,我是否需要为节点服务器上的每个请求编译我的应用程序?

react-router-redux:将路由参数映射到状态

有没有办法自动映射路由参数到状态键? 例如:我想将state.auth.resetEmail和state.auth.resetToken初始化为路由参数params.resetEmail params.resetToken只要这些路由参数可用。 也许我以错误的方式接近这个?