我是一位老的网络开发人员，我习惯使用html，css，js（jquery）和使用Java，Cold fusion或PHP等服务器端语言。
现在，对于我的生活，我找不到一个好的解释或如何开始。它没有意义，我花了最近3天观看教程和阅读书籍。这不是抱怨，而是要求帮忙。有人请向我解释这个架构是如何设置的。在过去，您将拥有一个html文件并注入一些占位符，这些占位符将由您的服务器端语言填充。
现在的结构是什么？我已经创建了一个Ubuntu服务器，我已经安装了NodeJS及其关联，我创建了一个反向代理并安装了nginx作为我的服务器。 PM2是我的NodeJS应用程序的流程管理器。我到目前为止是在正确的轨道上吗？
如果是这样，reactjs，reduxjs，babeljs在哪里，什么是npm的webpack？我的下一步是什么，我很困惑，我不知道所有这些都是什么。特别是reactjs，redsuxjs和bablejs以及其他任何内容之间的区别是，这些只是前端库还是？什么是npm webpack。还有还原剂和反应还原剂，什么？谢谢你的澄清。
我的目标
我想学习如何创建单页面应用程序，并尽可能多地利用bootstrap。我认为反应将是可行的方式，但我真的很感激一些澄清，而不仅仅是他们网站描述的复制粘贴。谢谢你们/ gals。
答案 0 :(得分：1)
首先，您的问题没有简短的答案。每个科目都可以钻研几天，几周或几个月来理解和掌握。我将尝试将隐喻用于您问题中的所有相关主题。
问：什么是巴别塔，我为什么需要它？
JavaScript在过去几年中不断发展。很多！。今天的JavaScript有很多新单词和句子结构，旧浏览器在没有翻译器的情况下无法理解。巴贝尔就是翻译。今天的现代浏览器（Chrome，Firefox，Edge，Safari）可以原生地理解大多数现代版本的JavaScript，或者酷孩子称之为ECMAScript2015，ES2015或ES6等。
即便如此，ES（JavaScript）也在不断发展。新功能正在分阶段添加，babel正在跟上这些阶段功能，将所有这些新功能翻译成普通的旧JavaScript，所有浏览器，无论年龄大小，都可以理解。你可以和babel一起玩，看看它在这里做了什么：https://babeljs.io/repl/
问：什么是React？
React只是众多现代前端框架中的一种，可帮助您以有效的方式显示数据。
如果宜家为开发人员制作乐高，它将被称为React。 React让您创建LEGO块（称为组件）并将它们组合在一起以创建应用程序。 React组件可以纯粹是表示性的（或者“哑”），这意味着它们只会返回一些HTML，或者它们可以是“聪明的”。智能组件可以具有称为状态的东西。
如果我们回到LEGO类比，状态将成为LEGO Technics集中的引擎。如果一个组件是一辆普通的旧乐高汽车，它需要一些外部帮助才能让它向前发展。你用手推车，它向前移动。使用智能组件或LEGO技术引擎，您的LEGO Technics汽车可以在发动机启动时将其状态从静止状态改为自行移动，从内部推动汽车向前推进。因此，无论何时状态发生变化，您的汽车 REACTS 都会发生变化。组件也是如此。 React将监视组件状态的变化，并且只要发生更改（通常由用户事件触发），组件就会更新。 React组件可以用普通的旧javascript编写，但是鼓励使用ES6，这使得你作为React开发人员的生活变得更加轻松。因此，您需要像Babel这样的翻译器，以便在浏览器中理解您的React应用程序。
问：Redux？
好的，我会在此停止告诉您，此时您不需要Redux来创建React应用程序。 Redux是一个可以与任何框架结合使用的库，也可以与vanilla JavaScript结合使用。 Redux所做的是让您能够在Redux调用商店的内容中抽象出应用程序模型或数据。商店可以是任何东西，数组，对象，任何东西。 Redux的工作是随时更新该商店并采取行动。
让我们想象一下Redux是一个活着的人叫约翰。约翰被给了一个空杯子（商店）。每当约翰被告知倒水时，约翰都会抓住杯子并倒入一些水。倒水＆＃39;倒水＆＃39;命令是我们的行动。约翰可以听取其他行动，例如“空杯子”。每个动作都经过一个处理单元 - 约翰的大脑（动作的减速器）。如果约翰没脑子，他将无法执行任何行动。当约翰收到一个空杯子时。命令他扔掉了水。你可以教约翰你需要的许多动作，你可以给约翰一个不同的商店来执行这些动作。这里最重要的一点是约翰有一个商店（杯子），一个减速器（大脑），并给予一些行动来执行。因此，动作通过减速器并根据减速器决定的内容，更新商店。所以在JavaScript术语中，reducer是一个函数，它接受一个动作并返回一个商店。该操作是一个简单的javascript对象，它具有类型属性（＆＃39; pour＆＃39;），它还可以有一些有效负载（＆＃39; water＆＃39;）。所以基本上你可以告诉约翰，倒水＆＃39;在杯子里，倒水是动作类型，有效载荷是水。
问：React-Redux？
将react-redux视为一种苏格兰威士忌磁带，可让您将react和redux融合在一起，这样每个组件都可以向reducer发送一个动作，每个组件都可以访问该商店。
问：Webpack？
所以在上面的例子中我们已经有了几个库。 Babel，React，Redux，React-Redux，谁知道你的项目中还有多少其他库，资产，文件以及你不需要的东西。您可能习惯使用脚本，图像，链接标记在index.html中导入每个文件。嗯，过于简化，webpack为你做到了！每当应用程序中的某个模块依赖于另一个模块，资产或其他任何模块时，webpack将递归查找所有依赖项并将它们放在一个文件中。您只需在index.html中导入该文件，就会忘记它。 Webpack可以为您做许多其他事情，但这是它的要点，因此它被称为模块捆绑器。
哇，那是关于它的。如果你走得这么远，你就是一个真正的英雄，我很佩服你的耐心。
P.S。
这篇非常棒（又有趣）的文章可以帮助您了解所有这些库和框架： https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
答案 1 :(得分：0)
正如您所提到的，您已经使用过HTML，CSS，JQuery和JAVA。如果您了解Reactjs和Redux的需求，这将并不困难。如果您使用普通的javascript或jquery。随着应用程序大小的增加，您将很难维护代码。借助react js代码，将易于在客户端进行维护。
示例：
反应 假设您正在创建一个电子商务应用程序，其中包括产品，选定的产品描述，购物车，产品的库存状态。如果您的应用程序是单页。页面不会刷新。您可以使用react来实现此电子商务应用程序。您可以创建诸如ProductDetailComponent，ProductDescriptionComponent，ShoppingCartComponent，StockAvailabilityComponent之类的组件。您将把所有组件注入到主组件中。这样，您的代码将在客户端变得更加模块化。假设ShoppingCartComponent需要PriceComponent，BasketComponent。您可以在ShoppingCartComponent中使用这些组件。这样，您就可以将组件包含在其他组件中。如果需要在其他页面中使用ShoppingCartComponent。您只需要在该页面中导入该组件即可。这样，您可以重复使用现有组件。
所有组件都将以这种方式维护自己的数据，这些组件不会紧密耦合，并且可以在我们的应用程序中的多个位置使用
Redux Redux与React没有关系。您也可以将redux与angular一起使用。使用redux的好处是您希望在组件之间共享一些上下文数据，例如可以使用redux的用户信息，以便在组件之间可以使用用户信息。无需进行额外的servder调用即可获取该数据。因此，redux提供了客户端缓存。 使用redux作为存储的另一个好处是我们可以维护数据的单个副本。如果任何组件更改了数据，则所有组件都会收到有关数据已更改的通知。在我们的购物车示例中，用户选择的产品可以保留在redux中，所有组件都可以使用。
父子组件之间的数据共享 您可以在道具的帮助下将数据从父组件传递到子组件，例如，在ShoppingKartComponent的情况下，您需要将某些数据传递到Price组件，然后才能使用道具。您还可以将功能作为道具传递给子组件，子组件可以调用该子组件以用更新的数据通知父组件。