Tag: reactjs

使用Express创build反应应用程序: 我需要查询一个数据库，我正在使用create-react-app 。连接到数据库（ pg-promise ）的库不能与Webpack一起使用，需要在节点服务器上运行。所以我安装了Express并且有这个： app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html')); }) 如何从React页面加载数据库中的数据？我虽然使用request但我怎样才能请求我自己的服务器？我应该添加到上面的代码行？我认为它会是这样的： app.get('/query/:querybody', (req, res) => { // process and return query }) 这是正确的吗？我怎样才能使它与SPA一起工作？

使用Node.js和SPA进行SAML2.0身份validation: 我已经为了解决这个看起来很简单的任务而头痛了大约2天，但是开始让我发疯。我有一个应用程序，用户将使用SAML 2.0进行身份validation。我为前端设置了一个反应应用程序，并且认为我将使用JWT来确保前端和后端之间的其余api通信。当用户login时，stream程如下：用户访问www.server.com/并通过反应应用程序获取静态HTML 用户点击“login”并访问www.server.com/login passport-saml将用户redirect到saml身份提供者。用户login。用户使用req.body中的SamlResponse调用www.server.com/callback，它由passport-saml解码并放入req.user。如果用户不存在，我在数据库中创build用户。我创build了一个智威汤逊接下来我应该做什么？问题是用户在从身份提供者callback时没有处于反应应用程序，所以我已经在应用程序中失去了所有的状态，所以我回复的任何东西都会被发送到浏览器。有什么办法可以强制浏览器给我的身份提供者回拨的SamlResponse？然后，我可以将它作为来自react-application的http请求发送到服务器。

