Tag: reactjs

意外的标记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] […]

使用Johnny-Five和React

我想用Johnny-Five和React JS创build一个接口。 我使用了这个React设置教程 。 我在同一个项目中安装了Johnny-Five： http : //johnny-five.io/ （Johnny-Five独立工作，独立应用程序，这使我可以控制我的Arduino）。 我的React index.js： import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import MainRouter from './routes'; import registerServiceWorker from './registerServiceWorker'; import five from 'johnny-five'; var board = new five.Board({ port: "/dev/ttyACM0" }); board.on("ready", function() { var led = new five.Led(13); led.blink(500); }); ReactDOM.render( <MainRouter />, document.getElementById('root')) […]

无法安装react-addons-transition-group

我在使用npm安装“react-addons-transition-group”时遇到了问题。 根据反应网站： 这些插件已经转移到了独立的软件包中：react-addons-clone-with-props，react-addons-create-fragment，react-addons-css-transition-group，react-addons-linked-state-mixin，react- addons-pure-render-mixin，react-addons-shallow-compare，react-addons-transition-group和react-addons-update，再加上ReactDOM.unstable_batchedUpdates在react-dom中。 – https://facebook.github.io/react/blog/2015/07/03/react-v0.14-beta-1.html 我努力了： npm install react-addons-transition-group npm install react-addons-css-transition-group 但我得到： npm ERR! notarget No compatible version found: react-addons-transition-group@'*' npm ERR! notarget Valid install targets: npm ERR! notarget ["0.14.0-beta1","0.14.0-beta2","0.14.0-beta3","0.14.0-rc1"] npm ERR! notarget npm ERR! notarget This is most likely not a problem with npm itself. npm ERR! notarget In most cases you […]

React Flux调度器vs Node.js EventEmitter – 可扩展？

