Articles of reactjs

从React(同构应用程序)进行API调用时出现“Access-Control-Allow-Origin”问题

我遇到了使用React和Express的同构JavaScript应用程序的问题。 我正在尝试使用axios.get在组件装入时发出HTTP请求 componentDidMount() { const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders'; axios.get(url).then( res => { //use res to update current state }) } 我从API获取状态200 res,但我没有得到任何响应数据,并在我的控制台中得到一个错误 XMLHttpRequest cannot load http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. 但是,如果我在我的server.js中发出请求 const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders'; axios.get(url).then(res => { //console.log(res); }); 它工作正常,我得到服务器启动时的响应数据。 这是一个与实际的API问题,或者我做错了什么? 如果这是一个CORS问题,我猜在server.js中的请求也不会工作吗? […]

使用Webpackcaching索引源代码中的值,使用React.js

我正在构build一个同构的应用程序。 它是完全用反应build立起来的 – 也就是说,html基础也在起作用。 我有我的根html作为一个应用程序组件。 它看起来像这样: … var AppTemplate = React.createClass({ displayName: 'AppTemplate', render: function() { return ( <html> <head lang="en"> <title>hello</title> <link rel="stylesheet" href='/css/style.css' /> </head> <body> <RouteHandler {…this.props}/> <script type='text/javascript' src='/js/bundle.js' /> </body> </html> ); } }); … module.exports = AppTemplate; 当我使用webpack构build项目时,我需要replacejs / bundle.js来包含哈希。 Webpack在完成后提供stats.json。 但是我需要在构build期间提供散列。 我正在考虑使用function标志来做这样的事情: … var AppTemplate = React.createClass({ displayName: […]

从节点传递或使用process.envvariables到reactjs

如何从节点传递或使用process.envvariables到reactjs? 例如,我有这个 const nodeEnv = process.env.NODE_ENV || 'development' 在我的发展和运作(我认为是因为它的发展,我有一个后备'development' 。 但是,当我们把它推到我们的登台服务器并设置NODE_ENVvariables时,它只在第一次加载时才起作用,但随后不起作用。 我想我得到这个,因为起初它是由节点服务的,它可以访问服务器variables,但事后它将反应服务页面(正确?),它将无法访问服务器的东西。 那么我怎样才能得到variables来反应,而不用硬编码呢(因为我们最终会有一个不同的生产集合)? 编辑。 如果有差异,我们也使用webpack。

使用react-router和webpack响应改变的URL给页面找不到错误

我有以下webpackconfiguration文件: var webpack = require('webpack'); var path = require('path'); var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); var APP_DIR = path.resolve(__dirname, 'src/client/app'); var config = { entry: [ APP_DIR + '/config/routes.jsx', 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080' ], output: { publicPath: 'http://localhost:8080/src/client/public/' }, module : { loaders : [ { test: /\.jsx?$/, loader: 'babel-loader', include: APP_DIR, exclude: /node_modules/, query: { presets: ['es2015'] […]

如何使用ReactJS / NodeJS一起部署到Amazon Web Services(AWS)上?

我目前在一个项目下有ReactJS + NodeJS / ExpressJS + Webpack到EC2,amazon web services(AWS),并希望在一个项目中一次部署它。 有什么build议如何去做呢? 完成研究,我只看到了关于如何部署一个教程的教程,无论是ReactJS还是仅仅是NodeJS。 任何见解或潜在客户将不胜感激。 将接受/ upvote答案。 先谢谢你

在React中没有使用ES6获取来定义获取方法

嘿家伙我有我的第一个反应js应用程序中获取函数的麻烦。 这是我的项目的结构: hello-world — app — components — main.jsx — node_modules — public — build.js — index.html — package.json 这是我用npm安装的: npm install react react-dom babel-core babel-loader babel-preset-es2015 babel-preset-react webpack –save-dev npm install –save isomorphic-fetch es6-promise 我使用webpack webpack.config module.exports = { entry: './app/components/main.jsx', output: { path: './public/', filename: "build.js", }, module: { loaders: [ { exclude: […]

Karmaunit testing:模块名称“react”尚未加载上下文:_。 使用require()

我正在尝试设置unit testing框架进行反应。 这样做时发生以下错误。 我已经search了所有的互联网没有解决scheme正在工作。 下面是显示的错误和我正在使用的代码/包。 debugging错误 04 03 2016 04:48:46.340:DEBUG [phantomjs.launcher]: Error: Module name "react" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded 04 03 2016 04:48:46.341:DEBUG [phantomjs.launcher]: http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:140 in defaultOnError http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:544 in onError http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1429 in localRequire http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1791 in requirejs PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR Error: Module name "react" has […]

如何添加login身份validation和会话到ReactJS React路由器和Redux与MongoDB + NodeJS Express?

我有一个MongoDB + NodeJS Express服务器,运行Webpack并能够向数据库注册一个用户凭证。 我现在想在用户login时添加身份validation和会话。我正在查看Passport.js但似乎无法掌握如何将所有可以放在一起。 最好的办法是什么? 任何示例和指导将不胜感激。 到目前为止,这些都是我设立的。 对于服务器: var express = require('express'); var path = require('path'); var config = require('../webpack.config.js'); var webpack = require('webpack'); var webpackDevMiddleware = require('webpack-dev-middleware'); var webpackHotMiddleware = require('webpack-hot-middleware'); var bodyParser = require('body-parser'); var MongoClient = require('mongodb').MongoClient; var ObjectId = require('mongodb').ObjectID; var app = express(); var db; var compiler = webpack(config); […]

反应文件命名约定为jsx

我是新的反应。 最初我开始使用create-react-app 。 文件名默认是index.js 。 然后我将这个文件重命名为index.jsx 。 当我尝试使用npm start应用npm start我收到以下错误。 > react-scripts start Could not find a required file. Name: index.js Searched in: D:\WorkSpace\React\chat\src npm ERR! Windows_NT 6.1.7601 npm ERR! argv "D:\\Applns\\nodejs\\node.exe" "D:\\Applns\\nodejs\\node_modules\\ npm\\bin\\npm-cli.js" "start" npm ERR! node v6.10.0 npm ERR! npm v3.10.10 npm ERR! code ELIFECYCLE npm ERR! chat@0.1.0 start: `react-scripts start` npm ERR! […]

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