# ReactProjectArchitecture

**Repository Path**: xiaaoke/react-project-architecture

## Basic Information

- **Project Name**: ReactProjectArchitecture
- **Description**: react项目搭建描述
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-02
- **Last Updated**: 2023-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 搭建本地react项目

1. 创建项目

    ```
    npx create-react-app my-app --template typescript        --使用脚手架创建my-app名字的react项目
    ```

2. 安装依赖

    ```
    cd my-app --切换到my-app文件夹下

    yarn add webpack webpack-cli webpack-dev-server
    --webpack：一个用于打包 JavaScript 应用程序的模块打包器。
    --webpack-cli：Webpack 的命令行接口，用于在终端中运行 Webpack 操作。
    --webpack-dev-server：一个用于 Webpack 的开发服务器，能够实时重新加载，并支持模块热替换。
    
    yarn add react react-dom react-router-dom
    --react：用于构建用户界面的 JavaScript 库。
    --react-dom：用于将 React 组件渲染到浏览器中的 JavaScript 库。
    --react-router-dom：用于在 React 应用程序中管理路由的 JavaScript 库，例如实现单页应用。
    
    yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
    --eslint：用于在 JavaScript 代码中实施一致的代码风格和标准的插件和工具。
    --prettier：用于格式化代码的工具。
    --eslint-config-prettier：用于在 ESLint 中禁用与 Prettier 冲突的规则和格式化输出。
    --eslint-plugin-prettier：用于将 Prettier 作为 ESLint 规则运行。
    --@typescript-eslint/parser：用于将 TypeScript 代码转换为抽象语法树（AST），以支持在 ESLint 中使用 TypeScript。
    --@typescript-eslint/eslint-plugin：一个用于在 TypeScript 代码中实施一致的代码风格和标准的插件和工具。
    
    yarn add less less-loader css-loader style-loader css-modules-typescript-loader
    --less：一种 CSS 预处理器，为 CSS 增加了变量、函数、嵌套等特性。
    --less-loader：一个 Webpack 加载器，用于将 Less 文件转换为 CSS。
    --css-loader：一个 Webpack 加载器，用于加载和转换 CSS 文件。
    --style-loader：一个 Webpack 加载器，用于将 CSS 样式当作样式标签插入到 HTML 中。
    --css-modules-typescript-loader：一种 Webpack 加载器，能够使用 CSS 模块并自动生成 TypeScript 类型声明。
    
    yarn add antd    --安装antdui框架
    
    yarn add redux react-redux redux-thunk
    --redux：状态管理库
    --react-redux：将 Redux 和 React 组件连接起来的库
    --redux-thunk：Redux 的中间件，可处理异步操作
    
    yarn add graphql apollo-boost
    --graphql：
    --apollo-boost：集成了必要的 Apollo 客户端核心功能的实用包：一个 Apollo 客户端实例，配置了 InMemoryCache 缓存和 HttpLink 网络链接；封装了使用 Query、Mutation 和 Subscription 向 GraphQL 服务器发起 GraphQL 查询的函数的方法
    --GraphQL 是一种查询语言，用于描述客户端的数据需求和服务端返回的数据格式，旨在提高客户端和服务端的数据交互效率和开发效率
    --Apollo 客户端是基于 GraphQL 的前端框架，提供了一套工具集，帮助你更方便地构建基于 GraphQL 的应用程序。
    
    yarn add husky lint-staged -D
    --husky：一个 Git 钩子管理工具，可以让你方便地在 Git 操作前或后执行一些自定义操作，例如代码规范检查、单元测试、代码格式化等等
    --lint-staged：一个可以在 Git 提交前检查、格式化和修复代码的工具
    --常见的用途是在 husky 中配置 pre-commit 和 pre-push 钩子，并在这些钩子中使用 lint-staged 执行一些代码检查和格式化任务。这样可以保证在代码提交或推送前，代码会经过一番自动化的检查和修复，避免因为格式问题等小错误而导致的问题。
    ```

### 安装说明

在 Yarn 命令后面添加 -D 表示将要安装的包被视为开发依赖项（devDependencies），而不是生产依赖项（dependencies）。开发依赖项是指在开发过程中需要使用的工具、测试框架、构建工具等，而生产依赖项是在运行时需要使用的库和框架。

