Articles of reactjs

在windows上运行摩卡以获得jsxtesting

我正在尝试通过一个关于react / redux的教程,而且在运行摩卡unit testing时遇到了一个错误。 当我运行'npm运行testing'我得到以下错误(我怀疑必须与path或.jsx扩展名)。 17 error Windows_NT 6.3.9600 18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\xenoputtss\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "test" 19 error node v5.1.0 20 error npm v3.4.1 21 error code ELIFECYCLE 22 error voting-client@1.0.0 test: `mocha –compilers js:babel-core/register –require ./test/test_helper.js 'test/**/*.@(js|jsx)'` 22 error Exit status 255 23 error Failed at the voting-client@1.0.0 test script 'mocha –compilers js:babel-core/register […]

在更新到npm 3.3.12之后,使用Jest进行unit testing时出错

我最近更新了我的项目到节点5.1.0,npm 3.3.12,并更新了我所有的依赖…现在我正在对付一堆错误! 最初我在这个问题上有同样的错误: https : //github.com/facebook/jest/issues/554 ,很容易修复。 Bur现在我得到这个: 警告:React.createElement:types不应该是null,undefined,boolean或number。 它应该是一个string(对于DOM元素)或ReactClass(对于复合组件)。 和 错误:不变违规:元素types无效:期望一个string(对于内置组件)或一个类/函数(对于复合组件),但得到:对象。 我有这在我的package.json: "jest": { "collectCoverage": true, "testRunner": "./node_modules/jest-cli/src/testRunners/jasmine/jasmine2", "scriptPreprocessor": "./node_modules/babel-jest", "unmockedModulePathPatterns": [ "./node_modules/es6-promise", "./node_modules/events", "./node_modules/fbjs", "./node_modules/flux", "./node_modules/history", "./node_modules/immutable", "./node_modules/lodash", "./node_modules/moment", "./node_modules/react", "./node_modules/react-addons-pure-render-mixin", "./node_modules/react-addons-test-utils", "./node_modules/react-d3", "./node_modules/react-dom", "./node_modules/react-modal", "./node_modules/react-router", "./node_modules/whatwg-fetch" ] } 我的testing的相关部分是: var ImageGallery = require('../../../app/components/image-gallery/image-gallery'); imageGalleryComponent = TestUtils.renderIntoDocument( <ImageGallery items={items} onSlide={onSlideMock} lazyLoad={false} showBullets={true} showThumbnails={true} […]

为什么文本渲染比服务器端渲染的图像慢呢?

我有很多例子,文字呈现比几乎感觉即时的图像慢。 我正在通过reactjs和服务器端使用nodejs进行渲染。 例如这个gif: http : //recordit.co/waMa5ocwdd 显示标题图像立即加载,CSS已经加载,因为颜色在那里和现在。 但是,由于某种原因,文本需要将近半秒的时间才会出现。 我该如何解决或优化? 如果你想尝试一下,gif中的网站是quran.com。 谢谢!

(React)与webpack同构的webapp的服务器部分,包括CSS的样式加载器

我正在尝试使我正在开发的React应用程序是同构的。 这样做的一个已知的问题是,webpack加载器允许import/require非JavaScript资产,如CSS文件。 例如 // ExampleComponent.jsx import Select from 'react-select'; import 'react-select/dist/react-select.css'; 如果使用Express构build应用程序,则节点将获取到此导入,并因为无法处理CSS文件而失败,因此仅期望JavaScript(并且感谢babel-register JSX)。 其中一个解决方法是在构build服务器端应用程序(包括所有通用部分,如组件,因为它是一个同构应用程序)时,使用webpack中的target: 'node'选项来构build服务器端代码。 这应该会导致server.js被构build,然后可以由节点运行。 注:我知道还有其他的方法来解决这个问题(比如不使用import/require来包含任何不是javascript的东西,但是在这个应用程序开发的这个阶段是不实际的。 // webpack.config.js var webpack = require('webpack'); var path = require('path'); module.exports = [ // Client build { entry: { 'bundle.min': [ 'bootstrap-webpack!./bootstrap.config.js', 'babel-polyfill', './client/index.jsx' ], 'bundle': [ 'bootstrap-webpack!./bootstrap.config.js', 'babel-polyfill', './client/index.jsx' ] }, output: { path: './dist', filename: '[name].js' […]

节点中的本地datereact-intl

