Articles of reactjs

使用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 […]

React Native中的zIndex

如何处理zIndex? 我试图从scrollview中指定最大的数字,但它仍然在底部( 没有ScrollView它看起来像这样,但我需要滚动到图像。 谢谢