React 项目实战my-react-hello-world 教程

在“my-react-hello-world”项目中，您将深入学习以下核心技术：

1. React.js 基础

• React 简介：React 是一个用于构建用户界面的 JavaScript 库，特别适用于单页应用（SPA）开发。通过声明式编程风格和组件化结构，使开发更加高效。
• 组件与状态管理：在项目中，您将创建多个组件，学习管理组件的状态（state）和属性（props），并通过 props 在组件间传递数据。

2. CSS 与 React 组件结合

• 样式整合：React 中常见的样式管理方式包括内联样式、CSS Modules 和 CSS 预处理器（如 Sass、Less）。本项目将演示如何使用 CSS Modules，保证组件样式独立，避免样式冲突。
• 样式引用：学会将 CSS 文件导入到组件中，使用类名为特定组件定义样式，构建清晰的样式结构。

3. Webpack 构建工具

• Webpack 基础配置：Webpack 是前端资源模块化的核心工具，用于将 JavaScript、CSS 等资源打包。在项目中，您将配置 Webpack 的入口文件、输出文件、加载器（如 Babel、CSS/SCSS Loader）和插件。
• 加载器（Loaders）：通过 Babel 加载器将现代 JavaScript 语法（如 ES6+）转为浏览器兼容的代码，利用 CSS/SCSS 加载器将样式文件集成至 JavaScript 中。

4. Webpack 插件

• HtmlWebpackPlugin 插件：此插件可生成 HTML 文件并自动引入打包的 JavaScript 文件。
• Webpack 开发服务器：webpack-dev-server 提供热重载功能，帮助快速开发。

5. GitHub Pages 部署

• 项目部署：利用 gh-pages，您可将项目部署到 GitHub Pages，实现线上预览。通过配置 Webpack 输出目录、推送到 gh-pages 分支即可。

通过该项目，您将掌握 JavaScript 基础、组件化开发，以及现代前端项目的构建与部署，打下扎实的前端开发技能基础。