ReactJS ReduxJS 是怎么回事？
ReactJS ReduxJS what is going on?
我是一名老 Web 开发人员，我习惯 html、css、js (jquery) 并使用 Java 等服务器端语言, 冷聚变或 PHP.
现在我找不到很好的解释或如何开始。它只是没有意义，过去 3 天我一直在看教程和阅读书籍。这不是抱怨，而是求情。有人请向我解释一下这个架构是如何设置的。在过去，你会有一个 html 文件并注入一些占位符，这些占位符将由你的服务器端语言填充。
现在的结构是什么？我已经创建了一个 Ubuntu 服务器，我已经安装了 NodeJS 及其关联，我创建了一个反向代理并安装了 nginx 作为我的服务器。 PM2 是我的 NodeJS 应用程序进程管理器。到目前为止我在正确的轨道上吗？
如果有，reactjs、reduxjs、babeljs 在哪里，什么是 npm 的 webpack？我的下一步是什么，我很困惑，我不知道所有这些东西是什么。特别是 reactjs、redsuxjs 和 bablejs 与其他任何东西之间的区别是什么，这些都是前端库还是？什么是 npm webpack。然后是redux和react-redux，什么？感谢您的澄清。
我的目标
我想学习如何制作单页应用程序并尽可能多地利用 bootstrap。我认为反应将是可行的方法，但我真的很感激一些澄清，而不仅仅是从他们的网站描述中复制粘贴。谢谢guys/gals.
首先，您的问题没有简短的答案。每个主题都可以深入研究数天、数周或数月，以理解和掌握。我将尝试对您问题中的所有相关主题使用隐喻。
Q: What is Babel and why do I need it?
JavaScript 在过去几年中不断发展。很多！。 JavaScript 今天有很多新词和新句结构，如果没有翻译器，旧浏览器根本无法理解。 Babel 就是那个翻译器。今天的现代浏览器（Chrome、Firefox、Edge、Safari）可以原生理解大多数 JavaScript 的现代版本，或者像酷孩子一样称之为 ECMAScript2015、ES2015 或 ES6 等
即便如此，ES(JavaScript)也在不断发展。新功能正在分阶段添加，babel 正在跟上这些阶段功能，将所有这些新功能从字面上翻译成所有浏览器，无论年龄大小，都能理解的普通旧 JavaScript。你可以在这里玩玩 babel 看看它做了什么：https://babeljs.io/repl/
Q: What is React?
React 只是众多现代 front-end 框架之一，可帮助您以高效的方式显示数据。
如果宜家为开发者生产乐高积木，它会被称为 React。 React 让您创建乐高积木（称为组件）并将它们放在一起以创建应用程序。 React 组件可以是纯粹的展示性的（或 'dumb'），这意味着它们将只是 return 一些 HTML，或者它们可以是 'smart'。智能组件可以有一个叫做 state 的东西。
如果我们回到乐高积木类比，状态 将是乐高技术组中的引擎。如果一个组件是一辆普通的老式乐高汽车，它就需要一些外部帮助来推动它前进。你用手推动汽车，它向前移动。借助智能组件或 LEGO Technics 引擎，您的 LEGO Technics 汽车可以在发动机启动时将其 状态 从静止状态更改为自行移动，本质上从内部推动汽车前进。因此，只要状态发生变化，您的汽车就会 REACTS 并发生变化。组件也是如此。 React 会监视组件状态的变化，只要有变化（通常由用户事件触发），组件就会更新。 React 组件可以用普通的旧 javascript 编写，但鼓励使用 ES6，这会让你作为 React 开发人员的生活变得更加轻松。因此，您将需要一个翻译器，例如 Babel，让您的 React 应用程序在浏览器中易于理解。
Q: Redux?
好的，我会在这里打断你，告诉你此时你不需要 Redux 来创建 React 应用程序。 Redux 是一个可以与任何框架结合使用或与 vanilla JavaScript 单独使用的库。 Redux 所做的是让您能够将您的应用程序 模型 或数据抽象到 Redux 称为商店的东西中。 store 可以是任何东西，一个数组，一个 object，几乎任何东西。 Redux 的工作是在收到和操作时随时更新该存储。
让我们假设 Redux 是一个活生生的人，名叫约翰。给约翰一个空杯子（商店）。每次告诉 John 'pour water'，John 都会拿起杯子往里面倒一些水。 'pour water' 命令就是我们的动作。 John 可以监听其他操作，例如 'empty cup'。每个动作都经过一个处理单元——约翰的大脑（动作的减速器）。如果约翰没有脑子，他将无法执行任何动作。当约翰收到 'empty cup' 命令时，他把水倒掉了。您可以教 John 许多您想要的操作，您可以给 John 一个不同的商店来执行这些操作。这里重要的一点是，约翰有一个商店（杯子），一个减速器（大脑），并被赋予了一些要执行的动作。因此，该操作通过 reducer 并根据 reducer 的决定更新商店。所以在 JavaScript 术语中，reducer 是一个函数，它执行一个操作并且 return 是一个存储。动作是一个普通的 javascript object，它有一个类型 属性 ('pour')，它也可以有一些负载 ('water')。所以基本上你可以告诉 John，'pour water' 在杯子里，pour 是动作类型，payload 是水。
Q: React-Redux?
将 react-redux 视为 scotch-tape，让您将 react 和 redux 融合在一起，这样每个组件都可以向 reducer 发送一个动作，并且每个组件都可以访问 store。
Q: Webpack?
所以对于上面的例子，我们已经有了几个库。 Babel、React、Redux、React-Redux，谁知道还有多少其他库、资产、文件以及您的项目中不需要的东西。可能您习惯于使用脚本、图像、link 标签将它们中的每一个导入到您的 index.html 中。好吧，过于简化了，webpack 为你做到了！每当你的应用程序中的某个模块依赖于另一个模块、资产或其他任何东西时，webpack 将递归地查找所有依赖项并将它们放在一个文件中。您只需在 index.html 中导入那个文件，然后您就可以忘记它了。 Webpack 可以为您做很多其他事情，但这就是它的要点，因此它被称为模块捆绑器。
哇，就是这样。如果你能走到这一步，你就是一个真正的英雄，我钦佩你的耐心。
P.S.
这是一篇非常棒（且有趣）的文章，可帮助您了解所有这些库和框架的最新动态：
https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
正如您提到的，您已经完成了 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 的用户信息，这样用户信息就可以跨组件使用。无需进行额外的服务器调用来获取该数据。所以 redux 提供客户端缓存。
使用 redux 作为存储的另一个好处是我们可以维护单个数据副本。如果任何组件更改数据，所有组件都将收到数据已更改的通知。在我们的购物车示例中，用户选择的产品可以在 redux 中维护，供所有组件使用。
父子组件之间的数据共享
您可以借助道具将数据从父组件传递到子组件，就像在 ShoppingKartComponent 的情况下，您需要将一些数据传递给价格组件，您可以使用道具。您还可以将函数作为 props 传递给子组件，子组件可以调用该子组件以将更新的数据通知父组件。
我是一名老 Web 开发人员，我习惯 html、css、js (jquery) 并使用 Java 等服务器端语言, 冷聚变或 PHP.
现在我找不到很好的解释或如何开始。它只是没有意义，过去 3 天我一直在看教程和阅读书籍。这不是抱怨，而是求情。有人请向我解释一下这个架构是如何设置的。在过去，你会有一个 html 文件并注入一些占位符，这些占位符将由你的服务器端语言填充。
现在的结构是什么？我已经创建了一个 Ubuntu 服务器，我已经安装了 NodeJS 及其关联，我创建了一个反向代理并安装了 nginx 作为我的服务器。 PM2 是我的 NodeJS 应用程序进程管理器。到目前为止我在正确的轨道上吗？
如果有，reactjs、reduxjs、babeljs 在哪里，什么是 npm 的 webpack？我的下一步是什么，我很困惑，我不知道所有这些东西是什么。特别是 reactjs、redsuxjs 和 bablejs 与其他任何东西之间的区别是什么，这些都是前端库还是？什么是 npm webpack。然后是redux和react-redux，什么？感谢您的澄清。
我的目标
我想学习如何制作单页应用程序并尽可能多地利用 bootstrap。我认为反应将是可行的方法，但我真的很感激一些澄清，而不仅仅是从他们的网站描述中复制粘贴。谢谢guys/gals.
首先，您的问题没有简短的答案。每个主题都可以深入研究数天、数周或数月，以理解和掌握。我将尝试对您问题中的所有相关主题使用隐喻。
Q: What is Babel and why do I need it?
JavaScript 在过去几年中不断发展。很多！。 JavaScript 今天有很多新词和新句结构，如果没有翻译器，旧浏览器根本无法理解。 Babel 就是那个翻译器。今天的现代浏览器（Chrome、Firefox、Edge、Safari）可以原生理解大多数 JavaScript 的现代版本，或者像酷孩子一样称之为 ECMAScript2015、ES2015 或 ES6 等
即便如此，ES(JavaScript)也在不断发展。新功能正在分阶段添加，babel 正在跟上这些阶段功能，将所有这些新功能从字面上翻译成所有浏览器，无论年龄大小，都能理解的普通旧 JavaScript。你可以在这里玩玩 babel 看看它做了什么：https://babeljs.io/repl/
Q: What is React?
React 只是众多现代 front-end 框架之一，可帮助您以高效的方式显示数据。
如果宜家为开发者生产乐高积木，它会被称为 React。 React 让您创建乐高积木（称为组件）并将它们放在一起以创建应用程序。 React 组件可以是纯粹的展示性的（或 'dumb'），这意味着它们将只是 return 一些 HTML，或者它们可以是 'smart'。智能组件可以有一个叫做 state 的东西。
如果我们回到乐高积木类比，状态 将是乐高技术组中的引擎。如果一个组件是一辆普通的老式乐高汽车，它就需要一些外部帮助来推动它前进。你用手推动汽车，它向前移动。借助智能组件或 LEGO Technics 引擎，您的 LEGO Technics 汽车可以在发动机启动时将其 状态 从静止状态更改为自行移动，本质上从内部推动汽车前进。因此，只要状态发生变化，您的汽车就会 REACTS 并发生变化。组件也是如此。 React 会监视组件状态的变化，只要有变化（通常由用户事件触发），组件就会更新。 React 组件可以用普通的旧 javascript 编写，但鼓励使用 ES6，这会让你作为 React 开发人员的生活变得更加轻松。因此，您将需要一个翻译器，例如 Babel，让您的 React 应用程序在浏览器中易于理解。
Q: Redux?
好的，我会在这里打断你，告诉你此时你不需要 Redux 来创建 React 应用程序。 Redux 是一个可以与任何框架结合使用或与 vanilla JavaScript 单独使用的库。 Redux 所做的是让您能够将您的应用程序 模型 或数据抽象到 Redux 称为商店的东西中。 store 可以是任何东西，一个数组，一个 object，几乎任何东西。 Redux 的工作是在收到和操作时随时更新该存储。
让我们假设 Redux 是一个活生生的人，名叫约翰。给约翰一个空杯子（商店）。每次告诉 John 'pour water'，John 都会拿起杯子往里面倒一些水。 'pour water' 命令就是我们的动作。 John 可以监听其他操作，例如 'empty cup'。每个动作都经过一个处理单元——约翰的大脑（动作的减速器）。如果约翰没有脑子，他将无法执行任何动作。当约翰收到 'empty cup' 命令时，他把水倒掉了。您可以教 John 许多您想要的操作，您可以给 John 一个不同的商店来执行这些操作。这里重要的一点是，约翰有一个商店（杯子），一个减速器（大脑），并被赋予了一些要执行的动作。因此，该操作通过 reducer 并根据 reducer 的决定更新商店。所以在 JavaScript 术语中，reducer 是一个函数，它执行一个操作并且 return 是一个存储。动作是一个普通的 javascript object，它有一个类型 属性 ('pour')，它也可以有一些负载 ('water')。所以基本上你可以告诉 John，'pour water' 在杯子里，pour 是动作类型，payload 是水。
Q: React-Redux?
将 react-redux 视为 scotch-tape，让您将 react 和 redux 融合在一起，这样每个组件都可以向 reducer 发送一个动作，并且每个组件都可以访问 store。
Q: Webpack?
所以对于上面的例子，我们已经有了几个库。 Babel、React、Redux、React-Redux，谁知道还有多少其他库、资产、文件以及您的项目中不需要的东西。可能您习惯于使用脚本、图像、link 标签将它们中的每一个导入到您的 index.html 中。好吧，过于简化了，webpack 为你做到了！每当你的应用程序中的某个模块依赖于另一个模块、资产或其他任何东西时，webpack 将递归地查找所有依赖项并将它们放在一个文件中。您只需在 index.html 中导入那个文件，然后您就可以忘记它了。 Webpack 可以为您做很多其他事情，但这就是它的要点，因此它被称为模块捆绑器。
哇，就是这样。如果你能走到这一步，你就是一个真正的英雄，我钦佩你的耐心。
P.S.
这是一篇非常棒（且有趣）的文章，可帮助您了解所有这些库和框架的最新动态： https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
正如您提到的，您已经完成了 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 的用户信息，这样用户信息就可以跨组件使用。无需进行额外的服务器调用来获取该数据。所以 redux 提供客户端缓存。 使用 redux 作为存储的另一个好处是我们可以维护单个数据副本。如果任何组件更改数据，所有组件都将收到数据已更改的通知。在我们的购物车示例中，用户选择的产品可以在 redux 中维护，供所有组件使用。
父子组件之间的数据共享 您可以借助道具将数据从父组件传递到子组件，就像在 ShoppingKartComponent 的情况下，您需要将一些数据传递给价格组件，您可以使用道具。您还可以将函数作为 props 传递给子组件，子组件可以调用该子组件以将更新的数据通知父组件。