Tag: reactjs

testing具有.jsx扩展名的React组件: 我是React框架的新手，现在我正在探索如何在React中testing组件。我正在关注这个例子： https://www.codementor.io/reactjs/tutorial/test-reactjs-components-karma-webpack : https://www.codementor.io/reactjs/tutorial/test-reactjs-components-karma-webpack用于设置使用摩卡和业力的React的unit testing框架。我意识到，我所有的组件都有.jsx扩展名，而不是.js，我挖得更深。我了解在导入/使用之前需要构build的组件。我尝试使用这个例子： http://www.bebetterdeveloper.com/coding/getting-started-react-mocha.html : http://www.bebetterdeveloper.com/coding/getting-started-react-mocha.html 。但是这不包括业力。我如何使用业力，使jsx文件被build立，然后导入？我使用gulp来构build工件，而我的NodeJS版本是5.6

react.js：如何加载本地react.js而不是使用在线的: 所以我是新的react.js和一直遵循由Facebook创build的教程。（ https://facebook.github.io/react/docs/tutorial.html ;这一个）。现在我完成了教程，我想扩大一点。不过，我注意到在教程中，在index.html中，它使用在线位置来加载反应和其他模块。一个例子是这样的：如何将src从在线更改为本地？我已经通过npm下载了反应。所有文件都在一个名为react2的文件夹中。 index.html在react2 / public中，server.js在react2根文件夹中; 而反应在react2 / node_modules / react / react.js。我试图把src改成“../node_modules/react/react.js”和“/ home /…/ react2 / …”，并试图在前面添加file：///工作。顺便说一句，这是我在stackoverflow的第一个问题，我不是很熟悉的规则。如果我在发帖中做错了，请告诉我。非常感谢！

如何在NODE.js服务器上使用Google字体？: 我正在开发一个使用NODE.js和REACT的应用程序。我正在尝试加载Google字体。（Open Sans）我不确定最好的方法吗？ 1）我需要安装和npm模块谷歌字体？ 2）我是否需要将其与Webpack集成？ 3）我可以使用标准标签吗？如果是这样，它应该去哪里？任何信息的最佳途径，这将是有益的。谢谢

React webapp继续在PROD环境中加载本地主机资源: 我已经部署了基于react-js的Web应用程序来制作环境，并且从浏览器控制台中，我可以看到有一些依赖代码停留在无休止的循环中，试图通过xhr从本地主机加载一些socketjs-node资源。以下是我从浏览器控制台得到的消息： abstract-xhr.js:132 Mixed Content: The page at '[MY_WEBSITE_ADDRESS]' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://localhost:3000/sockjs-node/info?t=1469401504944'. This request has been blocked; the content must be served over HTTPS.o._start @ abstract-xhr.js:132(anonymous function) @ abstract-xhr.js:21 abstract-xhr.js:132 XMLHttpRequest cannot load http://localhost:3000/sockjs-node/info?t=1469401504944. Failed to start loading.o._start @ abstract-xhr.js:132(anonymous function) @ abstract-xhr.js:21 client:70 [WDS] Disconnected!l.onclose @ […]

从mobx-react导入观察者会导致“Uncaught TypeError：超级expression式必须为null或函数，而不是未定义”: 我正在使用rails-browserify与我的rails项目来编译reactJS应用程序。我的节点package.json文件如下所示： { "dependencies": { "babel-core": "^6.13.2", "babel-loader": "^6.2.4", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preset-es2015": "^6.13.2", "babel-preset-react": "^6.11.1", "babel-preset-stage-1": "^6.13.0", "babel-preset-stage-2": "^6.13.0", "babelify": "^7.3.0", "browserify": "^13.1.0", "browserify-incremental": "^3.1.1", "mobx": "^2.4.2", "mobx-react": "^3.5.4", "react": "^15.3.0", "react-dom": "^15.3.0", "react-router": "^2.6.1", "webpack": "^1.13.1" } } 但是，每当我import { observer } from 'mobx-react' ，我都会得到一个 Uncaught TypeError：超级expression式必须为null或函数，而不是未定义的这对于我导入的任何其他库都不会发生。 react ， mobx ， react-dom所有import罚款。让我知道你是否需要任何其他细节。 […]

包含一个JSON文件作为Webpack输出，但不包含bundle.js的一部分: 我有一个webpack应用程序，我想在运行时读取一个json文件。在webpack打包应用程序之后，我想将json文件从bundle.js中排除，但仍然在package文件夹中。我怎样才能做到这一点？

混合反应与快递？: 我有一个基于React的应用程序，运行一个基于NodeJS的服务器，并希望允许它下载一个非静态文件，而不使用xhr。我正在考虑使用Express，但我不知道如何使它与React在同一个容器中共存？任何人都可以build议我怎么去这个？我仍然在学习webpack和React，而且我很难find这样的例子吗？ React服务器通过webpack启动： node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js –host 0.0.0.0 –port 8081 –hot –inline 使用webpack-dev-server.js，看起来如下所示： module.exports = { entry: [ './src/index.js' ], output: { path: __dirname, publicPath: '/', filename: 'bundle.js' }, module: { loaders: [{ exclude: /node_modules/, loader: 'babel', query: { presets: ['react', 'es2015', 'stage-1'] } }] }, resolve: { extensions: ['', '.js', '.jsx'] }, devServer: […]

401错误与发布请求Stormpath Express + React + Node + Gulp: 尝试login任何用户时，出现以下POST错误结果： XMLHttpRequest cannot load https://api.stormpath.com/v1/applications/[APP_HREF]/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 401. 在我的server.js文件中，我提出了以下内容： var express = require('express'); var stormpath = require('express-stormpath'); var cors = require('cors'); var app = express(); app.use(stormpath.init(app, { apiKey: { id: 'xyz', secret: 'abc' // Using […]

Webpack图像加载器通过CSS的dynamic内联的背景图像？: 我使用webpack的反应，我通常导入和使用我的图像，如： import CalNotices from 'assets/img/calendar-notices.png'; <img className='img-center' role='presentation' src={CalNotices}/> 工作正常，当我做生产build设，这些图像区域整齐地放入适当的文件夹。但是，有时候，我想使用图像作为背景，并使用它： const divStyle = { backgroundImage: `url(${item.logo})`, backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundPosition: 'center' } <div className='image-holder' style={divStyle}></div> item.logo是图像的绝对path。这在开发工作正常，但是当我做一个prod构build，这些图像显然是缺less，因为他们没有被拾起的webpack图像加载器。我应该如何处理这个？我的图像加载器configuration是 { test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/, include: [paths.appSrc, paths.appNodeModules], loader: 'file', query: { name: 'static/media/[name].[ext]' } },

如何通过prop服务器端反应: 我正在使用节点js呈现我的反应组件… var express = require('express'); var router = express.Router(); var React = require('react'); var reactDom = require('react-dom/server'); var App = React.createFactory(require('../components/index')); router.get('/', function(req,res) { var reactHtml = reactDom.renderToString(App({exists: false})); res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml}); }); module.exports = router; 我试图通过一个道具， exists: false ，组件。但在我的实际组件，当我尝试console.log … render(){ console.log(this.props.exists); return ( <Register /> ); } 我得到的undefined而不是true 。我怎样才能解决这个问题？这是因为浏览器重新渲染页面？