Tag: reactjs
如何在没有npm（Node.js）的情况下设置React和Redux项目？
我已经看到很多video和post用npm（Node.js）configuration项目。 我已经有.Net服务器，我想使用React.JS和Redux。 我可以通过添加下面的JS文件来设置它为React。 <script src="~/Scripts/src/react.min.js"></script> <script src="~/Scripts/src/react-dom.min.js"></script> <script src="~/Scripts/src/browser.min.js"></script> 但是，如何在我的应用程序中包含Redux以使用React和Redux？
在父行下插入子行
我渲染行使我的网页看起来像电子表格。 我添加行的方式是这样的，它工作正常： var StockRow = React.createClass({ unwatch: function() { this.props.unwatchStockHandler(this.props.stock.symbol); }, render: function () { var lastClass = '', changeClass = 'change-positive', iconClass = 'glyphicon glyphicon-triangle-top'; if (this.props.stock === this.props.last) { lastClass = this.props.stock.change < 0 ? 'last-negative' : 'last-positive'; } if (this.props.stock.change < 0) { changeClass = 'change-negative'; iconClass = 'glyphicon glyphicon-triangle-bottom'; } return […]
从express中redirect到react-router
我将身份validation添加到我的应用程序，它使用react-router.And反应路由器正在处理我的login/注册page.Also我使用护照进行身份validation和通行证身份validation工作正常。 但是，当我的护照有一个成功的身份validation，并且我正在redirect到仪表板页面时，我遇到了一个问题。 server.js： – app.get('/auth/google/callback', passport.authenticate('google', { successRedirect: '/dashboard', failureRedirect: '/', })); app.get('*',(req, res) => { if (process.env.NODE_ENV === 'development') { webpackIsomorphicTools.refresh(); } const memoryHistory = createHistory(req.originalUrl); const store=configureStore(memoryHistory); const history = syncHistoryWithStore(memoryHistory, store); function hydrateOnClient() { res.send(`<!doctype html>${ReactDOM.renderToString(<Default assets={webpackIsomorphicTools.assets()} store={store} />)}`); } match({ history, routes: routes(store), location: req.originalUrl }, (error, redirectLocation, renderProps) => { […]
主机：localhost。 不在证书的altnames中
服务器端渲染时出现错误。 RENDERING ERROR: { [Error: Network error: request to https://api-dev.xyz.io/graphql failed, reason: Hostname/IP doesn't match certificate's altnames: "Host: localhost. is not in the cert's altnames: DNS:*.xyz.io"] graphQLErrors: null, networkError: { [FetchError: request to https://api-dev.xyz.io/graphql failed, reason: Hostname/IP doesn't match certificate's altnames: "Host: localhost. is not in the cert's altnames: DNS:*.xyz.io"] name: 'FetchError', message: 'request to […]
Webpack意外的令牌（React）可能需要加载器 – 已经有一个
所以我得到这个错误： ./web/index.js中的错误模块parsing失败：C：\ git \ personal \ blog \ web \ index.js意外的标记（17：4）您可能需要一个适当的加载器来处理此文件types。 在Parser.pp.unexpected上的语法错误：意外的标记（17：4）Parser.pp $ 4.raise（C：\ git \ personal \ blog \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：2221：15） （C：\ git \ personal \ blog \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：603：10）Parser.pp $ 3.parseExprAtom（C：\ git \ personal \ […]
如何将对象列表连接到Relay的节点
在GraphQL中，我有以下结构 # represents any node with GlobalIdField node(id: "uniqueIdOfNode") { } # represents actually logged user viewer { } 在示例MVC应用程序模式待办事项连接到查看器，所以当查询你只能得到属于login用户的待办事项。 但是，在我的情况下，我想要显示与用户无关的数据。 假设数据是types国家这是NodeInterfaceType，我想问一个查询国家的名单。 所以在Relay中，我可以在CountryList中创build一个片段，并使用Relay将其传递给React组件。 如果我写的不够清楚，就让我知道，因为我很困惑，而且我不确定我是否解释得好。 我用PHP编写了GraphQL服务器，但代码或提示可以用node.js编写，我也会理解它。 怎么做？ 更新 一些代码： schema.graphql # A country type Country implements NodeInterface { # The ID of an object id: ID! countryId: Int phonePrefix: String name: String timezone: String } # […]
如何保持视图响应
我在Node.js ， React ， Express和Socket.IO有一个单页面的应用程序，其数据stream划分如下： AC＃服务器应用程序通过Socket.IO提供feed.js数据。 feed.js也负责将数据转向（在更新数据结构之后，将正确的表示呈现给app.js）并将其提供给app.js以在浏览器中显示。 // Handle real-time incoming messages from c# clients. socket.on('data', function (data) { broadcast(data, socket); }); function broadcast(message, sender) { //process.stdout.write("Full message " + message.toString() + "\n"); //…To app.js onChangeHandler(stock.symbol, 'stock', stock); 在这种情况下，在实时负载下，浏览器有时不会对数据造成太大的影响，而是会影响显示效果。 换句话说，我仍然可以看到数据更新，但是在浏览器上的鼠标点击不能交互处理。 作为“桌面开发人员”的正常反应是通过创build额外的计算线程来保持计算（模型）与视图分离 – 视图已经在其自己的线程上运行。 不过，我已经读了Node.js（和配套）是单线程的。 似乎Socket.IO似乎没有这个限制。 想知道Node.js等方面的习惯是编写实时应用程序，这些应用程序在数据和GUI交互中都可以在Web浏览器上响应 。 一个例子或链接到一个将有所帮助。
在同构反应应用程序中，是否有最简洁的方式在客户端和服务器端获取当前的URL？
我正在开发一个基于这个 React Redux样板的应用程序。 在一个组件中，为了生成社交媒体的可共享URL，我需要获取当前组件的当前URL。 使用React Router，可以从dynamic生成的URL访问组件。 在客户端，我不会有任何问题通过JavaScript document对象，但问题在于服务器端。 我想在Redux存储中提供保存在此config.js文件中的Node.js环境数据，其中保存了主机名 // Node.js environment file config.js require('babel-polyfill'); const environment = { development: { isProduction: false }, production: { isProduction: true } }[process.env.NODE_ENV || 'development']; module.exports = Object.assign({ host: process.env.HOST || 'localhost', port: process.env.PORT, apiHost: process.env.APIHOST || 'localhost', apiPort: process.env.APIPORT }, environment); 并将React Router的location对象设置为组件中的道具，获取path名并完全构造URL。 我所做的就是创build一个初始状态的简单reducer，以保持Node.jsconfiguration环境数据，并且只需要将默认操作包含在与其他应用程序reducer的combineReducers函数中。 const initialState = […]
dynamicFacebook元标记渲染使用创build反应的应用程序
我目前正在使用创build反应应用程序（不popup）在FB上共享图片的应用程序。 我在分享url时遇到问题，因为元标记无法dynamic编辑。 CRA的用户指南指出 ： 将index.html读入内存并replaceOG_TITLE OG_DESCRIPTION 我不是那个知识渊博，但有人能指导我如何做到这一点的正确方向？
MERN React / Redux / MongoDB实体authentication的同构样板
我有一个任务，使用ReactJS / Redux / MongoDB / Node （ MERN ）作为基础技术堆栈，为我们未来的Web应用程序构build一个样板。 基本上我们所有的Web应用程序都是仪表板，有一个loginlogin页面（注册/login/忘记密码/重置密码）。 样板应该由微服务驱动，并且需要支持Web和移动集成（使用ReactJS Native ）。 客户端和服务器都会调用我的API，这些API也需要作为REST服务来集成。 应用程序应该是同构的，作为今天的最佳做法。 我决定从react-redux-universal-hot-example开始 ，但是我们可以看到它的着陆页，可能已经过时了（写于2015年6月）。 我的项目的基本结构如下模块： api：API服务（REST）authentication：处理authentication服务器：服务器客户端：客户端模型：Mongo模型和数据库访问静态：静态文件（图片等） 这些是我打算使用的模块（主要来自react-redux-universal-hot-example）： 反应（基本） 反应路由器（路由） 快递（基本） 巴别塔（基本） Webpack（基本） Webpack开发中间件（用于开发） Webpack Hot Middleware（用于开发） Redux（用于数据更新） Redux开发工具（用于开发） React Router Redux Redux / React Router绑定。 ESLint（用于代码样式） 还原forms（帮助forms） lru-memoize（形成validation） multireducer（build立一个基于键的reducer） style-loader（使用css和sass） bootstrap-sass-loader（轻松定制引导程序颜色） font-awesome-webpack（轻松定制fa颜色） 反应头盔（pipe理元标签） webpack-isomorphic-tools（for isomorphic app） 摩卡（unit testing） 不存在于反应 – 通用热点的例子中，我会加上Ç […]
