Articles of reactjs

我的反应应用服务器在哪里?

我使用React教程页面上的教程设置了一个反应应用程序。 运行我input的应用程序 npm开始 Package.json提到启动应该运行“react-scripts start” 。 我试图了解在这个应用程序上生活的服务器在哪里? 我想在此添加路由,以便我可以实现一些后端function,使AJAX调用“/电子邮件”或类似的path。 我是React的新手,但我假设应该有一些在端口上监听的Express路由,如果没有的话,有人可以帮我理解这个架构吗?

制作React图库的策略对search引擎友好

我写了一个React图片库或幻灯片。 我需要使search引擎可以索引替代文本,但因为我的服务器是在PHP中,React.renderToString是有限的使用。 该服务器在PHP + MySQL中。 PHP使用Smarty(一个体面的PHP模板引擎)来呈现HTML。 其余的PHP框架是我自己的。 Smarty模板有这么一个单一的线: <script> var GalleryData = {$gallery}; </script> 这是由PHP的控制器function呈现如下: return array( 'gallery' => json_encode($gallery), ); ( $gallery是MySQL查询的结果表)。 而我的.js: React.render(<Gallery gallery={GalleryData} />, $('.gallery').get(0)); 不是最优雅的设置,但考虑到我的服务器是在PHP中,似乎没有更好的方法来做到这一点(?) 我做了一个超级快速入门,在第一枪时修复了这个问题 – 我从Firebug复制了呈现的HTML,并手动将其插入到数据库中的一个新表中。 然后,我只是从PHP中呈现这个代码块,我们很高兴浏览器。 有一个复杂的是,因为React组件只在第一次渲染时插入到DOM中(据我了解),而且由于该库一次只显示一个图像幻灯片,我不得不手动点击所有幻灯片一次保存HTML代码。 但是现在,替代文本可以由CMS编辑,所以我需要自动化这个过程,或者想出一个更好的解决scheme。 在Node.js中重写服务器是不可能的。 我的第一个猜测是我需要安装Node,并编写一个脚本来创build相同的React组件。 由于input数据(包括alt文本)必须来自MySQL,我有几个select: 从注释连接到MySQL数据库,并复制查询 在PHP端创build一个只返回JSON的响应URL(把SQL查询放入一个通用函数) 在Node中获取整个页面,但是提取GalleryData将会是一团糟 然后,我必须确保所有组件都被渲染到DOM中,所以我可以通过手动调用nextSlide()方法多次编写幻灯片(less一个)来编写脚本。 最后,我将把渲染的DOM再次保存到数据库(所以Node脚本毕竟需要一个MySQL连接 – 也许第一个选项是最好的)。 对于这样一个基本要求,整个过程似乎非常复杂。 我错过了什么吗? 我对Node完全陌生,在浏览器之外构buildDOM的概念对我来说基本上是新的。 我不介意将Node引入到我的架构中,但它只是支持在前端使用React。 请注意,该网站每月大约有15,000个综合浏览量,因此不需要考虑大规模的可扩展性 – 我不使用任何页面caching,因为这种stream量并不需要。 我可能有一些需要像这样静态渲染的React组件,但是维护一个小的技术开销(例如,在Node中维护一组并行的SQL查询)不会是一个大问题。 有谁可以在这里指导我吗?

我如何处理服务器上的反应路由器可能的每条路线?

在反应路由器中的自述文件之后: var routes = ( <Route name="app" path="/" handler={App}> <Route name="inbox" handler={Inbox}/> <Route name="calendar" handler={Calendar}/> <DefaultRoute handler={Dashboard}/> </Route> ); Router.run(routes, function (Handler) { React.render(<Handler/>, document.body); }); 对节点和一个有信誉的前端js框架是非常新鲜的,请原谅noobish的问题.. 在服务器上处理路由最好如何? 我的意思是,当某人登陆/calendar时会发生什么事情,我是否必须在快速路线中的客户端和服务器上容纳路线,或者是否有快递路线。 IE某人登陆/calendar ,应该表示为/的HTML并允许处理其余的? 谢谢,约翰

使用Superagent服务器端获取连接ECONNREFUSED错误

