react-项目结构

时间：2025-01-20 12:27:13

react环境搭建

1.安装安装nodejs( 问度娘 )。

2.安装npm或者yarn或cnpm( 问度娘 )。

3.安装react脚手架create-react-app：

npm install -g create-react-app
或  cnpm install -g create-react-app
或  yarn add -g create-react-app

react创建项目

create-react-app  myReact   
cd myReact   
npm start  或 yarn start

react項目结构

初始项目结构如下：
 
┌── public               // 公共资源文件
│   ├──       // 是浏览器tab上图标，也是这个项目的一个标志，也可以说是代表一个公司的标志。可以替换。
│   ├──        // 主文件
│   └──     // 编译配置文件
│
├── node_modules         // 项目依赖包文件夹
├── src                  // 我们的项目的源码编写文件（里面的文件可根据喜好，随意更改）
│   ├──           // 样式文件（删除）
│   ├──            // 入口组件，其他组件会被插入此组件中，此组件通过再插入  文件里，形成单页面应用；
│   ├──       // 测试文件（删除）
│   ├──         // 样式文件（删除）
│   ├──          // 存放的是这个项目的核心内容，也就是我们的主要工作区域。其中，文件是和进行关联的文件的唯一接口，类似vue里面的。
│   ├──  // 
├──     // npm5 新增文件，优化性能
├──          // 项目依赖包配置文件（node配置文件）
└──             // 项目说明文档

react项目准备

下载相关插件

npm insatll classnames --save    // 样式类名插件

react完整项目结构

┌── public               // 公共资源文件
│   ├──       // 是浏览器tab上图标，也是这个项目的一个标志，也可以说是代表一个公司的标志。可以替换。
│   ├──        // 主文件
│   └──     // 编译配置文件
│
├── node_modules         // 项目依赖包文件夹
├── src                  // 我们的项目的源码编写文件（里面的文件可根据喜好，随意更改）
│   ├── component        // 组件文件，存放所有的组件 
│   │       └── PageHome // 组件文件夹（每个组件都有自己的css和js文件或者图片等，所以每个组件都创建一个文件夹，习惯首字母大写） 
│   │           ├──        // 组件文件夹
│   │           └──       // 组件文件夹
│   ├──            // 入口组件，其他组件会被包裹此组件中，此组件通过再插入  文件里，形成单页面应用；
│   ├──          // 存放的是这个项目的核心内容，也就是我们的主要工作区域。其中，文件是和进行关联的文件的唯一接口，类似vue里面的。
│   └──  // 
├──     // npm5 新增文件，优化性能
├──          // 项目依赖包配置文件（node配置文件）
└──             // 项目说明文档

 

相关文章