Tag: reactjs

Chrome中的Webpack不完整的块编码

我花了整个周末,试图找出为什么我的应用程序从webpack加载捆绑的客户端js文件时,得到错误ERR_INCOMPLETE_CHUNKED_ENCODING。 我刚刚意识到Chrome是引发此错误的唯一浏览器。 为什么会发生这种情况,我该如何解决?

webpackconfiguration错误无法parsing模块

当我运行webpack – watch我得到了Cannot resolve module 'js/app.js' 。 然后,当我执行npm run dev时,我的app.min.js没有编译。 我创build了一个git仓库,这是我的webpack.config.js var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); var path = require('path'); module.exports = { context: path.join(__dirname, "src"), devtool: debug ? "inline-sourcemap" : null, entry: "js/app.js", //what's wrong with this line? module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', […]

如何将服务器端渲染中的数据传递给节点的reactjs组件

我刚刚开始学习reactJS的function,我很新。 我试图找出一种方法,通过服务器端渲染概念从nodeJS传递的价值JS。 在下面的例子中,我能够定义一个反应组件,并将其添加到服务器,并在UI中呈现它,但我不知道如何将数据传递给可以在组件渲染函数内使用的组件。 client.js var React=require('react'); var ReactDOM=require('react-dom'); var Component=require('./Component.jsx'); ReactDOM.render( React.createElement(Component),document ); Component.jsx var React=require('react'), Request=require('superagent') module.exports = React.createClass({ getInitialState: function () { return { }; }, componentWillMount: function () { }, componentDidMount: function() { clearInterval(this.intervalID) }, _handleClick: function () { alert('You clicked!') }, render:function(){ return( <html> <head> <title> ReactJS – demo </title> <link […]

使用Multer上传文件,并在parsing并上传到数据库之前将其暂时存储在内存中

我对编程相对来说比较新,但是我会尽可能简化。 我正在使用multer来尝试上传一个XML文件。 我有一个Node Express服务器,我也使用React .jsx。 上传后,我将parsing该文件数据并将其发布到Postgres数据库。 所以考虑到这一点,我不写上传的文件到磁盘,我只是在parsing之前使用multer的缓冲区属性存储它。 我有一个使用jQuery进行表单提交的小型testing项目,但是我没有在这里使用jQuery,而且我不确定表单提交如何在React中真正起作用,或者甚至是这个问题。 我只包括与使用multer直接相关的代码。 其他一切工作正常。 这是我的表单: <form id="uploadForm" ref="form" encType="multipart/form-data" method="post" action="/upload" onSubmit={this.handleSubmit} > <input type="file" name="songlist" /> <input type="submit" value="UploadFile" name="submit" /> </form> 这是我的表单提交处理在同一个组件。 onSubmit会自动提交表单还是我应该在这里做别的事情? handleSubmit(event) { console.log('hey'); event.preventDefault(); this.props.postSongs(); }, postSongs()调用我的服务器端路由: postSongs() { axios.post("/upload") .then(() => { console.log('success') }) .catch((err) => { console.error(err); }); }, 而在我的服务器端路由,我正在发出请求,应该得到该文件存储在multer的内存中: const multer […]

在React App中不显示的图像

下午好, 我正在使用React / Redux应用程序,正在加载到我的商店的图像不显示。 我的galleryObject.js包含了我想要显示的每个图像的信息,例如: pastry1: { name: "Pastry!", image: "./client/images/cake1.jpg", desc: "Tasty Pastry" }, pastry2: { name: "Pastry!", image: "./client/images/cake2.jpg", desc: "Tasty Pastry" } … (all the way to pastry17) 让我感到困惑的是绝对path不会导致图像被显示,状态被正确加载,因为我可以在我的React开发工具中看到它。 我甚至把一个超链接扔到一个在线图像,它的工作来testing它。 我的文件结构是这样的: // Project // client //images (where the actual pictures are stored) //data (where galleryObject.js resides) //main.js (where everything eventually becomes bundled […]

从ReactJS组件调用服务器端函数

我试图在我的ReactJS应用程序中实现一个支付系统,该应用程序需要服务器端代码。 我有几个问题: 你如何连接ReactJS应用程序,以便它可以与服务器端代码进行通信? 你将如何在服务器端代码中设置一个函数? 你将如何从ReactJS应用中的组件调用该function? 作为参考,我试图整合条纹订阅 。 他们提供Node,PHP等的服务器端代码示例。 仅供参考:我不想设置服务器端渲染。 当您参考ReactJSsearch服务器端代码时,这就是所有的问题。 编辑:我特别感兴趣的NodeJS解决scheme。 我也使用Webpack。

为什么在使用Webpack时需要React和ReactDOM作为模块? 生产产量需要很长时间

编辑:我是错误的。 我正在使用GULP,WEBPACK和BABEL,看我的答案。 我刚刚开始学习React。 基本上我见过的所有教程都使用Webpack和babel。 Webpack和babel都很棒,但是为什么大部分需要作为模块与webpack包文件一起进行反应和反应? var React = require('react'); var ReactDOM = require('react-dom'); 我们可以加载而不是通过反应的安装页面https://facebook.github.io/react/docs/installation.html底部发现的webpack加载的cdn文件比webpack输出的反应模块小得多(至less对我而言,我已经做了推荐的优化)。 该页面具有这些脚本标签: 开发文件(反应29kb,反应-137kb): <script src="https://unpkg.com/react@15/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> 生产文件(.min.js)(反应7kb,反应36kb): <script src="https://unpkg.com/react@15/dist/react.min.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> 生产文件共43kb,开发文件共166kb。 使用webpack我已经设法得到反应和反应达到220kb。 对于我来说,在加载到浏览器中时,文件的大小并不重要,至less在开发过程中是这样。 cdn文件将使React和ReactDOM全局​​variables,这真的很好,但我想这将是更好的,让他们本地模块function,如教程,它不会像将有一个全球性的标识符冲突,虽然。 问题是,当我们需要react.js npm模块的时候,它本身就有很多需要的东西,所以它通过webpack和babel来运行,每当我们做出改变的时候需要几秒钟的时间来产生bundle文件在开发过程中,因为反应非常大。 事实上,我们可以最小化webpack的configuration的反应输出不会改变webpack将花费一段时间来产生最小化输出的事实。 当我对app.js进行一个简单的改变,并希望bundle文件尽快准备就绪。 如果我使用反应CDN文件,只有我自己的应用程序代码与webpack捆绑在一起,我的app.js中的更改几乎是立即捆绑,而不是需要反应,这将需要大约4-5秒捆绑。 有没有人有解决这个比使用CDN? 我可能会以错误的方式使用webpack吗? 谢谢!

为什么node.js无法find其他types的React组件

我正在用打字机重写一些反应的服务器端渲染文件,而我只是遇到了一个find我的自定义组件的问题。 path结构: node_modules/ src/ page/Homepage.tsx component/Layout.tsx utility/ typings/ 当node.jsparsingHomepage.tsx ,它可以find像react和memobind这样的memobind下的所有模块,但是找不到我的组件Layout 。 我的IDE phpstorm没有问题确定我的组件的位置,但当我访问它给出的页面: Error: Cannot find module '../component/Layout' at Function.Module._resolveFilename (module.js:470:15) at Function.Module._load (module.js:418:25) at Module.require (module.js:498:17) at require (internal/module.js:20:19) at Object.<anonymous> (/home/base/node/src/page/Homepage.tsx:5:1) at Module._compile (module.js:571:32) at loader (/home/base/node/node_modules/babel-register/lib/node.js:144:5) at Object.require.extensions.(anonymous function) [as .js] (/home/base/node/node_modules/babel-register/lib/node.js:154:7) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at […]

Socket.io不会在ReactJS应用程序中连接

我正在用express和socket.io构build一个使用react,node的小应用程序。 我正在使用socket.io创build一个聊天function,但它似乎没有连接。 在服务器的控制台中没有错误消息,但在浏览器即时获取错误 POST http://localhost:3000/socket.io/?EIO=3&transport=polling&t=Lb-j6De 404 (Not Found). 我不知道什么是错的,我通过了文件,但即时通讯仍然在这个问题上挣扎。 我的服务器 import express from 'express'; import mongoose from 'mongoose'; import bodyParser from 'body-parser'; import passport from 'passport'; import cros from 'cors'; import path from 'path'; import webpack from 'webpack'; import http from 'http'; import SocketIO from 'socket.io'; import webpackmiddleware from 'webpack-dev-middleware'; import webpackHotMiddleware from 'webpack-hot-middleware'; import […]

webpack-dev-server的“npm start”错误

我知道这是一个形成问题的可怕的方式,但我已经研究了几个小时,并没有取得任何进展。 一切正常昨天晚上,今天早上我有一个从App Store的更新,使我重新启动,现在我的npm服务器(我试图学习React.js)不起作用。 这是我的错误日志: 0 info it worked if it ends with ok 1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ] 2 info using npm@4.0.5 3 info using node@v4.6.1 4 verbose run-script [ 'prestart', 'start', 'poststart' ] 5 info lifecycle react-essential@1.0.0~prestart: react-essential@1.0.0 6 silly lifecycle react-essential@1.0.0~prestart: no script for prestart, continuing 7 info lifecycle react-essential@1.0.0~start: […]