React项目开发流程

0. 项目

1. 项目描述

   网易周边商城这个项目是一个电商类型项目，这个项目B2C项目，它的目的是为了给用户和商家提供 一个可以用于交易的平台，这个项目的适用的人群范围是： 青年 ，它里面核心提供的功能有： 用户的管理、商品的管理、商品的交易流程、地理位置定位、商品的模糊搜索等

2. 项目职责

   1、负责前端HTML/JS/CSS代码的编写，实现Web端界面及数据交互；
   2、配合产品完成Web项目迭代，不断优化和提升用户体验；
   3、深入分析和解决前端遇到的各种技术、性能、跨终端兼容问题；
   4、根据业务需求，封装高复用、可维护性好的前端组件，持续提升页面兼容性和性能。

3. 项目技术栈+

   项目中用到的技术栈的版本

   React 什么版本

   react-router 什么版本

    使用 React 全家桶进行开发
    使用 CRA 构建项目 / dva /umi
    使用 react-router-dom 构建 SPA / reat-router 3
    使用 redux + react-redux + redux-thunk 进行项目状态管理
    使用 Ant Design UI 框架进行 UI 搭建 /pc / app
    使用 Iconfont 图标库 / fawesome
    使用 axios 进行数据请求 / fetch
    使用 swiper 插件实现轮播 / react-swiper
    使用 better-scroll 实现页面滚动
    使用 animate.css 实现动画效果

4. 项目中遇到过什么问题吗?你是怎么解决的？

1. 团队组成 【 中小型 】

• 技术研发部
  • 产品经理
    • 主要工作职责：
      • 与用户、市场、运营沟通
      • 整理文案
      • 开会
      • 控制整个项目的进程
      • xxx
  • 设计
    • UI设计师 2位
      • 根据产品的原型图完成设计稿
  • 测试
    • 软件测试 1-2 位
  • web 、app开发
    • 前端开发工程师 frontend
      • 人数： 1- 4位 【 中小型 】
    • 后端开发工程师 [ 技术总监 ] backend
      • java 3 - 10 位
• 面试题： 你们公司构成是什么？ 坑 20 - 50 50 -1 00 公司规模
  • 你的部门的构成？
    • 技术部： 上面
      • 产品1位 设计 2位 测试 1位 前端 4位 后端 5
• 模拟: 小组分工
  • CTO 兵哥
  • 产品
    • 作用： 督促 【 项目进度由你来把控 】
    • 完成时间： 本周内完成
    • 任务：
      • 2个页面
      • 答辩PPT
      • 项目开发流程思维导图【 开会 】
        • 功能
          • 分类-》 列表-》 详情-》 购物车 一个人做
      • 产品 + 总监 确定做哪些页面，哪些功能 + 人员任务分配 【 任务分配是以文件下发 】
        • 微信组 / qq组
  • 技术总监 【 小组组长 】
    • 作用：
      • 1. 解决小组成员内遇到的问题
      • 2. git操作由你负责
    • 任务：
      • 4个页面
  • 基础前端
    • 任务
      • git团队部分操作
      • 6个页面
        • 记录自己困难以及如何解决的？

2.互联网项目开发流程

参考博客： https://blog.csdn.net/qwfys200/article/details/82811057

• 流程
  • 1. 需求分析
       1. 产品提炼业务需求，形成文稿
       2. 产品组织会议，针对需求进行评审，参会人员：UI设计人员、WEB前端开发、APP前端开发、后端开发人员、测试人员，项目负责人、技术负责人
       3. 产品开会次数不要超过3次
  • 2. 设计研发
       1. UI设计评审
          1. 确定设计稿
             • 第一类： 必须符合客户要求 【 外包 】
             • 第二类： UI设计人员、WEB前端开发、APP前端开发、后端开发人员、测试人员，项目负责人、技术负责人 做评审 【 自主研发 】
          2. 交互逻辑 【 高保真设计图 】
             • 线上软件
             • 蓝湖、
             • skeache
          3. 确定设计稿 【 定稿 】
       2. demo案例演示
          1. 开发就某一个功能做具体讲解和案例演示
          2. UI设计人员、WEB前端开发、APP前端开发、后端开发人员、测试人员，项目负责人、技术负责人 做评审 【 自主研发 】
       3. 单元测试
          1. 自动化测试
             • mocha
             • jest
          2. test测试
             1. eslint
             2. jslint
          3. e2e测试
  • 3. 功能测试
       1. apache测试
          • 静态服务器运行项目
       2. Beta测试
          • 内测： 开放一部分用户，用户使用
  • 4. 发布上线 【 云服务器 、 主机 】
       1. 发布审核
          1. 域名 [ 不需要做 ]
          2. 项目类型 和 内容
          3. 云服务器备案 【 不做 】 用域名
             1. 比如阿里云备案
             2. 本地公安局备案
       2. 上线验收
          • 项目成果
            • 用户使用量
            • 用户注册量
            • 店铺注册量
            • 。。。

