react课程2-kick off

开始整合比较小的页面

最好不要嵌套函数声明

一、Babel

Babel 是一个广泛使用的 JavaScript 编译器，主要用于将现代 JavaScript 代码（ES6+）转换为与旧浏览器兼容的代码。它能够将新版本的 JavaScript 语法和特性编译为更旧版本，从而确保代码可以在不支持这些新特性的环境中运行。

Babel 的主要功能包括：

1. 语法转换：将现代 JavaScript 语法（如箭头函数、类、模板字符串等）转换为较旧的等效代码。
2. 插件系统：Babel 提供了一个强大的插件系统，用户可以根据需要定制 Babel 的行为，例如添加支持 TypeScript、React JSX 等。
3. Polyfill：通过 @babel/polyfill，可以在旧浏览器中引入新 JavaScript 标准库功能（如 Promise、Map 等）。
4. 代码转换：Babel 还可以用于代码的其他转换，例如重命名变量、删除未使用的代码等。

在 React 项目中，Babel 通常与 Webpack 一起使用，通过配置 Babel Loader 来处理 JavaScript 文件的转换，使得开发者可以使用最新的 JavaScript 特性进行开发，同时确保代码的兼容性。

二、webpack

Webpack 是一个现代 JavaScript 应用的模块打包工具（bundler）。它的主要功能是将各种资源（JavaScript、CSS、图片等）作为模块进行打包，从而生成可以在浏览器中运行的文件。Webpack 的核心思想是把所有的项目资源都视为模块，无论是 JavaScript 代码、样式表还是图片等资源，最终打包成一个或多个输出文件，以便在浏览器中更高效地加载。

以下是 Webpack 的一些核心概念：

1. Entry（入口）：
   • Webpack 从一个或多个入口文件开始构建依赖关系图，找出项目中所有的模块及其依赖关系。
   • 默认入口文件是 ./src/index.js，但可以通过 Webpack 配置文件 (webpack.config.js) 来指定。
2. Output（输出）：
   • 配置输出文件的名称和路径。打包后的文件通常命名为 bundle.js，但也可以自定义。
   • 例如，将输出文件放在 ./dist 目录下。
3. Loaders（加载器）：
   • Loaders 用于转换不同类型的模块，如将 ES6+ 的 JavaScript 转换为兼容的 ES5，或者将 SCSS 文件编译为 CSS。
   • 常用的加载器有 babel-loader（处理 JavaScript）、css-loader（处理 CSS）、file-loader（处理文件资源）等。
4. Plugins（插件）：
   • 插件用于执行复杂的任务，如优化打包文件的大小、生成 HTML 文件、提取 CSS 文件等。
   • 常见的插件有 HtmlWebpackPlugin（生成 HTML 文件）、MiniCssExtractPlugin（提取 CSS 到单独文件）、UglifyJsPlugin（压缩 JavaScript 文件）等。
5. Mode（模式）：
   • Webpack 提供了两种模式：development 和 production。
   • development 模式适用于开发环境，具有更好的调试体验，代码不会被压缩。
   • production 模式适用于生产环境，代码会被优化和压缩，以提高性能。
6. DevServer：
   • Webpack DevServer 是一个开发服务器，它可以实时重新加载页面，提供热模块替换（Hot Module Replacement，HMR）功能，使开发过程更加高效。

在实际应用中，Webpack 通常与 Babel、Sass、PostCSS 等工具结合使用，以构建现代 Web 应用程序。通过配置 Webpack，你可以在开发过程中享受模块化开发的便利，同时确保最终生成的文件在性能和兼容性上达到最佳状态。

三、React的分离特性

React 框架的确与传统的分离式（HTML、CSS、JavaScript 分离）开发方式有所不同。在 React 中，开发者通常会将逻辑、结构和样式组合在一个组件内，使用 JavaScript 来创建用户界面。这种方法称为组件化开发，其核心理念是将 UI 拆分为独立、可复用的组件。

尽管 React 不再像传统方式那样严格分离 HTML、CSS、JS，但它依然在不同层次上体现了分离性：

1. 组件分离

• React 强调将页面分解成多个独立的组件，每个组件只负责自己的功能和状态管理。这种分离方式使得代码更加模块化和可维护。
• 每个组件可以包含自己的结构（HTML）、样式（CSS）、逻辑（JS），并且可以独立开发、测试和复用。

2. JSX 的语义分离

• 在 React 中，JSX 允许开发者在 JavaScript 中编写类似 HTML 的语法。尽管看似混合了 HTML 和 JavaScript，但其实 JSX 只是 React 的语法糖，最终会被编译成纯 JavaScript。
• 通过 JSX，结构化的 UI 代码嵌入在 JavaScript 中，但仍然保持了逻辑和展示之间的清晰分离。代码语义化也得到了增强，因为 JSX 语法比传统的字符串拼接方式更直观。

3. CSS-in-JS

• React 生态中有许多样式解决方案，比如 styled-components、emotion，它们允许在 JavaScript 文件中编写样式。这种方式使样式与组件逻辑紧密绑定，避免了传统全局 CSS 带来的样式冲突问题。
• CSS-in-JS 提供了样式的局部作用域（scoped styling），从而实现了样式的隔离和组件化管理。

4. Context 和 Hooks 的逻辑分离

• React 提供了 Context 和 Hooks，使得状态管理和业务逻辑可以与 UI 组件分离。例如，使用 useContext 和 useReducer 等 Hook，可以将全局状态逻辑与具体组件解耦，从而提高代码的可读性和复用性。
• 通过自定义 Hooks，开发者可以将可复用的逻辑抽取出来，并在多个组件中共享，而不需要重复代码。

5. CSS Modules

• CSS Modules 是 React 中另一种常用的样式解决方案，它允许开发者将样式分离成各个模块，并自动为每个模块生成唯一的类名，以避免样式冲突。
• 使用 CSS Modules 时，样式文件仍然可以保持与组件分离，同时确保了样式的作用范围只限于当前组件。

6. 文件结构的分离

• 虽然 React 鼓励在组件内部进行组合，但开发者依然可以根据项目需求将组件、样式和逻辑代码分布在不同的文件中。
• 例如，可以有一个 components 文件夹来存放组件，一个 styles 文件夹来存放样式文件，一个 services 文件夹来处理业务逻辑和 API 请求。

React 中的“分离性”更多地体现在逻辑层次的分离，而非文件层次的分离。通过组件化开发、JSX、CSS-in-JS、Context、Hooks 等机制，React 保持了代码的模块化和可维护性，即使结构、样式和逻辑被合并在一起。这种方式更适合现代前端开发的需求，提供了更好的代码组织方式和开发体验。

四、重用组件的代码实例

function Menu() {
  return (
    <main className="menu">
      <h2>Our menu</h2>
      <div className="pizza">
        <Pizza
          name="Pizza Spinaci"
          ingredients="Tomato, mozarella, spinach, and ricotta cheese"
          photoName="pizzas\spinaci.jpg"
          price={10}
        />
        <Pizza
          name="Pizza Funghi"
          ingredients="Tomato, mozarella, mushrooms, and onion"
          price={12}
          photoName="pizzas/funghi.jpg"
        />
      </div>
    </main>
  );
}

function Pizza(props) {
  return (
    <div>
      <img src={props.photoName} alt={props.name} />
      <h3>{props.name}</h3>
      <p>{props.ingredients}</p>
      <span>{props.price}</span>
    </div>
  );
}