Articles of isomorphic javascript

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只要这些路由参数可用。 也许我以错误的方式接近这个?

是否有可能使用Webpack绑定节点库,所以导致的代码将与execjs工作?

我的服务器端是轨道,我试图做同构呈现与反应和中继。 我发现的唯一方法是使用npm模块同构中继。 显然它使用节点获取,而这又是使用“http”库。 是否有可能使用webpack(或其他工具)来创build包含所有代码的单个包,然后使用execjs(以Node作为引擎)运行它? 当我使用节点作为目标webpack叶'http'作为外部需求,假设节点将加载它,所以execjs不能运行它… 细节: 我的源文件是单行 require('isomorphic-fetch'); 使用webpackconfiguration: target: 'node', output: { path: path.join(__dirname, '..', 'public', 'webpack'), publicPath: '/webpack/', filename: 'server-bundle.js', libraryTarget: 'commonjs2' }, 结果包包括各种要求,如下所示: /* 3 */ /***/ function(module, exports) { module.exports = require("url"); /***/ }, /* 4 */ /***/ function(module, exports) { module.exports = require("http"); /***/ }, /* 5 */ /***/ function(module, […]

使用Webpack中为客户端定义的别名反应呈现,但有问题

使用Webpack中定义的Alias为客户端反应呈现,但是当尝试在使用Express的Node服务器上呈现问题时。 我已经在webpack例子中定义了一些别名 resolve: { extensions: ['', '.js', '.jsx', '.cjsx', '.coffee', '.json'], alias: { pages: path.join(__dirname, 'js/MGPages.js'), } }, 但是当需要我在节点服务器上的主要应用程序文件时,我得到以下错误 Error: Cannot find module 'pages' 客户端别名工作正常,但我怎么能在节点服务器端解决这个问题。 我不想在客户端的反应组件上更改导入文件的代码。

同构应用程序中的用户configuration文件

我目前正在使用React,Redux,Express和Node来添加login,以及一系列与login相关的高级function。 对于实际的login,我使用Passport,使用Facebook,Google和Twitter策略。 获取所需的令牌后,会将其发送到AWS Cognito联合身份标识以获取用户的同步数据。 来自网站的数据也会在需要时同步回Cognito。 在用户login后,我可以在Node服务器上构build一个完整的用户configuration文件,但是现在呢? // server.jsx // imports …………. // variables …………. var userProfile; // logging the user with Passport and adding it to the profile …………. app.use((req, res) => { // I can do whatever I want with the profile here …………. // handling the request and creating an initial state .. […]

使用webpack,我可以将Node.js和浏览器代码放在同一个文件中,但阻止Node.js代码将其传送到浏览器?

我有一个文件,我想同时具有Node.js和浏览器代码。 Node.js代码不应该在浏览器中可见。 webpack可以根据环境从文件中排除代码吗? 有点像C预处理指令。 #if #else, etc 。 我知道Webpack对代码进行了相当深入的分析,这让我认为它可以。 约束 Node.js代码无法访问浏览器,因为它可能包含敏感的configuration选项。 我希望浏览器和节点代码在同一个文件中。 我知道我可以使用webpack.IgnorePlugin忽略需要在文件的基础上,或将共享代码在浏览器中的文件,并要求从服务器(我现在正在做),但我想知道是否有可能将代码并排放在同一个文件中。 编辑:这是我想要做的一个例子。 export class FooPlugin { $name = 'foo-plugin' register(app) { const app = koa() app.get('/foo', () => { this.send('foo') }) app.set('SECRET STUFF!') app.start() this.shared() } shared(app) { // browser things – isomorphic react router routes, etc. } registerBrowser(app) { this.shared() } } […]