React-从0到1搭建一个React项目（一）

最新推荐文章于 2025-05-20 14:32:22 发布

Huang-Lin

最新推荐文章于 2025-05-20 14:32:22 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端知识整理文章标签： react 初学项目搭建

本文链接：https://blog.youkuaiyun.com/HuangLin_Developer/article/details/89473233

本文介绍了如何从零开始搭建一个React项目，包括项目架构介绍、使用create-react-app初始化、创建项目目录结构、安装第三方库如react-router-dom、redux、axios等，并提到了在项目演进中如何应对多页面需求。此外，还强调了环境准备，如安装Sublime Text和Node.js，并推荐了一些有用的开发工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

利用工作之余的时间学习了react，今年一回来，部门要在公众号上面开发一个积分商城，于是准备让我用react开发。目前已迭代了3个版本，代码量7万行左右。在这里记录分享一下项目的架构。
由于整篇文章比较长，为方便阅读，拆成了几篇文章。本篇是第一篇，主要介绍项目的分层架构和准备工作。
相关文章： React-从0到1搭建一个React项目（二）
Demo地址：
github地址：https://github.com/miguoer/react-sample

架构介绍

项目整体架构分层如下图：
在这里插入图片描述
从上到下分为组件层、容器层、动作层和数据层。组件层全部都是无状态组件，包括每个页面抽象出的组件和公共的无状态组件。容器层负责业务逻辑的处理，网络请求以及和数据层的交互。动作层定义了容器层和数据层交互的方法。数据层利用redux完成组件的状态管理，包括保存、更新。