【React】React全家桶（四）React脚手架

最新推荐文章于 2025-11-17 09:42:13 发布

原创

最新推荐文章于 2025-11-17 09:42:13 发布 · 971 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文介绍了如何利用create-react-app脚手架搭建React项目，包括项目创建、启动、目录结构解析以及组件化编码流程。通过实例展示了HelloReact的实现，强调了组件化开发的重要性，并提到了VSCode中生成代码模板的快捷方式。

文章目录

1 使用create-react-app创建react应用

1.1 React脚手架

React 脚手架其实是一个工具帮我们快速生成项目的工程化结构
- 包含了所有需要的配置（语法检查、jsx编译、devServer…）
- 下载好了所有相关的依赖
- 可以直接运行一个简单效果
react提供了一个用于创建react项目的脚手架库: create-react-app
使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

1.2.创建项目并启动

第一步，全局安装：npm install -g create-react-app
第二步，切换到想创项目的目录，使用命令：create-react-app hello-react
第三步，进入项目文件夹：cd hello-react
第四步，启动项目：npm start

在这里插入图片描述

1.3 react脚手架项目结构

hello-react
├─ .gitignore               // 自动创建本地仓库
├─ package.json             // 相关配置文件
├─ public                   // 公共资源
│  ├─ favicon.ico           // 浏览器顶部的icon图标
│  ├─ index.html            // 应用的 index.html入口
│  ├─ logo192.png           // 在 manifest 中使用的logo图
│  ├─ logo512.png           // 同上
│  ├─ manifest.json         // 应用加壳的配置文件
│  └─ robots.txt            // 爬虫给协议文件
├─ src                      // 源码文件夹
│  ├─ App.css               // App组件的样式
│  ├─ App.js                // App组件
│  ├─ App.test.js           // 用于给APP做测试
│  ├─ index.css             // 样式
│  ├─ index.js              // 入口文件
│  ├─ logo.svg              // logo图
│  ├─ reportWebVitals.js    // 页面性能分析文件
│  └─ setupTests.js         // 组件单元测试文件
└─ yarn.lock

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <!-- %PUBLIC_URL%代表public文件夹的路径 -->
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <!-- 开启理想视口，用于做移动端网页的适配 -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器) -->
  <meta name="theme-color" content="red" />
  <meta name="description" content=