3.开发人员 - 开发阶段

1. 项目架构确定

• 这个项目适合用当前哪一个框架

  • jq
    • 项目小快速开发
  • vue
    • pc后台
    • webapp
    • 小程序 mpvue
  • React
    • 大型企业级应用
      • pc官网
      • pc后台管理系统
      • 小程序 taro
  • Angular
    • 金融
  • …

• 这个项目适合使用哪一个版本控制管理工具

  • git
  • svn

• 这个适合使用哪一个代码托管平台

  • github
  • gitee

• 这个项目适合使用哪一个 git 可视化工具

  • gitlab
  • gitbash

• 数据库

  • mySql

• 前端组件库

  • vue
    • app Mint-ui
    • pc element-ui iview
  • React
    • pc ant design pro
    • app antd-mobile

• 前端的webpack构建工具

  • vue
    • cli3
    • webpack手动构建
  • React
    • CRA
    • dva
    • umi
    • webpack手动搭建 - bone

2. 构建项目托管平台 - 码云

3. 使用git来做项目管理

git团队操作

1. 什么是git

   • git是一个分布式的版本控制管理工具

     • 分布式：分布式计算是计算机科学中一个研究方向，它研究如何把一个需要非常巨大的计算能力才能解决的问题分成许多小的部分，然后把这些部分分配给许多计算机进行处理，最后把这些计算结果综合起来得到最终的结果

       [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kWgYJOVC-1574780687459)(E:\1905\3-React\note\React笔记\images\git分布式理解.png)]

     • 版本

       • git可以存储多个项目版本，为了将来的版本切换

         • 1.0
         • 2.0
         • 3.0
         • 4.0

         [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6IABOrzy-1574780687461)(E:\1905\3-React\note\React笔记\images\git版本理解.png)]

2. git的安装

   • 安装的gitbash.exe

3. git概念

   • 本地git仓库

   • 远程git仓库

     [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KlhkOYmZ-1574780687463)(E:\1905\3-React\note\React笔记\images\git本地基本操作流程.png)]

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KgS3W9Qn-1574780687463)(E:\1905\3-React\note\React笔记\images\git分支的原理图.png)]

4. git 基础

   • git初始化 -》 在我们的工程（项目中）创建一个git仓库，这个仓库用一个.git的文件夹表示的
     $ git init
   • 将本地文件提交到暂存区
     $ git add. 将工程（项目）中所有的都存放到暂存区
     $ git add ./index.js 将工程（项目）中指定的放在暂存区
   • 将在暂存区的文件提交的仓库存储区
     $ git commit -m ' 对当前提交的文件说明 '
   • 查看提交日志
     $ git log
   • 查看简洁版提交日志
     $ git log --oneline
   • 版本回退
     $ git reset -- hard HEAD 当前的版本
     $ git reset --hard HEAD^ 上一个版本
     $ git reset --hard HEAD^^ 上上一个版本
     $ git reset --hard HEAD~100 往上100个版本
   • 进行文件修改的撤销
     $ git checkout -- 文件路径

5. git 分支管理

   • git分支创建
     $ git branch 分支名
   • git分支的切换
     $ git checkout 分支名
   • 发现在分支中也可以看到主分支的提交记录
   • 连接远程
     $ git push 远程仓库地址 分支名称
   • 注意： 如果两个人同时操作了一个文件，这个时候就会有冲突，我们应该怎么办？
   • 解决： 先git pull , 然后在手动处理，然后在去提交
   • 为了解决每次都要书写远程url，我们可以给远程url写一个别名
     $ git remote add -m 别名 url
$ git push origin 分支名称
   • 分支合并
     $ git merge 分支名称

git 总结：

1. git流程
   • 工作区 -> 本地仓库 -> 远程仓库
2. 分支
   • 先创建本地分支 -> 切换本地分支 -> 工作区操作 -> 远程分支
3. 主管改了主分支东西，你要重新更新
4. 分支的合并
5. git 冲突解决
   • 先git pull 然后 手动选择 然后上传
6. git 版本回退
7. 上传式不能是空目录

4. 构建项目开发环境 【 总监 】

项目描述

项目职责

项目应用技术栈

​ React全家桶

​ react react-router-dom redux CRA

​ better-scroll

​ loadsh

​ Imutable

​

• 1. CRA 创建项目
• 2. 项目基础目录
  3. src目录
     • components
       • common
       • layout
     • store
     • pages
       • home
         • index.js 组件模块
         • store.js redux模块
         • HomeStyleComp.js 组件样式文件
     • assets
       • stylesheets
         • reset.css
       • js
       • img
     • utils
       • http.js
       • rem.js
       • border.js
     • lib
     • setupProxy.js
  4. config-overrides.js
     • 组件库

5. 总监上传代码到码云

6. 组员克隆代码到本地

• 1. 创将我们自己的本地子分支
  2. 将我们写的代码提交到远程的子分支
  3. 2天后我们将我们的子分支合并到develop分支上

7.配置路径别名

