Tag: reactjs

Express.js服务器端渲染 – 请求'/ json / version /: 我有一个快速服务器运行，以预渲染我的反应的应用程序。我有一个路线文件，匹配的HomeContainer基地的路线/和所有其他路线匹配找不到页面。 import HomeContainer from 'containers/home-container/home-container'; import PageNotFound from 'components/page-not-found/page-not-found'; const routes = [ { path: '/', exact: true, component: HomeContainer }, { path: '*', component: PageNotFound } ]; export default routes; 我遇到的问题是，当我在服务器上运行应用程序时，页面未find路由获取呈现之前，快速更改为HomeContainer路线。我已经发现，这是因为我的快递服务器向/json/version发出请求，然后向/发送请求，此路由与我的路由文件中的路由不匹配，因此未find页面组件。现在我没有得到的是为什么它正在提出这个请求，以及如何停止在home容器之前page not found组件。我试过debugging节点服务器和最早的地方，我可以find这个path被引用是在一个名为_http_server.js 以下是debugging器的屏幕截图，以及我在哪里find正在引用的URL。另外作为参考，我已经包括我的快递服务器下面。 import express from 'express'; import React from 'react'; import { renderToString } from 'react-dom/server'; import […]

使用Jest CLI时如何获得承诺？: 我试图用Jest CLI来testing一个承诺，这个代码在浏览器中运行时应该执行。不过，我想开始为它编写testing。 class ListCollection { constructor() { this.items = new Array(); } addItem(string) { const addItemPromise = new Promise( function (resolve, reject) { // set up async getting like a XMLHttpRequest setTimeout( () => { this.items.push(string); resolve(string); }.bind(this), 2000); }.bind(this) ); return addItemPromise; } } 目前我正试图让这个非常基本的testing工作。我按照与茉莉花坑相关的文件进行testing。 jest.dontMock('../collections'); import Collection from '../collections'; describe("Collection", () […]

babel-node无法在node_modules中要求jsx文件: 我知道默认情况下， babel-node忽略了node_modules ，所以我运行了三种不同的方式来覆盖它，都失败了：用.babelrc运行babel-node app.js ： { "presets": ["es2015", "react"], "only": [ "app", "node_modules/react-components" ] } 结果： SyntaxError: Unexpected token <用于所需的jsx节点模块用.babelrc运行babel-node app.js ： { "presets": ["es2015", "react"], "ignore": "node_modules\/(?!react-components)" } result： SyntaxError: Unexpected token <用于require jsx节点模块使用babel-node ./bin/www –ignore '/node_modules/(?!react-components)运行babel-node ./bin/www –ignore '/node_modules/(?!react-components) ： { "presets": ["es2015", "react"] } 结果： [project]/node_modules/babel-preset-react/node_modules/babel-plugin-transform-react-jsx/lib/index.js:12 var visitor = […]

在React.js，node.js，webpack，babel，express中使用fs模块: 我有一个要求，我正在呈现视图，其中我显示一个表单。在提交表单时，我需要收集表单数据并创build一个文件，并将表单数据保存为该文件中的JSON。我正在使用React.js，node.js，babel和webpack。挣扎了一下，实现了这一点，我想到了，我必须使用同构或通用JavaScript即使用反应和渲染在服务器端，因为我们不能在客户端使用FS模块。推荐这个服务器端。我运行它使用： npm run start 在这之后，我可以在控制台中看到[Object Object]从下面的反应组件（HomePage.js）的第1行打印在控制台上。但是稍后当我访问这个页面时，会出现一个错误： 'bundle.js：18未捕获错误：找不到模块“fs”“ 我如何使用FS模块的反应？以下是代码片段： webpack.config.js "use strict"; const debug = process.env.NODE_ENV !== "production"; const webpack = require('webpack'); const path = require('path'); module.exports = { devtool: debug ? 'inline-sourcemap' : null, entry: path.join(__dirname, 'src', 'app-client.js'), devServer: { inline: true, port: 3333, contentBase: "src/static/", historyApiFallback: […]

核心与节点和巴贝尔debugging器？: 我一直在尝试使用Nuclide / Atom来启动和debugging使用Babel和ES6 +代码的unit testing。启动configuration如下所示：节点运行unit testing，就像我从命令行运行一样，并不停在我的断点处。如果我在命令行中使用与–inspect-brk相同的调用，则可以从Chrome中的chrome-devtools url正确debugging（使用源代码映射）。有没有办法做到这一点？我不能“附加”，因为unit testing是，而且应该是一个直射脚本执行。

同构JS – 只有httpRequest客户端: 关于同构stream量应用中商店数据总量的问题。（我正在使用的反应，ALT，ISO和节点，但理论适用于其他的例子）我有一个stream量'商店'（ http://alt.js.org/docs/stores/ ），需要从api获取数据： getState() { return { data : makeHttpRequest(url) } } 当用户在SPA中导航时，更多的数据将通过http请求加载。我希望这个应用程序是同构的，以便我可以呈现应用程序完整的HTML包括最新的数据服务器端，并返回给用户的快速初始页面加载。 react.renderToString（）允许我将应用程序呈现为html，并且可以使用alt＆iso来播种数据： storeData = { "MyStore" : {"key" : "value"}}; // set data for store alt.bootstrap(JSON.stringify(storeData || {})); // seed store with data var content = React.renderToString(React.createElement(myApp)); // render react app to html 问题是，当运行js服务器端时，我会看到错误，因为商店将要发出一个http请求，这是不可能的（因为xmlhttprequest不会存在于节点中）什么是解决这个问题的最好方法？我能想到的唯一解决scheme是将商店中的httprequest包装在： var ExecutionEnvironment = require('react/lib/ExecutionEnvironment'); […]

使用csurf和react-server: 我想在通用应用程序的react-server中添加csurf作为一个快速的中间件。我想要实现的是将csrf标记添加到反应组件中窗体的隐藏input中，以维护服务器呈现的网站提供的相同csrf保护stream，但在SPA内。这在技术上是可行的反应服务器内？如果是这样，我怎么能通过页面（理想情况下）将响应对象中可用的csrf标记传递给反应组件？

如何处理导入地狱的反应？: 我通过节点运行我的反应应用程序。有没有办法轻松处理这个导入地狱？我在跑 ./node_modules/.bin/babel-node –presets react,es2015 server/server.js 作为npm开始。而server.js是一个简单的Express服务器，它服务于ReactDOMServer.renderToString(<MyApp />) 我的一些反应组件有这样的东西： import GenericTemplate from "../../templates/GenericTemplate/GenericTemplate"; import Footer from "../../organisms/Footer/Footer"; import Header from "../../organisms/Header/Header"; import Hero from "../../organisms/Hero/Hero"; import MainMenu from "../../organisms/MainMenu/MainMenu"; import TodoList from "../../organisms/TodoList/TodoList"; 这很容易出错，像目录名称一样的变化会导致手动input每个文件来更新这个。你有什么想法我可以解决这个问题。理想情况下，我会有这样的事情： import { Footer, Header, Hero, MainMenu, TodoList } from "myComponents" 那可能吗？怎么样？谢谢！

在通用/同构应用程序中组织package.json依赖项: 有了React和其他框架，现在通常使用npm和package.json来安装你将在前端使用的库。如果您正在开发通用/同构应用程序，则会引入前端和后端的依赖项存储在同一个文件中的问题，从而创build大量的依赖项列表。如果你使用npm –save / save-dev这两种types的依赖关系（前端，后端）变得混杂，很难知道，而不是一个接一个，哪一个在哪里使用。除了手动sorting和pipe理依赖列表之外，有没有办法保持列表整洁？你有什么策略来pipe理依赖列表？

React组件在浏览器中正确渲染，但Jesttesting时出现错误：“只有ReactOwner可以引用”: 我在React中有两个组件，它们在浏览器中呈现得很好，并产生预期的行为，但是在通过Jest运行testing时似乎无法呈现。 descriptions.js var React = require('react/addons'); var $ = require('jquery'); var Description = require('./description.js'); var Descriptions = React.createClass({ getInitialState: function () { //container always starts with at least one description field that is empty, or whatever is contained in props var descriptions = []; if (this.props.info == null) { descriptions.push({num: 0, data: ''}); } else […]