Articles of reactjs

如何从通用的JavaScript引用一个React类

我有这个index.html: <html> <head> <title>Sample App</title> <link href="./src/css/bootstrap.min.css" rel="stylesheet" /> <link href="./src/css/bootstrap.dashboard.css" rel="stylesheet"> </head> <body> <div id='root'> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./src/js/jquery.signalR-2.2.0.min.js"></script> <script src="http://localhost:26665/signalr/hubs"></script> <script type="text/javascript" src="/static/bundle.js"></script> <script type="text/javascript"> $(function() { var myHub = $.connection.signalRTwitchBotParserHub; myHub.client.OnNewMessage = function (data) { // Call AppActions.dispatchMessage(message); }; $.connection.hub.url = "http://localhost:26665/signalr"; $.connection.hub.start() }); </script> </body> 我怎样才能从那里调用一个React创build的类? 我想代替// Call […]

带有react-router的webpack中的多个入口点

我正面临着巨大的问题,试图与反应路由器一起实现多个入口点。 目的是实现使用webpack做一些build议由https://github.com/petehunt/webpack-howto 。 到目前为止,我已经把它设置为这样: webpack.config.js entry: { entry1: __dirname + './entry1.jsx', entry2: __dirname + './entry2.jsx' } routes.jsx export default ( <Route path='/' name='app' handler={App}> <DefaultRoute handler={entry1} /> <Route name='entry2' handler={entry2}/> </Route> ); 无论何时运行此代码以在客户端上实例化Router的实例 Router.run(routes, Router.HistoryLocation, (Handler, state) => { React.render(<Handler />, document.getElementById('app')); }); Node.js会尝试在服务器上运行这个代码,因为DOM不可用,所以显然会失败。 它会产生一个错误。 是否有任何适当的方法来实现多入口点与react-router?

ReactJS webapp中的业务逻辑

我已经开发了webapp(ReactJS,Flux,React-router; Server:NodeJS,Express)它最初只加载html(同构方式)。 现在我需要从客户端隐藏一些业务逻辑。 例如,我有评分系统。 用户应该只能投票,如果他以前没有投票。 我想,应该是这样的:用户按下投票button。 这个button的处理函数发送一个对象到serverSide: { userName: login, password: password, votedObjectId: objectId } 服务器应该检查,如果这个用户存在于数据库(通过用户名和密码),并且如果这个用户之前已经投票了这个对象(通过userName和votedObjectId)。 如果一切正常,服务器应该添加行到评价表(userName和votedObjectId) 我不知道如何实现它。 我想,我应该在server.js文件中创build一个包含这个逻辑的js方法。 而客户端应该触发这个方法。 客户端如何发送请求到server.js?

使用Flux / React应用程序存储authentication详细信息

我目前正在使用flux和nodejs应用程序。 具体可通的。 对于用户身份validation,我使用passport.js,它简化了对用户进行身份validation,创build会话和validation会话的过程。 一旦会话被validation,我的服务器发回一个用户对象。 { _id: foo, email: foo@bar.com } 然后,我的身份validation存储拥有一个IsLoggedIn方法来返回商店是否有用户。 但是我意识到这是不安全的,就好像商店上的数据被操纵一样,即使用户没有实际login,商店也会返回isLoggedIn。 我目前的处理方式是,当用户调用需要身份validation的apis时,我会在api调用中检查身份validation。 所以基本上,如果恶意用户使用flux存储数据,他们可能会看到针对login用户/不同组件的操作,但是他们无法真正修改任何内容。 我打算为用户pipe理员权限做同样的事情。 我的问题是,有没有更好的方法来处理这个问题? (即更好的方式不暴露数据到客户端)

如何使用OpenLayers和react-starter-kit?

我在基于react-starter-kit的项目中运行OpenLayers3 Map时遇到了问题。 我试图添加简单的地图来反应组件。 我所做的是: 运行npm install openlayers 将import ol from 'openlayers'添加到ContactPage.js 创build简单的地图 componentDidMount(){ var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) }) ], view: new ol.View({ center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'), zoom: 4 }) }); } 将渲染函数<div id="map" className="map"></div> jsx部分添加<div id="map" className="map"></div> 运行npm start。 我得到一个错误: …\node_modules\openlayers\dist\ol.js:7 module.exports = […]

是什么让我可以在反应js文件中“需要”一个模块或库?

我遵循一些教程来构build一些反应的应用程序。 我发现这个js文件包含如下的一些模块。 var $ = require('jquery'); var React = require('React'); var ReactDOM = require('react-dom'); var url = require('url'); var moment = require('moment'); var NewsItem = React.createClass({ ………code……. 我以为只有在node.js应用程序可以要求这样的模块。 或所有的JS应用程序可以这样做? 有人可以向我解释吗? 下面是我的package.son文件.. { "name": "hn", "version": "0.1.0", "private": true, "browserify": { "transform": [ [ "reactify" ] ] }, "dependencies": { "jquery": "^2.1.4", "lodash": "^3.10.1", "moment": "^2.10.6", […]

帆 – 反应:从父组件访问道具

我正在开发一个使用Sails和React的Web应用程序。 我试图从我的数据库中获取所有的用户。 所以,为了让所有的用户,我写了下面的代码 启动UserController index : function(req,res){ User.find() .then(function(users){ renderTo(routes, req.wantsJSON, res, "/user" , {title: 'Users'}, {'users' : users}); }).catch(function(err){ return res.negotiate(err); }); } 现在,要接收用户数组,我的React代码是: 反应代码 var React = require('react'); var http = require('http'); var UserList = require('./userList'); var user = React.createClass({ render: function() { return ( <UserList {…this.props} /> ); } }); module.exports = […]

TypeError:require不是Object.module.exports.map的函数

同时编译节点的js项目与gulp命令下面的错误发生。 在public / js / app / app.node.js中: var fs = require('fs'); ^ TypeError: require不是 Object.module.exports.map ../文件中的函数 我试图用当前的项目实现反应streamapi调用。 更新: 这个错误在添加后已被删除 new dwebpack.DefinePlugin({ "global.GENTLY": false }) 但目前下面的错误发生。 return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode); ^ Error: ENOENT: no such file or directory, open '/types/mime.types' at Error (native) at Object.fs.openSync (fs.js:549:18) at Object.fs.readFileSync (fs.js:397:15) at Mime.load

无效的目录Users / node_modules / crypto-browserify反应原生

我正在尝试使用我在github(crypto-browserify)中find的软件包,并使用npm install –save crypto-browserify ,然后用var crypto = require('crypto-browserify');导入它var crypto = require('crypto-browserify'); 。 我似乎无法得到这个工作,我不断得到上述错误,虽然crypto-browserify是在我的项目的节点模块文件夹。 任何帮助非常感谢,我一直在努力解决这个问题!

另一个文件夹中的Node_modules

我有C:/ Users / user / AppData / Roaming / npm / node_modulespath中的所有节点模块。 然后,我正在尝试为我的脚本webpack添加包含babel和babel-presets的node_modules。 我的webpack.config.js module.exports = { context: './scripts', entry: ['./main', './2.jsx'], output: { path: '../scripts', filename: 'bundle.js', }, resolve: { modulesDirectories: ['C:/Users/user/AppData/Roaming/npm/node_modules'] }, resolveLoader: { root: 'C:/Users/user/AppData/Roaming/npm/node_modules' }, module: { loaders: [{ test: /\.jsx?$/, loader: 'babel-loader', include: 'C:/Users/user/AppData/Roaming/npm/node_modules', exclude: /(node_modules|bower_components)/, query: { presets: ['es2015', […]