8.配置反向代理

9.解决用户双击缩放问题

10.引入项目重置样式

11.配置项目移动端自适应

1. 配置rem

   • 淘宝方案

     • https://github.com/amfe/lib-flexible

     /* 通过js来动态添加rem 
     */;(function(designWidth, maxWidth) {var doc = document,win = window,docEl = doc.documentElement,remStyle = document.createElement("style"),tid;function refreshRem() {var width = docEl.getBoundingClientRect().width;maxWidth = maxWidth || 540;width>maxWidth && (width=maxWidth);var rem = width * 100 / designWidth;remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';}if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(remStyle);} else {var wrap = doc.createElement("div");wrap.appendChild(remStyle);doc.write(wrap.innerHTML);wrap = null;}//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；refreshRem();win.addEventListener("resize", function() {clearTimeout(tid); //防止执行两次tid = setTimeout(refreshRem, 300);}, false);win.addEventListener("pageshow", function(e) {if (e.persisted) { // 浏览器后退的时候重新计算clearTimeout(tid);tid = setTimeout(refreshRem, 300);}}, false);if (doc.readyState === "complete") {doc.body.style.fontSize = "16px";} else {doc.addEventListener("DOMContentLoaded", function(e) {doc.body.style.fontSize = "16px";}, false);}
     })(375, 750); // 备注： 这里的375本身就应该写成750 ，但是写成750之后，我们设计稿的尺寸要/50,不好算，我就想，除以100更好算，所以我改成了375
     

   • 网易方案

     
     function font () {document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px'
     }font()window.onresize = font
     

   • 阿里rem

     (function(doc, win) {const docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function() {const clientWidth = docEl.clientWidth;if (!clientWidth) return;let max = 24;let min = 9.3125;let size = 20 * (clientWidth / 320);size = Math.min(size, max);size = Math.max(size, min);docEl.style.fontSize = size + 'px';console.log(docEl.style.fontSize, 'em= =====')};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);
     })(document, window);

12. 构建项目基本页面

1. 首页构建
   • 问题：移动端1px适配问题？
   • 解决： https://www.cnblogs.com/katydids/p/9948546.html

13.路由

1. 路由的基础配置

   • 一级路由配置
   • 二级路由配置
   • 多级路由配置

2. Route组件身上component vs render vs children

   • component的话是渲染一个组件，会给这个组件添加几个路由属性
     • location
     • history
     • match
   • render 的话仅仅是渲染一个组件，不会给这个组件添加任何属性
   • children 也是渲染一个组件，但是不管你的路由路径是什么，它都渲染

3. 我们给头部的返回箭头添加返回功能时，遇到了一个问题，Tab组件身上没有路由属性，而它的父组件LayOut 也没有，咋整？

   • 思路： 能不能将App组件或是LayOut组件变成路由组件
   • 解决: 在LayOut 中引入一个高阶组件 withRouter , 它的作用就是将普通组件改成伪路由组件

4. 动态路由

   url改变，但是组件是同一个

   • 列表
   • 详情

   • 分类 -》 列表 -》 详情 -》 购物车

5. 路由动画 ？ —

14.状态管理

它的目的是为了实现多组件状态共享

1. 类型

   • Flux
     • 很少有人使用了
   • Redux
     • 必须会的，必须会，必须会
   • Mobx
     • mobx比较新，阿里多一些

2. Flux - 【 熟悉 】

   • 为什么要学习Flux?
     • 因为Flux是 Redux/mobx 学习的基础
   • Flux的核心组成部分
     • Store
       • 存储状态
       • 通过事件的订阅和发布更新视图
     • Views
       • 视图，使用React 组件充当
     • Actions
       • 动作创建者
         • 视图中的数据交互和用户交互
     • Dispatch
       • 派发器
         • 修改数据
   • Flux的使用流程

3. Redux

   • Redu介绍
   • Redux核心组成部分？每一个部分的作用
   • Redux数据流程
   • Redux使用流程
   • Redux中间件

4. Mobx

   • Mobx介绍
   • Mobx的核心组成部分，每一个部分的作用
   • 很少有人使用了
   • Redux
     • 必须会的，必须会，必须会
   • Mobx
     • mobx比较新，阿里多一些

5. Flux - 【 熟悉 】

   • 为什么要学习Flux?
     • 因为Flux是 Redux/mobx 学习的基础
   • Flux的核心组成部分
     • Store
       • 存储状态
       • 通过事件的订阅和发布更新视图
     • Views
       • 视图，使用React 组件充当
     • Actions
       • 动作创建者
         • 视图中的数据交互和用户交互
     • Dispatch
       • 派发器
         • 修改数据
   • Flux的使用流程

6. Redux

   • Redu介绍
   • Redux核心组成部分？每一个部分的作用
   • Redux数据流程
   • Redux使用流程
   • Redux中间件

7. Mobx

   • Mobx介绍
   • Mobx的核心组成部分，每一个部分的作用
   • Mobx使用流程