Tag: reactjs
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 […]
envify在react.js不起作用
我是node.js和react.js的新手。 我最近学习react.js，并按照react.js 官方页面上的说明，并尝试使用生产模式。 所以我开始在main.js中的代码 var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); 并浏览它 $ browserify -t [ babelify –presets [ react ] ] -t [ envify –NODE_ENV production ] main.js -o bundle.js 但是envify似乎不起作用。 结果包代码仍然包含 process.env.NODE_ENV 有什么问题吗？ 我试图在main.js中设置process.env.NODE_ENV='production' 。 但它不起作用。 谁能帮我？ 谢谢。
如何禁用或阻止ReactJS在服务器端呈现时查找文档？
我正在尝试在我的ReactJS应用程序中使用客户端上的animation。 如果我通过npm安装gsap模块，然后尝试在我的模块中使用gsap，我得到以下错误： node_modules/gsap/src/uncompressed/TweenMax.js:2535 _doc = document, ^ ReferenceError: document is not defined at Function.<anonymous> (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:2535:11) at [object Object].check (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:5794:61) at new Definition (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:5811:10) at window._gsDefine (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:5816:12) at Array.<anonymous> (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:2489:11) at /Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:7570:9 at Object.<anonymous> (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:7581:3) at Module._compile (module.js:435:26) at Module._extensions..js (module.js:442:10) at Object.require.extensions.(anonymous function) [as .js] (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/babel-register/lib/node.js:138:7) 有没有在ReactJS代码的方法：如果它在服务器上呈现，没有文档，所以不加载gsap，但一旦编译bundle.js（我的客户端反应接pipe客户端的js）下载，使用gsap因为文件存在？ 目前我正在使用的工作是将gsapembedded到index.ejs中： <!DOCTYPE html> <html> <head> <title>Solid Website</title> </head> […]
React使用react-router和browserHistory所需的最小nodejs服务器设置
我目前的server.js： let express = require('express'); let harp = require('harp'); let path = require('path'); let app = express(); app.use(express.static(__dirname + "/dist")); app.use(harp.mount(__dirname + "/dist")); let port = process.env.PORT || 3333; app.listen(port, () => console.log("Listening on port " + port) ); // … other routes for data fetching … // For browserHistory: https://github.com/reactjs/react-router/blob/1.0.x/docs/guides/basics/Histories.md app.get('*', (req, res) => […]
无法导入模块：您可能需要一个合适的加载程序
我有一个使用bower和webpack的React项目。 我正在尝试使用这个模块https://github.com/jrowny/react-absolute-grid 。 我用npm安装它，然后把它添加到我的代码中，如下所示： import AbsoluteGrid from 'react-absolute-grid/lib/AbsoluteGrid.jsx'; 导入模块时，出现这个问题： Line 3: Unexpected token You may need an appropriate loader to handle this file type. | 'use strict'; | | import React from 'react'; 我怀疑问题是，在webpack.config.js我只加载文件从我的代码是： var webpack = require('webpack'); var path = require('path'); var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); var APP_DIR = path.resolve(__dirname, 'src/client/app'); var config = […]
webpack当试图编译反应时退出状态4294967295
我正在尝试创build我的第一个反应项目并尝试一个教程。 我基于我的webpackconfigurationclosures该示例项目，但是当我运行webpack，我得到一个错误。 这是npm-debug日志： 0 info it worked if it ends with ok 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', 1 verbose cli 'C:\\Users\\daford\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'production' ] 2 info using npm@3.8.6 3 info using node@v5.10.0 4 verbose run-script [ 'preproduction', 'production', 'postproduction' ] 5 info lifecycle nestlepronourish@1.0.0~preproduction: nestlepronourish@1.0.0 6 silly lifecycle […]
为什么react.js不认识自己的node.js模块？
我正在尝试为react.js做一个hello world，然而react.js在第3行失败。 该错误是一个参考错误： ReferenceError: Can't find variable: module react.js:3 我认为这是一个节点模块，节点恰好是我所服务的html 。 不完全确定为什么这是…有人打赌下赌注或线索我？ 代码非常简单： main.js // main.js var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'); ); 的index.html <!DOCTYPE html> <html> <head> <title>Hello React!</title> <script src="node_modules/react/react.js"></script> <script src="node_modules/react-dom/dist/react-dom.js"></script> <script src="main.js"></script> </head> <body> <div id="example"></div> </body> </html>
您应该通过在Babelconfiguration中使用`env`部分禁用生产中的react-transform-hmr
我使用babel-cli来获得jsx和es6的function 我已经改变了我的构build命令 从 "build": "node build", 至 "build": "babel-node build" ， 以前一切正常 但是，当我运行生成命令我得到这个错误 错误：locals [0]似乎不是启用热模块replaceAPI的module对象。 您应该通过在Babelconfiguration中使用env部分来禁用生产中的react-transform-hmr。 请参阅自述文件中的示例： https ： //github.com/gaearon/react-transform-hmr 也看截图 所以我应该通过在Babelconfiguration中使用env部分来禁用生产中的react-transform-hmr 这是我的.babelrc喜欢的说明 { "presets": ["react", "es2015"], "env": { "development": { "plugins": [ ["transform-object-rest-spread"], ["transform-react-display-name"], ["react-transform", { "transforms": [{ "transform": "react-transform-hmr", "imports": ["react"], "locals": ["module"] }, { "transform": "react-transform-catch-errors", "imports": ["react", "redbox-react"] }] }] ] […]