当你使用Node的EventEmitter时，你订阅一个事件。 您的callback仅在特定事件启动时执行： eventBus.on('some-event', function(data){ // data is specific to 'some-event' }); 在Flux中，您向调度员注册您的商店，然后当每个事件被调度时，您的商店被调用。 商店的任务是过滤每一个事件，并确定事件对商店是否重要： eventBus.register(function(data){ switch(data.type){ case 'some-event': // now data is specific to 'some-event' break; } }); 主持人在录像中说： 实际上，所有商店都会收到所有的动作，这就是保持可扩展性的原因。“ 题 为什么以及如何向每个商店发送每个动作（大概）比只向特定商店发送动作更具可扩展性？

不变违规：无法在“连接（KnowStatus）”的上下文或道具中find“商店”。 将根组件包装在<Provider>中

我是新来的Redux当我服务器端渲染与REDX它扔了我这个错误 不变违规：无法在“连接（KnowStatus）”的上下文或道具中find“商店”。 将根组件包装在a中，或将“store”作为道具显式传递给“Connect（KnowStatus）”。 当我不使用serversiderendering它工作正常但是，当我使用它抛出一个像这样的错误… ServersiderenderExpress.js import express from 'express'; import bodyParser from 'body-parser'; import {Server} from 'http'; import React from 'react'; import {renderToString} from 'react-dom/server'; import {match, RouterContext} from 'react-router'; import routes from '../client/routes'; import Helmet from 'react-helmet'; import compression from 'compression'; import favicon from 'serve-favicon'; let app = express(); app.use(bodyParser.json()); app.use(compression()); app.use(favicon(__dirname + '/favicon/favicon.ico')) […]

是否有可能没有npm开始运行React项目？

我遇到了很大的麻烦 他们在一家公司兼职工作，他们正在寻找一种新的networking技术，在他们的网站上构build“networking组件” 。 他们已经开始使用AngularJS（第一个版本），我告诉他们，随着这个框架的最近的发展，现在处理它不是一个合适的时间。 这就是为什么我开始对ReactJS感兴趣。 但是，他们没有node.js服务器基础设施（这就是为什么AngularJS适合他们，只有一个浏览器就足够了），所以不可能像“npm start”那样运行它 。 好！ 我的问题是（正如我的post标题所说…）： 是否有可能运行ReactJS没有服务器端？ 我已经尝试在我的标题中的以下行 <script src="https://unpkg.com/react@15/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> 但它仍然是一个空白页面。 也许有一些我不明白的反应结构，这就是为什么我正在寻找你的一些帮助/解释。 我希望我已经清楚了！ 预先感谢您的回答。

在同构React应用程序中呈现HTMLstring

有一个非SPA的情况下消毒，但随机的HTMLstring作为input： <p>…</p> <p>…</p> <gallery image-ids=""/> <player video-id="…"/> <p>…</p> 该string来自WYSIWYG编辑器，包含嵌套的常规HTML标签和有限数量的应该呈现给小部件的自定义元素（组件）。 目前，像这样的HTML代码片段应该分别在服务器端（Express）上呈现，但是最终也会在客户端呈现为同构应用程序的一部分。 我打算使用React（或React-like框架）来实现组件，因为它可能适合这种情况 – 它是同构的，并且很好地呈现部分。 问题是子字符像 <gallery image-ids="[1, 3]"/> 应该成为 <Gallery imageIds={[1, 3]}/> JSX / TSX组件在某些时候，我不知道什么是正确的方式来做到这一点，但我希望它是一个共同的任务。 在React中如何解决这个问题？

create-react-app，安装错误（“找不到命令”）

我已经完全按照facebook说明页（ https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html ）中的说明安装了create-react-app： 首先，安装全局包： npm install -g create-react-app 我做到了 它似乎工作正常 – 文件被安装到 users/*name*/.node_modules_global/lib/node_modules/create-react-app 我不是很确定为什么全局安装将它带到这个path，但是你有它。 下一条指令： 现在你可以使用它来创build一个新的应用程序： create-react-app hello-world 不能更简单，对吗？ 但terminal吐出这个在我身上： -bash: create-react-app: command not found 这可能是一个非常简单的东西，但我不知道在哪里看。 如果任何人都可以帮助，我会很感激！ 提前致谢。 注意：我正在使用Node v6.3.1和npm v3.10.3

onClick处理程序不注册ReactDOMServer.renderToString

我试图复制这个小提琴： http : //jsfiddle.net/jhudson8/135oo6f8/ （我也试过这个例子http://codepen.io/adamaoc/pen/wBGGQv和存在相同的onClick处理程序问题） 并使用ReactDOMServer.renderToString使小提琴工作服务器端渲染 我有这个电话： res.send(ReactDOMServer.renderToString(( <html> <head> <link href={'/styles/style-accordion.css'} rel={'stylesheet'} type={'text/css'}></link> </head> <body> <Accordion selected='2'> <AccordionSection title='Section 1' id='1'> Section 1 content </AccordionSection> <AccordionSection title='Section 2' id='2'> Section 2 content </AccordionSection> <AccordionSection title='Section 3' id='3'> Section 3 content </AccordionSection> </Accordion> </body> </html> ))); Accordion元素看起来像这样： const React = require('react'); const fs = require('fs'); […]

React不会切换到生产模式

浏览器控制台警告： bundle.js：1警告：看起来您正在使用React的开发版本的缩小副本。 将React应用程序部署到生产环境时，请确保使用跳过开发警告的生产构build，并且速度更快。 有关更多详细信息，请参阅http://facebook.github.io/react/downloads.html 。 来自package.json的脚本： "scripts": { "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev", "start:dev": "webpack-dev-server –inline –content-base public/ –history-api-fallback", "start:prod": "webpack && node server.js" }, 在Git Bash中的命令： NODE_ENV=production npm start 如果我在server.js使用console.log(process.env.NODE_ENV) ，那么我得到了production 。 React 通过 npm安装 最新版本：15.0.2 我使用Webpack的UglifyJs插件 任何想法可能是错的？ 从第一个引号的链接： 注意：默认情况下，React将处​​于开发模式。 要在生产模式下使用React，请将环境variablesNODE_ENV设置为生产（使用envify或webpack的DefinePlugin）。 build议使用UglifyJS等执行死代码清除的清除器来完全删除开发模式中存在的额外代码。 我错过了什么吗？ 我真的需要某种第三方包或插件来设置variables吗？ 但它已经控制日志，它是在生产环境..对我来说似乎不符合逻辑。 更新：当前的webpack.config.js var webpack […]