Articles of reactjs

代理客户端请求通过create-react-app和webpack dev服务器将应用程序反馈给服务器

尝试为客户端应用程序创build服务器端API。 客户端完全写在反应。 在开发中使用端口3000上的webdevserver。服务器正在侦听端口3001.我已经添加代理到客户端应用程序的package.json文件,如下所示: { "name": "client", "version": "0.1.0", "private": true, "devDependencies": { "react-scripts": "0.8.5" }, "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2", "react-router": "^3.0.2", "superagent": "^3.4.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test –env=jsdom", "eject": "react-scripts eject" }, "proxy": "http://localhost:3001/" } 但是一旦我要求服务器API失败: import Request from 'superagent'; export function searchTasks(text, callback) { […]

快递静态CSS没有服务

我一直试图弄清楚这几个小时,我的头即将爆炸。 我真的希望这不是我错过的一些愚蠢的小细节… 我有一个服务器端渲染反应应用程序设置。 一切都很好。 我唯一的问题是,我似乎无法得到加载的CSS。 这是我的文件树(没有node_modules): https ://i.stack.imgur.com/xevUb.png' 我有我的server.js文件中的以下代码 app.use('static', express.static(__dirname + '/public')); app.use('dist', express.static(__dirname + '/dist')); app.get('*', (req, res) => { match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { if (error) { res.status(500).send(error.message) } else if (redirectLocation) { res.redirect(302, redirectLocation.pathname + redirectLocation.search) } else if (renderProps) { var html = renderToString( < […]

了解ReactJS和NodeJS应用程序如何工作

我正在尝试学习React JS,但是我很难理解它应该如何与NodeJS一起工作,比如说Express。 到目前为止,我明白ReactJS是“MVC”中的“V”这很简单,我已经可以使用create-react-app编写代码 这是我的理解: 将React和Express结合起来的“自然”方式就是简单地在Express中使用React和api编写前端(例如使用Mongo)。 这样我们就可以简单地从React调用ajax调用我们的/ api并显示数据 也有可能使用React来进行服务器端渲染,这需要更多的configuration。 这样我们不会从React调用/ api,我们只是使用React来编写可以被Express渲染的代码 我的问题是我在想什么吗? 不能确定所有这些…同构JavaScript是否与#2有关?

在React应用程序中共享node.js模块?

我第一次尝试了node.js和npm ,使用Create React App样板编写了一个React教程。 第一个简单的应用程序工作正常。 文件结构如下所示(Windows 7): 我担心的是node_modules文件夹是70MB文件,占用磁盘120MB。 似乎每次我通过创buildReact应用程序创build一个新的应用程序,相同的文件夹将被重新创build为新的应用程序,并占用类似的海量存储。 我的问题是:是否有一些方法来创build新的应用程序,使相同的模块不下载,并不会占用越来越多的存储,而是可以跨应用程序共享(不知道node.js哲学是否支持共享这样的模块)。 更新:我已经提供了自己的回答这个问题。

如果不将客户端的服务器uri传递给io(),则无法使用SocketIO

我对React非常陌生。我使用Universal rendering来构build一个简单的React web应用程序。 我也使用socket.io实时更新一些信息。 在socket.io文档中,它指出您可以通过执行以下操作build立与服务器的连接: const socket = io() 在客户端。 但是,这不适合我。 我从socket.io-client得到这个错误: if (null == uri) uri = loc.protocol + '//' + loc.host; ^ TypeError: Cannot read property 'protocol' of undefined 相反,我必须把uri传给io()像这样: const socket = io('http://localhost:5050') 然后一切按预期工作…我的问题是如何build立socket.io通过简单地做第一个例子const socket = io() (没有IP地址/端口的服务器) 这是我的server.js: require('babel-register') const express = require('express') const React = require('react') const ReactDOMServer = require('react-dom/server') […]

用于后端的JS Express和用于前端的React JS

我已经在Node JS Express中准备好了我的服务器代码,并且以JSON的forms得到了我的响应。 我已经按照以下教程在Node.js中设置项目结构: https : //www.youtube.com/watch?v=65a5QQ3ZR2g&list=PL55RiY5tL51oGJorjEgl6NVeDbx_fO5jR 现在,我想在React中制作同一个应用程序的前端。 所以,这里我的意思是我的服务器在Node JS Express中,前端应该在React中。 考虑到React中的初学者,请向我推荐一些教程或例子,在这些教程或例子中,我可以至less开始制作我的UI,并将其融入到使用Node JS Express创build的项目结构中。 我试着自己find它,但在每个应用程序中,React JS自己创build它的服务器,但是我的服务器已经启动,并以Node JS express运行。 请指导。 请点击这个链接来查看我的Node JS项目结构

GraphQL:react-apollo客户端覆盖数组元素

我有一个返回一个项目数组的GraphQL查询。 我可以在GraphiQL中运行查询并获得我期望的结果。 我有一个反应的应用程序,使用react-apollo和@graphql装饰器来解决相同的查询组件道具。 当通过react-apollo运行查询时,返回数组中的每个项目都是相同的 – 每个项目都被最后一个项目“覆盖”。 我可以在开发工具networking选项卡中看到正确的数组项目是通过networking发送的,所以这个问题似乎与react-apollo有关。 什么可能导致反应apollo覆盖数组元素?

Nodemon和/或使用Node-React Web App进行热重新加载

在使用webpackconfigurationweb应用程序以创build最佳开发体验方面,我还是很新的。 我已经采取了两个不同的节点反应课程; 一个是我们使用nodemon来跟踪更改,另一个是我们实现热重载的地方。 当涉及到这两个依赖关系时,它是一个还是那个? 它们应该一起使用还是多余? 另外,如果我在客户端使用带有React的快速服务器,我是否使用react-hot-loader,webpack-hot-middleware或两者兼而有之? 我对使用热重装的方法感到困惑,因为看起来有很多方法可以做到这一点。 另外,当我使用nodemon作为包装(nodemon –exec babel-node server.js)时,我的热模块重新加载不起作用,但我仍然发现自己想要一种轻松重新启动服务器的方法。 多谢你们。

NPM / Webpack不能正确加载GSAP TimelineLite

我正在重构和运行生产应用程序清理,并优化依赖关系。 我们有一个React组件,它使用GSAP来处理一些与转换相关的东西,但只有TimelineLite库。 这些都是简单的东西,没有任何困难或任何事情,所以我们不需要任何更复杂的GSAP项目,现在可以将它们擦除以优化。 最初,我们只是通过NPM导入了整个GSAP库,如下所示: import 'gsap'; 根据GSAP npm文档( https://www.npmjs.com/package/gsap ) … 默认(主)文件是TweenMax,其中还包括TweenLite,TimelineLite,TimelineMax,CSSPlugin,RoundPropsPlugin,BezierPlugin,AttrPlugin,DirectionalRotationPlugin和所有的轻松 现在,我想减less我们的import脂肪,并切换到: import { TimelineLite } from 'gsap'; 但是,这是编译正确,但抛出以下客户端错误: Uncaught TypeError: _gsap.TimelineLite is not a constructor 有人知道为什么吗? 仅通过importTimelineLite节省的体重并不是很大,但是值得一做。 我是否需要专门导入GSAP库的其他部分? 笔记: 我也尝试import { TweenLite, TimelineLite } from 'gsap'; 没有运气。 奇怪的是, import { TweenMax, TimelineLite } from 'gsap'; 也不工作,但从import { TweenMax } from 'gsap'; 确实。 这里是我们正在使用的animation,超级基本: […]

如何创build“加载更多”function,而不需要在React / Node中重新渲染整个组件?

我试图创build一个简单的民意调查程序,在那里你可以进行新的民意调查。 在“MyPolls”一节中,我希望它只呈现我所做的前5轮投票,而不是呈现整个投票列表。 在底部是一个“加载更多”button,在点击后,再加载5个民意调查等等。 我一直在使用Mongoose / MongoDB后端,我的方法是使用skip和limit 。 我已经设法实现这个function,但问题是整个组件重新呈现,这是一个用户烦恼,因为你必须再次向下滚动点击“加载更多”button。 这是我的应用程序: https : //voting-app-drhectapus.herokuapp.com/ (使用这些login信息是否方便:用户名: riverfish@gmail.com密码: 123 ) 然后转到My Polls页面。 MyPoll.js : import React, { Component } from 'react'; import { connect } from 'react-redux'; import * as actions from '../../actions'; class MyPolls extends Component { constructor(props) { super(props); this.state = { skip: 0 }; } componentDidMount() […]