开放式网络研讨会“在Webpack + React + Express上创建应用程序”

大家好！

2018年7月，我们JavaScript开发人员课程的老师Yuri Dvorzhetsky举行了一次公开网络研讨会，主题为“在Webpack + React + Express上创建应用程序”，但是，作为第二课程的一部分，他担任了JavaScript专用模块之一的老师。 在本资料中，您可以熟悉视频和过去的大师班的简短重述。

公开课的工作是根据以下计划进行的：

1. 介绍Node JS和Express JS。
2. Webpack简介。
3. 介绍React。

所以走吧！

节点JS

随着新的ES6标准的到来，JavaScript的流行性显着提高，正如关于GitHub在2017年以JS排在首位的拉取请求数量的统计数据所证明的那样。

JS驱动程序之一是Node JS，它是一个基于V8引擎（将JavaScript转换为机器代码）并将JavaScript从一种高度专业化的语言转换为一种通用语言的软件平台。 许多人将Node JS称为“服务器端” JavaScript，但是在这里“服务器”而不是“服务器”的定义更为合适。 例如，Node JS有一个非常丰富的环境，包括它自己的名为npm的程序包管理器，您可以在机器上安全地运行它（该存储库可在npmjs.com上找到）。 这不是唯一的包管理器，还有其他。 配置文件为package.json，很容易猜出它是以JSON格式配置的。

作为Node JS简介的一部分，要求用户完成以下步骤：

• 从官方站点nodejs.org/en/下载NodeJS；
• 在计算机上安装并检查版本；
• 确保节点–v在控制台中运行。

下一步是创建第一个Node JS项目。 您可以通过以下两种方式之一执行此操作：

• npm init命令（继续按回车键以确认所有内容）；
• 通过从GitHub上的链接下载存储库并引入git checkout 0命令。

下一步是了解Express JS。

快递js

Express JS是用于Node JS环境的流行Web服务器。 就Python而言，它就像Django，实际上只有REST方法。 Express JS非常适合用于创建接受和发送JSON的REST服务，但是总的来说，它是苦行僧，因此您所需要的一切都被接受，就像他们所说的那样。 顺便说一句，其他Web服务器也是基于它制作的。 在这种情况下，您需要了解Express就像一个中间链接（中间件），它仍然需要配置并填充逻辑。
作为网络研讨会的一部分，使用npm install express命令安装了Express JS，并添加了–save开关。 您也可以使用npm install拼写在git（git checkout 1）中签出。 结果，创建了node_modules /文件夹，并且package.json的内容发生了更改（出现了相应的依赖项）。

准备工作结束后，就该编写服务器本身了：

1. 在项目根目录中创建/server.js文件。
2. 在其中放置一些用JavaScript编写的代码。 该脚本的目的是：

-从“神秘的” node_modules中获得表达/；
-向URL /;添加处理程序
-启动Node JS（使用node server.js或npm start命令）。

您也可以只签出2号标签（git checkout 2）。

JS，ES6和转译

如前所述，ES6是当前的JS标准。 它是所有浏览器都不完全支持的一组功能（仅支持部分功能）。 结果，出现了一个问题：如果我们想在现代ES6上书写，而浏览器仅支持ES5.1，该怎么办？ 在这里，转嫁可以救出来。 他的想法如下：

1. 我们有用ES6编写的代码；
2. 我们编译它（ES6转换为ES5.1）；
3. 生成的JS-ku可以放在浏览器页面上。

结果，不仅可以使用ES6，而且可以使用不同的方言和扩展名，从而提高了JS的功能，例如：

• “键入的” JavaScript TypeScript（TS）；
• JSX-JS中的XHTML（反应框架）；
• 流-静态类型检查器。

Babel是最受欢迎和功能最强大的转码之一。 正是他被用来解决公开课的问题。

组装好处：

• 您可以将所有JS文件打包在一起。
• 束可以最小化和混淆；
• 您可以同时运行LESS-> CSS等。

Webpack

Webpack是最复杂的收集器之一。 它在概念上很复杂，尤其是在术语方面，但它并不相等，并且最新版本比以前的版本更简单。 但是，您不必担心它，因为使用它进行配置是一项一次性的工作。 毫不夸张地说，Webpack中包含的包子数量可以“吃得过饱”。

例如，向网络研讨会侦听器显示了webpack.config.js，并详细检查了文件的每一行以了解整个术语。

下一步是使用预配置的React和Webpack创建客户端（npx最小反应客户端或懒人的git checkout 3命令）。 之后，您可以转到以这种方式创建的cd客户端/文件夹，然后打开webpack.config.js文件，该文件的片段已在前面显示。

反应

渐渐地，人们开始熟悉React –一个用于开发用户界面的开源JavaScript库。

首先了解React和“软”浸入其环境中的情况，要求学生打开client / src / index.js，如果未发生任何反应，则打开client / src / component /app.js。
React的核心是JSX。 这是用JS编写的JS和XHTML的方言。 尽管可以在没有JSX的情况下使用React，但其所有功能恰恰在JSX中。 至于React本身，这是Hackernoon所说的基于组件方法的最受欢迎的框架之一。 它具有大量的支持包和庞大的基础架构。 应用程序本身是一组包含其标记和行为的组件。

React功能：

• 组件可以互相使用；
• 该JS在浏览器中运行；
• 实际上，浏览器中没有标记，但会在客户端的浏览器执行此代码时显示；
• 组件呈现其注释，所使用的组件呈现其自身；
• 标记不必是静态的，也可以不是静态的；
• 您可以将信息传递给子组件。
• 组件可以有条件地渲染。

熟悉React之后，网络研讨会的实际部分继续进行，其结果是遵循以下步骤：

1. 在客户端文件夹中启动webpack（client / npm run dev）；
2. 根据老师的指示或通过git checkout 4（无法停止Webpack）编写自己的简单组件。

接下来，要求学生使用道具对象并进行打字动态渲染（git checkout 5）。
道具的细微差别：

• 包含组件的属性
• 您不仅可以传输字符串，还可以传输对象。
• 理想情况下，反应组件线上的通信始终基于道具。

在实际培训的最后阶段，后端和Web服务器已连接（git checkout 6）。

结束

感谢您的关注，我们一如既往地等待您的意见和建议。