Tag: reactjs

在React中，如何检测我的组件是从客户端还是服务器呈现？

我构build了一个同构的应用程序，但是我使用的是只在客户端呈现的第三方组件。 所以，特别是对于这个组件，我只需要在客户端渲染的时候渲染它。 如何检测我是否在客户端或服务器上？ 我正在寻找像isClient()或isServer() 。

如何将ReactJS + NodeJS Express应用程序部署到AWS？

我有一个ReactJS + NodeJS / ExpressJS + Webpack / Babel应用程序，并希望将其部署到AWS上。 我的问题是，我必须单独部署ReactJS和NodeJS / ExpressJS？ 还是可以将它们一起部署？ 另外，我的栈中提到的任何好的指南都提到了？ 环顾四周，但似乎都是特定的，无论是只是NodeJS或ReactJS。 最近发现它https://www.youtube.com/watch?v=WxhFq64FQzA ，但我相信它只覆盖NodeJS / ExpressJS而不是ReactJS。 目前该应用程序在一个项目下，包括所有ReactJS + NodeJS / ExpressJS + Webpack / Babel。

Uncaught TypeError：无法在反应中读取null属性的“状态”

我正在尝试实现一个简单的注册页面反应。 但是，当我尝试提交表单时，我得到了signup.js:53 Uncaught TypeError: Cannot read property 'state' of null 显然反应是不正确的设置状态。 以下是注册组件的代码： 从'react'导入React，{Component}; export default class Signup extends Component { constructor(props) { super(props) this.state = { username: "", password1: "", password2: "", error: "" } this.onChange = this.onChange.bind(this); } onChange(e) { this.setState({[e.target.name]: e.target.value}) } handleSubmit(e) { e.preventDefault() console.log(e) var username = this.state.username.trim() var password1 = […]

使用Node.js更好的方式来require.extensions

我正在testing一堆React JSX组件。 他们都需要用React或者Babel或者其他方法进行编译，但是我们有特殊的需求，所以我试图用一个与Mocha一起运行的特殊编译器来覆盖需求。 下面的解决scheme运行良好，但是您会注意到我们正在使用require.extensions []来捕获所有的.jsx文件。 我所关心的是require.extensions被locking并被弃用。 有没有更好的方法来做到这一点？ // Install the compiler. require.extensions['.jsx'] = function(module, filename) { return module._compile(transform(filename), filename); }; 下面是整个转发器供参考： // Based on https://github.com/Khan/react-components/blob/master/test/compiler.js var fs = require('fs'), ReactTools = require('react-tools'); // A module that exports a single, stubbed-out React Component. var reactStub = 'module.exports = require("react").createClass({render:function(){return null;}});'; // Should this file be stubbed […]

什么是添加一个依赖项的反应在您的package.json反应组件的正确方法是什么？

我已经做了一些简单的可重复使用的反应组件，并想知道正确的方法来包括一个依赖，以反应在我的package.json用npm发布。 我目前正在这样做： 假设我的组件将使用最新版本的反应，我已经testing，并与该版本。 例如0.13.3 "peerDependencies": { "react": "^0.13.3" },

从'ReactDebugTool.js'找不到模块'react / lib / ReactComponentTreeHook'

我试图让Jest运行我的React应用程序的快照testing。 我的package.json版本： "react": "15.6.1", "react-dom": "15.6.1", "react-test-renderer": "15.6.1", 我无法通过这个错误： ● Test suite failed to run Cannot find module 'react/lib/ReactComponentTreeHook' from 'ReactDebugTool.js' at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17) at Object.<anonymous> (node_modules/react-test-renderer/lib/ReactDebugTool.js:16:30) 我已经尝试删除并重新安装我的node_modules目录，我已经validation，我的组件的path是正确的，但仍然得到这个相同的错误。 我的testing看起来像这样： import React from 'react'; import renderer from 'react-test-renderer'; import { Section } from '../../app/views/containers/section'; it('renders correctly', () => { const section = renderer.create( <Section key="1" section="finance"/> […]

使用React和Webpack添加Favicon

我正在尝试添加一个favicon到我使用webpack的React-based网站。 添加一个favicon是一个完全的噩梦，我已经尝试了许多解决scheme无济于事。 推荐给我的最新解决scheme叫做“favicons-webpack-plugin”，可以在这里find： https ： //github.com/jantimon/favicons-webpack-plugin 。 如果有人能告诉我我做错了什么，你的帮助将不胜感激。 运行“npm run start”时出现以下错误 这是我的目录结构： 这是我的webpack.config.js文件： const path = require('path'); const merge = require('webpack-merge'); const webpack = require('webpack'); const NpmInstallPlugin = require('npm-install-webpack-plugin'); const TARGET = process.env.npm_lifecycle_event; const FaviconsWebpackPlugin = require('favicons-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanPlugin = require('clean-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); var favicons = require('favicons'), source = […]

在同构重做应用程序中设置cookie的位置？

我有3个关于redux和同构应用的一般问题： 在客户端和服务器之间共享“运行时”数据的最佳方式是什么？ 例如，当用户login远程API时，我将会话对象存储在cookie中。 这样， 下一次客户端请求我的前端时，前端服务器可以读取cookie并使用前一个会话初始化redux存储。 这样做的缺点是客户端必须在启动时（例如在根组件的componentDidMount中）validation/无效会话。 我应该请求会话服务器端，而不是从cookie中读取？ 我应该在哪里执行cookie存储的操作，在动作创build者还是减速器中？ 我应该将cookie存储在处理用户会话的reducer中吗？ 我应该在哪里执行redirect用户的操作（通过react-router）？ 我的意思是当我的用户login成功后，我应该从哪里发送redirect操作（一旦解决login许诺，从loginActionCreator中，在别的地方？） 提前致谢。

React Native：获取请求失败，错误 – TypeError：networking请求失败（…）

我正在开发一个使用React Native的简单应用程序。 我正在Android设备上testing它。 我创build了一个Node.js服务器来侦听请求，它运行在http：// localhost：3333 /上 。 接下来，我正在从index.android.js提取一个请求。 下面是代码。 fetch('http://localhost:3333/', { 'method': 'GET', 'headers': { 'Accept': 'text/plain', } } ) .then((response) => response.text()) .then((responseText) => { console.log(responseText); }) .catch((error) => { console.warn(error); }); 下面是节点服务器上的请求处理程序的代码 app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); app.use(express.static('public')); app.get('/', function(req, res){ console.log('Request received for /'); […]

React，babel，webpack不parsingjsx代码

webpack.config.js module.exports = { context: __dirname + "/app", entry: { javascript: "./app.js", html: "./index.html", }, resolve: { extensions: ['', '.js', '.jsx'] }, output: { filename: "app.js", path: __dirname + "/dist", }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader", }, { test: /\.html$/, loader: "file?name=[name].[ext]", }, ], }, } 的package.json { "name": […]