Tag: reactjs

如何使用Auth0 Lock来pipe理后端用户？: 我正在用React创build一个前端，用Node创build一个后端。我想用Auth0 Lock来pipe理用户信息 – 发送一个包含每个请求的JWT给API。如果我需要做以下的事情之一呢？存储一个带有作者ID的博客文章 Auth0唯一标识符是user_id ，它不是一个整数，因此不能用作ID /密钥。我将如何处理这在服务器端用户商店？有一个用户表来存储“个人资料”或其他类似的信息是否在每个API请求上阅读JWT，确定该用户是否存在，然后创build一个新用户（如果不存在），或者将其与预先存在的用户关联（如果存在）。是否高效地检查每个API请求上的用户数据库？我不确定如何使用基于JWT的API和Auth0处理一般stream程。编辑：经过一番研究和思考，我的想法是：Auth0的唯一用户标识符是由它们提供的user_id 。这里的问题是它不是一个整数。因此它不应该被用作数据库中users表的键。看起来好像你不应该检查每个请求上的用户数据库，但这可能是不正确的。一个想法是在初始login时回拨到后端，如果该账户不存在，创build它，如果该账户存在，继续前进。然后，只要用户在前端login之后，信任Auth0 JWT（如果它在后端validation），就会在每个后续请求中相信。从我在网上看到的这个过程的很less的描述，似乎我描述的是正常的方式。但是在某些情况下，这是没有意义的。如果用户被禁止呢？他们仍然可以使用主动JWT访问服务器function，直到时间到期。因此，如果在每个API请求上检查用户存储是正常/高效，那么如何将Auth0的stringid（ user_id与数据存储中的整数ID相关联来执行查询？我正在使用一个SQL变体。

世界地图path数据反应高的图表: 我正在看反应的highmaps文档，看起来他们已经硬编码/保存地图数据： https://github.com/kirjs/react-highcharts https://github.com/kirjs/react-highcharts/tree/master/demo/src/mapdata 我在很多小教程中看到，虽然数据来自高地图本身，只是通过传递一个这样的关键 mapData: Highcharts.maps['custom/world'], 看到这里的例子： http : //jsfiddle.net/gh/get/jquery/3.1.1/highcharts/highcharts/tree/master/samples/maps/tooltip/usehtml/ 但是，鉴于我正在编写一个纯粹的reactJS / nodeJS应用程序，我想知道在纯粹的反应中是否有办法为世界地图提供path数据？这是部署在某个地方反应高的地图？

React和NodeJS如何协同工作？: 你能告诉我更多关于两者之间的关系吗？我想（例如）写一个播放我的覆盆子piaudio文件的小工具。然后我会让玩家和玩家在React中完全接口，然后连接到节点以获得实际的文件？或者，更普遍的但是同样的事情，如果我想编写一个应用程序来完成某些事情（写入文件，loggingaudio，更改系统设置等），这些都将在nodejs中完成，但是如果我想要一个接口我会使用像React的东西？我有点困惑，但我希望这个问题是有效的！

Flux（Redux）商店中的API令牌是否安全？: 将通过validation呼叫返回的API令牌存储在Flux（特别是Redux）存储中是否安全？我已经使用Webpack来编译项目中的所有资产，我相信这意味着该商店的范围远远超过第三方脚本，希望读取商店并提取令牌。而且，对于什么是值得的，令牌是通过HTTPS在Authorization: bearer …头中发送的。

如何避免在ReactJS同构应用程序服务器上出现错误'localStorage未定义'？: 我在我的webApp中使用localStorage在客户端存储数据。但是，当我试图使应用程序同构，这会导致一个问题。由于节点不是浏览器环境，因此无法定义“window”，“localStorage”等对象。我该如何解决这个问题？

React.js服务器端使用Java: 我们在纯JSP / JQuery中有一个应用程序，我们正试图移动到ReactJs进行可维护性。我看到的ReactJs的好处之一是服务器端渲染。然而，我所见过的所有服务器端渲染的例子都是利用Node.js作为服务器端的。我们目前正在使用Tomcat，而不是那么倾向于只为服务器端渲染部署node.js。我考虑过很less的select，如使用Nashorn（ http://winterbe.com/posts/2014/04/05/java8-nashorn-tutorial/ ）但是，Nashorn似乎并没有准备好生产。有没有人在生产环境中在Tomcat上部署了React.js服务器端渲染？

React的TestUtils.Simulate.keyDown不起作用: 我的应用程序中有很多组件响应不同的按键，到目前为止，我的testing都没有使用TestUtils.Simulate.keyDown 。看起来像keyDown只是简单而简单的不起作用。这是我正在testing的组件： description.js var React = require('react/addons'); var Description = React.createClass({ render : function () { return ( <div className="description"> <input type="text" ref="input"/> </div> ) } }); module.exports = Description; 这是一个简单的testing失败：描述-test.js var React = require('react/addons'); var TestUtils = React.addons.TestUtils; var expect = require('expect'); var Description = require('../description'); describe('Description', function () { it('updates […]

Jest：找不到模块内部需要testing的模块（相对path）: 我有这个组件： import React from 'react'; import VideoTag from './VideoTag'; import JWPlayer from './JWPlayer'; class VideoWrapper extends React.Component { //… component code } 基于一些逻辑呈现另一个组件（VideoTag或JWPlayer），但当我试图在一个笑话文件中testing它，我得到的错误：找不到模块'./VideoTag' 这三个组件都在同一个目录下，这就是为什么当我在浏览器中运行它并在运行时看到它实际工作的原因，但看起来Jest在解决这些相对path时遇到了问题，这是一个笑话文件： jest.dontMock('../src/shared/components/Video/VideoWrapper.jsx'); import React from 'react'; import ReactDOM from 'react-dom'; TestUtils from 'react-addons-test-utils'; import VideoWrapper from '../src/shared/components/Video/VideoWrapper.jsx'; describe('VideoWrapper tests', () => { it('Render JWPlayer', () => { let vWrapper = TestUtils.renderIntoDocument( […]

使用babel.js而不是browserify来编译捆绑: 我开始与babel.js使用JavaScript ES6function，但是我遇到了一个问题我目前正在使用browserify构build我的应用程序，并使用以下命令进行重新validation。 browserify -t reactify app/main.js -o public/scripts/bundle.js 现在我想在babel中使用一个等价的命令，将我需要的模块捆绑在ES6中，写成一个bundle.js 。这不起作用，只是给我一个ES5版本的main.js文件。 babel app/main.js -o public/scripts/bundle.js 不过，我可以用babel将我的bundle.js文件编译成ES6版本，有两个命令 browserify -t reactify app/main.js -o public/scripts/bundle.js babel app/main.js -o public/scripts/babel.js 这是用browserify使用babel的正确方法吗？将您的模块与browserify捆绑在一起，然后将捆绑包转换为ES6？

错误：无法find相对于目录的预设“es2015”: 当我尝试使用babel时出现以下错误。错误：无法find相对于目录的预设“es2015” webpack.config.js module.exports = { entry: './main.js', ourput: { path:'./', filename:'index.js' }, devServer:{ inline:true, port:3333 }, module:{ loaders:[ { test:/\.js$/, exclude:/node_modules/, loader:'babel', query:{ presets:['es2015','react'] } } ] } } 的package.json { "name": "es6-react-setup", "version": "1.0.0", "main": "main.js", "dependencies": { "babel-core": "^6.11.4", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.11.1", "babel-loader": "^6.2.4", "react": "^15.2.1", "react-dom": "^15.2.1", "webpack": "^1.13.1" }, […]