React学习笔记（webpack）

官方文档：Guides | webpack

使用 js 代码生成模块

import _ from 'lodash';

function component() {
    const element = document.createElement('div');
    const btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    btn.innerHTML = 'CLick me and check the console!';
    btn.onclick = console.log("I get called from print.js!");

    element.appendChild(btn);

    return element;
}

document.body.appendChild(component());

需要 js 代码动态生成模块的场景：

1. 用户交互和事件驱动

当用户进行某些操作（如点击按钮、选择菜单项、提交表单等）时，需要动态更新页面内容。例如：

• 添加/删除项目：如添加新的待办事项、删除购物车中的商品等。
• 表单的动态验证：根据用户的输入实时显示验证信息。
• 模式对话框和弹出框：当用户点击按钮时弹出对话框或工具提示。

2. 数据驱动的内容

现代网页应用通常从服务器获取数据，并根据数据动态生成内容。此类情况包括：

• 从API获取数据：例如，新闻网站根据API返回的最新新闻数据动态生成新闻列表。
• 搜索结果：根据用户的搜索查询从服务器获取结果并显示。
• 分页：根据用户的分页操作动态加载新的内容页面。

3. 组件的复用和配置

有时页面上的某些模块或组件需要根据不同的配置或状态进行渲染。例如：

• 复用的组件：同一个组件在不同地方使用，但显示内容不同。例如，产品展示组件可以显示不同的产品信息。
• 主题和布局：根据用户选择的主题或布局选项动态生成相应的样式或布局。

4. 多步骤表单或向导

当用户需要完成一个多步骤的过程时，可以使用动态生成的内容来逐步引导用户。例如：

• 注册向导：用户填写多个步骤的注册信息，每一步显示不同的表单字段。
• 结账流程：电子商务网站上的结账过程，根据步骤动态显示不同的信息（如地址、支付方式、确认订单等）。

5. 实时数据和更新

某些应用需要实时更新页面内容，例如：

• 实时聊天：聊天应用需要在收到新消息时动态更新聊天窗口。
• 股票行情：金融网站可能会根据实时数据更新股票价格和图表。
• 通知和提醒：根据后台推送的通知或提醒，动态更新页面上的提醒信息。

6. 自定义内容和布局

用户生成的内容或用户自定义的页面布局也需要动态生成。例如：

• 内容管理系统：管理员在后台更新内容后，前端页面会根据最新内容动态显示。
• 拖放布局：允许用户通过拖放界面元素来自定义页面布局，保存后动态渲染新布局。

7. 响应式设计

根据设备类型、屏幕大小或用户的交互动态调整内容布局。例如：

• 移动端和桌面端布局：根据设备自动调整页面的模块排列和显示方式。
• 动态加载更多内容：在移动设备上，为了优化性能和流量，可以使用懒加载技术，随着用户滚动动态加载更多内容。

8. 动画和过渡

为了提供更好的用户体验，页面上可能会有动画或过渡效果，这些通常需要动态操作DOM来实现。例如：

• 元素的淡入淡出：在某些交互后，让元素逐渐出现或消失。
• 滑动效果：如图片轮播组件的滑动切换效果。

9. 多语言支持

根据用户选择的语言动态更新页面上的文本内容。

结合 React 和 Webpack

App.js中的内容未生效。

报错：ReferenceError: React is not defined

解决：如果正在使用Babel和React 17，需要在Babel配置中添加"runtime": "automatic"。
​在.babelrc配置文件中是:

{
    "presets": [
        "@babel/preset-env",
       ["@babel/preset-react", {"runtime": "automatic"}]
    ]
}  

无背景图。

为了让页面自动刷新，在webpack.config.js 文件中添加：

devServer: {
    static: './dist',
  }

dist文件夹中没有生成的 bundle.js 文件

原因：package.json相关内容如下：

"scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },

使用命令 npm start 会在 development 模式下，此模式生成文件在本地，不会出现在 dist 文件夹中。

解决：使用命令 npm run build 就有了。此时处于 production 模式下。

• production 模式：适用于应用程序的生产构建，侧重于优化代码体积和性能。启用多种优化和压缩技术，生成高效的输出文件。
• development 模式：适用于开发过程中的构建，侧重于提高开发效率和调试体验。保留完整的代码信息，生成未压缩的输出文件，并启用源映射。