我正在构build一个同构的React应用程序。 我正在使用Webpack捆绑我的JS。 我正在使用react-router进行路由。 当我点击“/search”路线时,要呈现的组件调用一个API(目前只是一个testingJSON文件)。 在客户端,superagent调用工作正常,并在渲染此路由时拉入数据。 当我尝试从服务器端渲染相同的路由时,出现此错误: Potentially unhandled rejection [2] Error: connect ECONNREFUSED at errnoException (net.js:901:11) at Object.afterConnect [as oncomplete] (net.js:892:19) 任何想法为什么发生这种情况? 这是执行呼叫的代码: var request = require('superagent'); var Promise = require('Promise'); module.exports = { doCall: function(url, params) { return new Promise(function(resolve, reject) { request .get(url) .end(function(err, res) { if(res) { resolve(res); } else { reject(err); […]

React-router服务器端错误

我试图让我的客户端Web应用程序同构。 我得到这个模式: 客户端路由(使用react-router)和服务器端路由 在这里,我得到了什么。 server.js: var React = require('react'), express = require('express'), Router = require('react-router'), routes = require('./src/js/main'), path = require('path'), app = express(), port = 5555, bodyParser = require('body-parser'); // Make sure to include the JSX transpiler require("node-jsx").install(); // Include static assets. Not advised for production app.use(express.static(path.join(__dirname, 'dist'))); // Set view path app.set('views', path.join(__dirname, […]

React和Socket.io

我正在尝试使用ReactJS和Socket.io创build一个简单的应用程序 在我的组件我想能够与服务器通信,但问题是,我不知道如何做io.connect() 1.是否需要明确指定IP地址,如io.connect("http://myHost:7000")还是足够说: io.connect() ? 正如我们可以在这段代码中看到的: https : //github.com/DanialK/ReactJS-Realtime-Chat/blob/master/client/app.jsx 2.我做的或多或less与此代码相同,但是当我执行npm start时,我收到错误,因为io is undefined 。 我认为, io是通过包含socket.io脚本全局提供的。 我怎么解决这个问题 ? 'use strict'; var React = require('react'); var socket = io.connect(); var chatWindow = React.createClass({ displayName: 'chatWindow', propTypes: {}, getDefaultProps: function() { return ({ messages: 0 }); }, componentDidMount: function() { socket = this.props.io.connect(); socket.on('value', this._messageRecieve); }, _messageRecieve: […]

reactJs Jest:`jsdom 4.x以前只能用于io.js,而不是Node.jsT:

的package.json: { "name": "flux-pricing", "version": "0.0.1", "description": "Pricing component with flux", "main": "js/app.js", "dependencies": { "flux": "^2.0.0", "jest-cli": "^0.5.0", "jsdom": ">= 0.1.23 < 4.0.0", "react": "^0.12.0", "underscore": "^1.7.0" }, "devDependencies": { "browserify": "~6.2.0", "envify": "~3.0.0", "react": "^0.12.0", "reactify": "^0.15", "watchify": "~2.1.0", "gulp": "~3.8.9", "gulp-browserify": "~0.5.0", "gulp-concat": "~2.4.1", "node-jsx": "~0.2.0", "express": "~4.0.0" }, "scripts": { "start": […]

react-bootstrap不包含css

我的jsx文件成功识别react-bootstrap元素,但是没有样式给他们。 我的项目的node-modules文件夹包含react-bootstrap和bootstrap。 为什么会这样呢? var React = require('react'); var Button = require('react-bootstrap').Button; var Jumbotron = require('react-bootstrap').Jumbotron; var ReactComponentHi = React.createClass({displayName: 'Hi', render: function() { return ( <div> <Button bsStyle='success'> clickk </Button> <Jumbotron> <h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><Button bsStyle='primary'>Learn more</Button></p> […]

嵌套的路由请求被解释为请求CSS文件

甚至不知道如何说这个问题。 基本上我有一个React应用程序,我使用React-Router进行路由处理,节点服务器发送每个请求的index.html文件,并处理静态资产,因为我正在使用React Router的HistoryLocationconfiguration。 logging每个请求到该服务器,我可以看到,去基地url发送3个请求,一切正常工作: GET / 200 3.795 ms – – GET /static/app.css 200 2.234 ms – – GET /build/bundle.js 200 0.608 ms – – 任何规则的浅层路线也是如此(例如/a )。 但是,只要我尝试访问一个嵌套的路线(例如/a/b ),一切都打破。 更具体地说,在窗口中,我收到Uncaught SyntaxError: Unexpected token <一个语法错误,在我的节点服务器的日志中,我得到这些请求: GET /a/b 304 2.286 ms – – GET /a/static/app.css 304 1.061 ms – – GET /a/build/bundle.js 304 1.004 ms – – […]

ReactRouter:警告:React.createElement:types不能为null,未定义

警告Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). 然后它抛出错误Error: Invariant Violation: Element type […]