如何用reactjs生成nodejsexpression式的应用程序: 我在我的应用程序中使用reactjs作为前端技术。我需要使用nodejs作为服务器端编程。我安装了reactjs应用程序，它已经生成了项目结构和package.json，然后我安装了express ，npm本身已经将它添加到package.json 我在我的应用程序中为服务器端代码创build了server目录。这是我的目录和package.json { "name": "rock-paper-scissors-app", "version": "0.1.0", "private": true, "dependencies": { "express": "^4.15.3", "react": "^15.6.1", "react-dom": "^15.6.1" }, "devDependencies": { "react-scripts": "1.0.7" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test –env=jsdom", "eject": "react-scripts eject" } } 项目结构：到目前为止，一切都很好。现在我想要生成node-js express应用程序https://github.com/expressjs/express ，它不应该覆盖我现有的package.json $ express？任何人都可以帮助它的方法是什么？还是我做错了什么？

如何使用NextJS和React Router呈现服务器端反应内容？: 我需要从服务器端渲染我的React应用程序。为此，我使用了next.js框架。但是我面临着两个问题。首先，我需要dynamic地提供我的应用程序。这意味着我需要一个服务器端路由器根据当前的url显示我的反应组件。然后，我需要在渲染我的组件之前加载一些dynamic数据。所以我需要将这些数据从节点传递给我的反应组件。这是我目前的情况： // In Node.js app.get("/",function(req,res){ return app.prepare() .then(() => handle(req, res)) .catch(ex => { console.error(ex.stack) process.exit(1) }) }) //In React.js import React from 'react' export default class Index extends React.Component{ render(){ return( <div> <p>Hello Server Side Rendered React App from Google Cloud Front</p> </div> ) } } 所以我该怎么做 […]

react-select-plus +search不能使用逗号: 我在反应中使用react-select-plus控制下拉菜单。我参考这个演示点击这里。和包是npm包。当我使用正常工作的空间search任何数据时。示例如下屏幕截图：现在，我的问题是在数据有特定的逗号，那么是不行的。例如下面的屏幕截图。现在，我的愿望结果是在我的search标准忽略逗号，并给我的数据。怎么样，我应该解决这个问题。

create-react-app与节点快速获取％PUBLIC_URL％: 我正在尝试使用快递服务器创build反应应用程序。设置服务器后，当我点击要求，我越来越 GET http://localhost:3333/%PUBLIC_URL%/favicon.ico 400 (Bad Request) 在错误预览它给我 URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico' at decodeURIComponent (<anonymous>) at decode_param (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/layer.js:172:12) at Layer.match (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/layer.js:123:27) at matchLayer (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:574:18) at next (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:220:15) at jsonParser (/home/owaishanif/code/flashcard-app/node_modules/body-parser/lib/types/json.js:103:7) at Layer.handle [as handle_request] (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:317:13) at /home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:284:7 at Function.process_params (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:335:12) 这是服务器代码 var express = require('express'); var bodyParser = require('body-parser'); var […]

如何从ReactJS组件中删除“onClick”属性？: 我刚开始使用ReactJS和ReactJS 。我不太清楚一些东西。 render( ) { return ( <div> <img src={this.props.pic} onclick={this.props.cb()} class="af1" /> </div> ); } 以上是我的App组件的渲染方法。我想在第一次点击图像后删除onClick属性，并禁用图像（ not able to click again ）10秒左右（请build议我是否有更好的方法来暂时禁用点击图像）。这是一个很好的解决scheme吗？为什么不能在Chrome的开发者控制台中看到onclick attrib？我真的开始喜欢学这个东西，我迷路了。

在npm中找不到babel-loaders模块，从而反应js: 而npm开始 Webpack.json文件： var config = { entry: './main.js', output: { path: __dirname + "/dist/js", filename: 'index.js', }, devServer: { inline: true, port: 8080 }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loaders', query: { presets: ['es2015', 'react'] } }] }} module.exports = config; multi（webpack）-dev-server / client中的错误？ http：// localhost：8080 webpack / hot / dev-server […]

在reactApp creation-configuration.output.path中使用Webpack时出错：提供的值“./”不是绝对path！: 我正在关注在线教程，在ReactJS中创build第一个应用程序。在节点中使用npm进行手动软件包安装之后。安装完成后，我正在尝试运行npm start时遇到问题，出现如下错误：“无效的configuration对象。Webpack已经使用与API模式不匹配的configuration对象初始化 – configuration.output.path：提供的值” ./“不是绝对path！”。请让我知道哪里出了问题。在附件中查找快照。 Webpack错误

创buildReact App + Express.js + Passport.jslogin问题: 所以，我试图在后端使用Express.js创buildReact应用程序。我在两个不同的端口上运行 – 前端是3000，后端是3001.我正在使用本地通行证策略的login系统。 login系统工作正常。在前端，我有一个注册/login表单发送一个posthost请求localhost：3001 /注册（或login），并成功注册/login用户。然后，我有另一个路线在后端应该返回当前login的用户的数据，如果有login的用户，或者以其他方式返回具有“未authentication”消息的对象。 app.get('/loggedUserInfo', function(req, res) { if (req.user) { console.log(req.user); res.json(req.user); } else { console.log('not authenticated'); res.json({'message': 'not authenticated'}); } }); 现在，在客户端，我想根据这个请求的响应修改导航栏。例如，如果用户login，我想要一个包含注销button的导航栏，如果用户没有login，我想要一个带有login和注册button的导航栏。所以，在React组件中，我有这个相关的代码： componentDidMount() { fetch('localhost:3001/loggedUserInfo') .then(res => console.log(res.json())); } 这应该会改变组件的状态，但是它将响应logging到控制台，仅用于testing。而且每一次，即使用户login，它都会返回“未通过身份validation”的对象。这就像用户从未login过。但是，另一方面，如果我去我的浏览器中的localhost：3001 / loggedUserInfo，在用户login后，我得到了预期的结果。它返回我需要的用户信息。这真的是在烦扰我，我似乎无法弄清楚为什么会发生这种情况。我需要客户端的数据。如果有人想看到我的app.js文件，这里是相关的代码（按顺序），我认为我包括了需要在那里的一切： var cookieParser = require('cookie-parser'); var session = require('express-session'); var […]