Articles of 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) 不存在于反应 – 通用热点的例子中,我会加上Ç […]