使用 -D 参数将依赖项添加到 devDependencies，可以避免在生产环境中将不必要的开发依赖项打包到生产代码中。这可以减少代码的体积，并提高应用程序的性能。同时，这也使得在团队合作中使用不同的测试工具和打包工具变得更加容易，因为每个开发者都可以通过安装相同的依赖项来获得相同的开发环境

一般来说，开发依赖项指的是在项目开发过程中所需的库、框架和工具，而生产依赖项则指的是项目打包后运行时所需的库和框架。下面列出了一些常见的依赖项以及它们应该被安装到哪里。

安装在开发依赖项的库、框架和工具：

- 编译工具和打包工具，例如 webpack、Gulp、Grunt 等
- 代码质量检查工具和代码风格规范，例如 ESLint、TSLint、Prettier 等
- 测试框架和测试工具，例如 Jest、Mocha、Chai、Sinon 等
- 代码生成工具，例如 TypeScript、Babel 等

安装在生产依赖项的库、框架和工具：

- 运行时所需的库和框架，例如 React、Vue、Angular 等
- 网络请求库和数据处理库，例如 Axios、Lodash、Moment.js 等
- 图表库和 UI 库，例如 Ant Design、Bootstrap、Material UI 等
- 状态管理库和路由库，例如 Redux、Vuex、React Router、Vue Router 等
- 需要注意的是，某些库和工具即可以用作开发依赖项也可以用作生产依赖项，具体要根据该库或工具的使用情况和需要进行决定。在 package.json 文件中，开发依赖项通常写在“devDependencies” 中，生产依赖项则写在 “dependencies” 中。

### 创建远程和本地的关联

1. 在gitee上面创建一个远程地址，记住https地址
2. 创建全局git标识

    ```
    git config --global user.name "Xiaoke"
    git config --global user.email "hewenke00@163.com"
    ```

3. 创建 git 仓库

    ```
    mkdir react-project-architecture        --创建文件夹
    cd react-project-architecture        --切到当前文件夹  
    git init         --创建git本地仓库
    touch README.md    --创建文件，win没有touch需要下载一个, 命令`npm install touch-cli -g`
    git add README.md    --本地添加文件
    git commit -m "first commit"    --提交到本地仓库
    git remote add origin https://gitee.com/xiaaoke/react-project-architecture.git    --关联远程仓库
    git push -u origin "master"        --提交到master分支，需要账号和密码
    ```

### 文件目录

```
my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── modules/
│   ├── pages/
│   ├── services/
│   ├── store/
│   ├── App.tsx
│   └── index.tsx
├── .gitignore
├── .eslintignore
├── .eslintrc.json
├── .prettierrc.json
├── package-lock.json
├── package.json
├── tsconfig.json
└── webpack.config.js
```

- node_modules: 存放项目依赖的第三方库和组件。
- public: 存放公共资源文件，如 index.html 、favicon.ico 等。
- src: 存放项目的代码文件。
- assets：存放项目的静态资源文件，如图片、样式等。
- components：存放项目的可复用组件。
- modules：存放项目的“模块”，如登录、注册、订单等模块。
- pages：存放项目的页面组件。
- services：存放项目的接口请求服务文件。
- store：存放项目的状态管理文件。
- App.tsx: 项目的入口文件，渲染主视图组件。
- index.tsx: 项目的入口文件，启动项目应用。
- .gitignore: Git版本控制工具忽略文件。
- .eslintignore: ESLint 忽略文件。
- .eslintrc.json: ESLint 配置文件。

### 使用shell脚本自动将项目打包部署到git服务器

```.sh
#!/bin/bash
# 进入项目目录
cd /path/to/your/project
# 安装依赖
npm install
# 打包项目
npm run build
# 进入打包后的项目目录
cd build
# 将打包后的文件上传至git服务器
git init
git add .
git commit -m "deploy"
git push origin master
```

在执行脚本之前，您需要将/path/to/your/project替换为您自己的项目路径。此外，您还需要在git服务器上创建一个空的仓库，并将origin和master替换为您的远程仓库地址和分支名称。最后，您需要在本地计算机上安装Git Bash或类似的终端模拟器，并在其中运行此脚本。