Articles of reactjs

使用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 […]

React / Redux同构/服务器端渲染和媒体查询

我开始创build一个基于Node的同构React / Redux应用程序。 该项目的一个要求是基于“移动”和“桌面”视图的“adapative”渲染特定组件。 我已经实现了Redux动作和Reducer来存储有关用户视图的屏幕信息(基于媒体查询 – “小”,“中”,“大”)的状态。 在调整状态/商店得到更新。 默认状态是“小”。 const defaultState = { isMobile: true, isTablet: false, isDesktop: false, sizes: { small: true, medium: false, large: false, huge: false, }, }; 在需要根据屏幕尺寸在两个不同版本中呈现“自适应”的组件中,我简单地做一个: 如果(小)返回变化1 如果(中)返回变化2 所有的工作。 现在我面临两个问题: 我的应用程序是同构的,这意味着标记也呈现服务器端。 服务器不知道用户的浏览器和媒体查询。 所以,因为我的默认状态是“小”,服务器将始终呈现“variation1”。 节点服务器是该站点的入口点。 它看起来像渲染需要“延迟”(中间件?),服务器需要从React应用程序获取“传递”之前从客户端获取一些有关浏览器宽度的信息。 任何想法如何解决这个问题? 因为渲染是基于状态的,所以即使在浏览器大小是“桌面”的情况下,在加载“变化1”之后几秒钟总是可以看到(闪烁)。 这是因为在使用当前屏幕宽度更新状态之前,JS检测需要几毫秒的时间。 我认为这与上面的问题和默认状态一起玩。 我找不到任何解决scheme1,但我想必须有一些同构和响应/自适应。