Articles of reactjs

ReactJS react-router RoutingContext

我正在使用ReactJS与react-router模块构build同构应用程序,以便在服务器端进行路由。 从其在服务器上使用react-router的指南 : (req, res) => { match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { //… else if (renderProps) { res.status(200).send(renderToString(<RoutingContext {…renderProps} />)) } //… }) } 几乎没有关于这个RoutingContext的信息。 所以对于我来说它的工作原理还不太清楚。 它是从反应路由器(在其他路线顶部使用)的某种Router组件的替代? 任何帮助理解将非常感激!

在第二个动作调用中,React / Redux状态为空

对于React / Redux,我还是比较新的,所以如果这是一个简单的问题,但是我还没有find解决scheme,我很抱歉。 我有两个动作: // DESTINATIONS // ============================================== export const DESTINATION_REQUEST = 'DESTINATION_REQUEST'; export const DESTINATION_SUCCESS = 'DESTINATION_SUCCESS'; export const DESTINATION_FAILURE = 'DESTINATION_FAILURE'; export function loadDestination (params, query) { const state = params.state ? `/${params.state}` : ''; const region = params.region ? `/${params.region}` : ''; const area = params.area ? `/${params.area}` : ''; return (dispatch) […]

材料使用入门

对我来说,保守秘密就是material-ui,一个使用Google的Material Design UI和React的web框架。 我认为这是一个梦幻般的组合和未来。 但是,如何使用它也是一个保存完好的秘密。 http://material-ui.com/#/get-started上的入门指南不适用于普通的Joe,但仅适用于可以理解的一小部分人员。 而且,这里的问题,比如如何使用material-ui框架? , 材料ui安assembly置 ,从来没有回答过。 我设法安装了material-ui, $ npm install material-ui react-tap-event-plugin@0.1.6 node_modules/react-tap-event-plugin react@0.13.2 node_modules/react envify@3.4.0 (through@2.3.7, jstransform@10.1.0) material-ui@0.7.4 node_modules/material-ui classnames@1.2.1 react-draggable2@0.5.1 $ ls -d1 node_modules/* node_modules/material-ui node_modules/react node_modules/react-tap-event-plugin 但接下来呢? 我应该将它们移到我的/var/www/ ? 或者启动nodejs,或者…? 我怎样才能看到一个简单的演示,显示一切正在工作? 总而言之,作为一个只知道http服务器和静态html页面的人,对我来说,看到它的最简单方法是在我自己的环境中使用我现有的web服务器吗? 谢谢 $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 14.10 Release: […]

ECONNFUSED在应用程序中进行GET请求时,API成功返回JSON

我正在用React编写节点应用程序,使用node-postgres和superagent进行后端调用。 比方说,我正在做一个GET请求,并使用返回的JSON来填充学生表。 我的API看起来像这样: import pg from 'pg'; import Router from 'express'; let router = new Router(); let conString = "postgres://user:pass@localhost/db_name"; router.get('/getStudents', function(req, res) { var results = []; pg.connect(conString, function(err, client, done) { if (err) { done(); console.log(err); return res.status(500).json({success: false, data: err}); } var query = client.query('SELECT first_name, last_name, email FROM students'); query.on('row', function(row) […]

使用Multer将图像上传到Express

我正在尝试将图像上传到Express服务器。 我不完全确定如何做到这一点,但是我从我能从MDN拿到的东西中得到了什么, express , react-dropzone multer react-dropzone和multer文档。 Multer似乎没有从react-dropzone拿起FormData对象,注销req.file它返回undefined。 server.js var storage = multer.diskStorage({ destination: './public/users', filename: function (req, file, cb) { switch (file.mimetype) { case 'image/jpeg': ext = '.jpeg'; break; case 'image/png': ext = '.png'; break; } cb(null, file.originalname + ext); } }); var upload = multer({storage: storage}); app.use(upload.single('photo')); app.post('/uploadUserImage', function (req, res) { console.log(JSON.stringify(req.body.photo)) […]

是node.js与reactjs作为PHP模板渲染服务一个好主意?

我的网站是用PHP编写的。 Node.js也是为socket.io设置的。 我一直在考虑使用Reactjs进行服务器端渲染,以便重用视图。 计划使用v8js扩展,但是后来我遇到了这篇文章谈论两个可能的解决scheme: 1.使用v8js扩展和React-PHP-V8Js 2.从php发送数据到node.js来渲染视图,例如: 的node.js require("babel/register"); var React = require('react'); var express = require('express'); var path = require('path'); var bodyParser = require('body-parser'); var app = express(); app.use(bodyParser.json()); app.use('/', function(req, res) { try { var view = path.resolve('./views/' + req.query.module); var component = require(view); var props = req.body || null; res.status(200).send( React.renderToString( React.createElement(component, props) […]

设置代理服务器创build反应的应用程序

我已经使用create-react-app启动了一个反应应用程序,并运行了npm run eject脚本来访问所有文件。 我之后安装了express并创build了与package.json文件位于同一级别的server.js文件 这些是server.js文件的内容: const express = require('express'); const app = express; app.set('port', 3031); if(process.env.NODE_ENV === 'production') { app.use(express.static('build')); } app.listen(app.get('port'), () => { console.log(`Server started at: http://localhost:${app.get('port')}/`); }) 这里没有什么疯狂的,只是设置了未来的API代理,我需要使用秘密,因为我不想暴露我的API。 在此之后,我添加了一个"proxy": "http://localhost:3001/"到我的package.json文件。 我现在卡住,因为我需要弄清楚如何正确启动我的服务器,并使用此开发模式server.js文件,然后在生产。 理想情况如果我们可以使用更多的代理ie /api和/api2 ,那也是一件/api2

Webpack外部节点和浏览器

我有一个在浏览器和服务器上运行的同构React应用程序。 我通过两个不同的入口点和不同的configuration运行两个单独的Webpack构build,为两者构build相同的代码。 问题是,在服务器的节点上运行时,通过外部脚本标记(本例中为Google Maps)存在于浏览器窗口上的外部文件显然不存在。 除入口点文件外,代码是相同的。 index.html的: // index.html <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXX"></script> 简化configuration: // Server Webpack config { entry: 'server.js', target: 'node', externals: { google: google } } // Client Webpack config { entry: 'client.js', target: 'browser', externals: { google: google } } 组件: // The view which builds and runs fine in // the client […]

如何使用React.js在Sails.js上呈现服务器端模板?

我正在尝试用Sails.js和React构build一个同构的应用程序。 客户端部分很容易。 但是我遇到了服务器端渲染的问题。 当我尝试使用React服务器渲染一个* .jsx文件时,我得到了这个: renderToString(): You must pass a valid ReactElement 我正在使用sailsjs,react和sails-hook-babel(用于ES6语法)。 ./assets/components/Auth.jsx: import React from 'react'; export class Auth extends React.Component { constructor(props) { super(props); } render() { return ( <div className='auth'> Very simple element without any logic just for test server-rendering. </div> ); } } ./api/controllers/AuthController.js: var Auth = require('./../../assets/components/Auth.jsx'); import React […]

意外的标记punc«(»,预期punc从UglifyJS创build块时

尝试使用webpack 2.2.1进行生产构build时出现以下错误: > cross-env NODE_ENV=production webpack –config internals/webpack/webpack.prod.babel.js –color -p –progress Hash: 7bb2cdb98aab2f36f7e1 Version: webpack 2.2.1 Time: 259158ms Asset Size Chunks Chunk Names 39.1ac14d04bb54ae025fbd.chunk.js 575 kB 39 [emitted] [big] .htaccess 1.53 kB [emitted] manifest.json 624 bytes [emitted] 0.b0881f3ea995a2fc465f.chunk.js 600 kB 0 [emitted] [big] 1.350b2d8a46d91e3c0911.chunk.js 918 kB 1 [emitted] [big] 2.e52c43dc81bf586e8812.chunk.js 636 kB 2 [emitted] [big] […]