Tag: reactjs

匹配API和同构路线: 我有一个同构的应用程序快速运行： app.get('*', (req, res) => { match( { routes, location: req.url }, (error, redirectLocation, renderProps) => { … } 目前我在通配符上进行匹配，因为这是我见过的大多数样板和教程中所采用的方法。现在这个问题是我需要能够匹配特定的路线，如/auth和/api需要以不同的方式处理同构的应用程序的路线。即/auth路由需要authentication用户。我需要一种方式来指定这些路线，但仍然保持通配符匹配的路线使用我的同构的应用程序。我已经考虑过，不是使用通配符匹配器，而是可以将同构应用程序的所有路由收集到一个数组中，并用它来表示： const isoRoutes = ['/home', '/about']; app.get([isoRoutes], (req, res)) 我不确定是否有更好的方法来达到这个目的？

如何将上下文传递给React / jsx视图？: 我是React新手，我正在努力弄清楚一些基础知识。在其他模板引擎（如EJS或Jade）中，当您在路由/控制器文件中呈现视图文件时，您可以传入上下文variables。但是，我还没有find任何方式与React / jsx做到这一点。我应该注意到我正在使用Express。我实际上是不确定的，如果jsx是一个视图引擎，或者如果React莫名其妙内置。无论如何，我不知道如何将上下文从服务器传递到视图文件。例如，如果我想加载configuration文件信息（存储在服务器/后端），我怎样才能把它传递给我的前端jsx视图文件在React / jsx？

在Express服务器上使用react-router: 我有一个简单的Express服务器正在服务的React应用程序。 React应用程序正在被webpack放到我的根目录（ server.js文件所在的位置）的一个名为dist目录中。 dist文件夹包括index.html入口点， main.min.js JavaScript包以及所有其他静态资源（css，图像等）。如果我访问该站点的根目录localhost:3000/例如， index.html得到服务，它加载JS捆绑并发现所有其他资产罚款。该应用程序，使用react-router ，通过button点击和一个链接，使我到localhost:3000/feature正常工作正常导航。但是，如果手动进入地址栏并键入localhost:3000/feature ，则服务器会按照预期提供index.html ，但也会用index.html代替main.min.js 这是因为快速服务器中的通配符路由被映射为返回index.html 。这是我在一些文章中看到的，但是我不确定这个案子是否被考虑过。以下是相关服务器代码的一部分： app.use(express.static(path.join(__dirname))); app.get('*', function response(req, res) { res.sendFile(path.join(__dirname, 'dist', 'index.html')); }); 这是什么定义服务器路由。有没有更好的方法来做到这一点，将允许手动地址更改？这是我的文件结构，如果有帮助： |-root |-server.js |-webpack.config.js |-dist/ |-main.min.js |-index.html |-a2cea76fae187add3c974dcacf446eab.jpg |-…etc index.html内容： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> […]

Javascript ES6最佳实践，variables实例化: 我有一个关于我刚刚阅读的最佳实践的问题： https ： //github.com/ryanmcdermott/clean-code-javascript#remove-duplicate-code 问题是关于variables赋值 let portfolio = employee.getGithubLink(); if (employee.type === 'manager') { portfolio = employee.getMBAProjects(); } 我这样做只是为了实例化投资组合1次。 if (employee.type === 'manager') { let portfolio = employee.getMBAProjects(); } else { let portfolio = employee.getGithubLink(); } 我的问题是：为什么最好实例化一个variables并覆盖它，而不是用“else”语句实例化一次。

无法运行scalajs-react项目: 我只是试图build立scalajs -使用官方文档做出反应，但是当我尝试运行这个sbt run时遇到了一个问题： [info] Fast optimizing C:\temp\scalajs-react\target\scala-2.12\scala-js-tutorial-fastopt.js [info] Running org.example.TutorialApp [error] module.js:471 [error] throw err; [error] ^ [error] [error] Error: Cannot find module 'react' [error] at Function.Module._resolveFilename (module.js:469:15) [error] at Function.Module._load (module.js:417:25) [error] at Module.require (module.js:497:17) [error] at require (internal/module.js:20:19) [error] at C:\Users\avkar\AppData\Local\Temp\1484704765073-0\react-dom.js:16:24 [error] at Object.<anonymous> (C:\Users\avkar\AppData\Local\Temp\1484704765073-0\react-dom.js:40:3) [error] at Module._compile (module.js:570:32) [error] at […]

Babel插件不按预期运行 – 输出不总是显示: 我已经做了一个babel插件，应该find具有特定名称的所有function，以获得input参数。但是，它并没有像我期望的那样运行。现在我只是console.log预期的参数，但它们并不总是find。 module.exports = function ({ types: t }) { return { visitor: { CallExpression: function(path) { const node = path.node; console.log("name:", node.callee.name); if(node.callee.name === 'i18n') { const argumentNode = node.arguments[0]; if(t.isStringLiteral(argumentNode)){ console.log(argumentNode.value); } } } } }; }; 其实第一个console.log ： console.log("name:", node.callee.name); 创造像20个输出，但我期待更多的方式。在.babelrc ，我添加了我的ast-crawler像这样： { "plugins": [ "babel-plugin-add-module-exports", "ast-crawler" ], "presets": [ […]

代理客户端请求通过create-react-app和webpack dev服务器将应用程序反馈给服务器: 尝试为客户端应用程序创build服务器端API。客户端完全写在反应。在开发中使用端口3000上的webdevserver。服务器正在侦听端口3001.我已经添加代理到客户端应用程序的package.json文件，如下所示： { "name": "client", "version": "0.1.0", "private": true, "devDependencies": { "react-scripts": "0.8.5" }, "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2", "react-router": "^3.0.2", "superagent": "^3.4.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test –env=jsdom", "eject": "react-scripts eject" }, "proxy": "http://localhost:3001/" } 但是一旦我要求服务器API失败： import Request from 'superagent'; export function searchTasks(text, callback) { […]

快递静态CSS没有服务: 我一直试图弄清楚这几个小时，我的头即将爆炸。我真的希望这不是我错过的一些愚蠢的小细节… 我有一个服务器端渲染反应应用程序设置。一切都很好。我唯一的问题是，我似乎无法得到加载的CSS。这是我的文件树（没有node_modules）： https ://i.stack.imgur.com/xevUb.png' 我有我的server.js文件中的以下代码 app.use('static', express.static(__dirname + '/public')); app.use('dist', express.static(__dirname + '/dist')); app.get('*', (req, res) => { match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { if (error) { res.status(500).send(error.message) } else if (redirectLocation) { res.redirect(302, redirectLocation.pathname + redirectLocation.search) } else if (renderProps) { var html = renderToString( < […]

了解ReactJS和NodeJS应用程序如何工作: 我正在尝试学习React JS，但是我很难理解它应该如何与NodeJS一起工作，比如说Express。到目前为止，我明白ReactJS是“MVC”中的“V”这很简单，我已经可以使用create-react-app编写代码这是我的理解：将React和Express结合起来的“自然”方式就是简单地在Express中使用React和api编写前端（例如使用Mongo）。这样我们就可以简单地从React调用ajax调用我们的/ api并显示数据也有可能使用React来进行服务器端渲染，这需要更多的configuration。这样我们不会从React调用/ api，我们只是使用React来编写可以被Express渲染的代码我的问题是我在想什么吗？不能确定所有这些…同构JavaScript是否与＃2有关？

在React应用程序中共享node.js模块？: 我第一次尝试了node.js和npm ，使用Create React App样板编写了一个React教程。第一个简单的应用程序工作正常。文件结构如下所示（Windows 7）：我担心的是node_modules文件夹是70MB文件，占用磁盘120MB。似乎每次我通过创buildReact应用程序创build一个新的应用程序，相同的文件夹将被重新创build为新的应用程序，并占用类似的海量存储。我的问题是：是否有一些方法来创build新的应用程序，使相同的模块不下载，并不会占用越来越多的存储，而是可以跨应用程序共享（不知道node.js哲学是否支持共享这样的模块）。更新：我已经提供了自己的回答这个问题。