我正在尝试使用react-intl在React App上设置i18n。 该应用程序是通用呈现(所以在客户端和服务器使用节点)。 我有一个基本的例子是这样的: import React, {Component} from 'react'; import ReactDOM from 'react-dom'; import {IntlProvider, FormattedDate} from 'react-intl'; class App extends Component { const date = new Date(); render() { return ( <div> <FormattedDate value={date} /> </div> ); } } ReactDOM.render( <IntlProvider locale="en-GB"> <App /> </IntlProvider>, document.getElementById('container') ); 服务器呈现的格式化date与客户端呈现date不同,导致反应校验和无效,并使服务器呈现。 服务器正在发送date的en-US语言环境,并且浏览器正在呈现en-GB 我在服务器和浏览器中都试过了这个小testing: var date = new […]

让Jest在testing时忽略无用的导入

testing组件 我正在尝试对Jest的反应组件进行一些非常简单的testing。 我遇到了问题,因为这个行在我的组件文件的顶部 import {} from './style.less'; 这里的input不需要testing,理想情况下可以忽略testing。 [npmtesting]的结果 当通过npm test运行npm test我得到响应 FAIL testing /app_test.js●运行时错误SyntaxError:意外的标记{在文件'client / components / app / style.less'中。 确保预处理器设置正确,并确保“preprocessorIgnorePatterns”configuration正确: http : //facebook.github.io/jest/docs/api.html#preprocessorignorepatterns-array-string如果您当前正在设置Jest或修改你的预处理器,试试jest –no-cache 。 预处理器:node_modules / jest-css-modules。 Jest试图执行以下预处理代码://一些无代码 但是,如果我注释掉更less的导入行,我的testing运行正常。 题 我怎样才能让开玩笑跳过这一行代码或忽略此导入?

Webpack无法parsing文件或dic

MYAPP: | –src | –index.js | –content.js | —webpack.config.js index.js: const React = require('react'); const ReactDom = require('react-dom'); const View = require('./content'); ReactDom.render(<View/>, document.body); content.js: const React = require('react'); class view extends React.Component { render() { return <p> Content </p> } } module.exports = View; webpack.config.js module.exports = { entry: './src/*', output: { path: path.join(__dirname, […]

React native:无法导入和使用外部软件包

我正在尝试使用react-native-tabbar-navigator软件包。 我做了npm install react-native-tabbar-navigator –save在我的项目目录来安装软件包。 在我的代码中,我有以下导入行来使用该包。 import React, { Component } from 'react'; import {TabBarNavigator} from 'react-native-tabbar-navigator' import MainTab from './MainTab'; import { AppRegistry, StyleSheet, Text, View, } from 'react-native'; 然而,在我的android模拟器上运行这个给我以下错误: 似乎你正试图从react-native包中访问“ReactNative.Component”。 也许你打算从“react”包中访问“React.Component”? 如果我删除TabBarNavigator的导入行,错误消失。 为什么发生这种情况? 我正在使用tabbarnavigator的0.3.0版本和react-native的0.31.0-rc.0版本

在我的html文件中需要React组件

我已经build立了一个node.js服务器与快递,我正在呈现一个HTML页面内的jsx代码。 一切工作正常,除了我不知道如何导入其他jsx组件在我的HTML文件中使用它们在我的主要脚本。 我试过类似的东西 <script type="text/babel" src="./Modulo.jsx" /> 但是我得到一个错误GET http://localhost:5000/Modulo.jsx 这里是我的Modulo.jsx的内容 var Modulo = React.createClass({ render: function() { return( <h1>Hello</h1> ) } }); 这是我的主要模块index.js var express = require('express'); var React = require('react'); var app = express(); var server = require('http').Server(app); var swig = require('swig'); var path = require('path'); app.engine('html', swig.renderFile); app.set('view engine', 'html'); server.listen(5000); app.get('/', function […]

在为React-Router提供静态文件时,使用Express JS将数据发送到路由

我想要实现的:使用Express JS制作的可以获取数据的路由(例如: https : //tmi.twitch.tv/group/user/instak/chatters ),通过React Router发送到我的正确路由路由并使React等待,直到数据被提取,这样我就可以使用这些数据来处理客户端。 我试过了 server.js 'use strict'; const express = require('express'); const app = express(); const path = require('path'); app.use(express.static(path.resolve(__dirname, '..', 'instakbot-client'))); // Always return the main index.html, so react-router render the route in the client app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, '..', 'instakbot-client', 'index.html')); }); app.get('/home', (req, res) => { […]