react 项目学习

Posted 2022-12-12 izyk

1-2 前置准备

开发环境：

　　Node.js(v8.2+)

　　NPM(v5.2+)

　　Visual Studio Code(VS Code)

VS Code常用插件：

　　Prettier-Code formatter 　　格式化代码

　　Reactjs code snippets　　快速生成 react 常用模块化代码

　　Auto Rename Tag　　对相关标签重命名时，对应标签相应改变

主要依赖库版本(需高于以下版本)：

　　React: ^16.4.1

　　Redux: ^4.0.0

　　React Redux: ^5.0.7

　　React Router: ^4.3.1

2-1 创建项目结构

React项目脚手架： create-react-app

　　零配置创建 React 应用 （不需要配置babel和webpac等）

　　构建： JS、CSS、图片 （资源打包构建）

　　开发效率： 自动刷新、代理转发、单元测色等　

create-react-app 的使用

　　新建项目：npx create-react-app [项目名] （npm >= 5.2）

　　在命令面板安装 code 就可以在终端中使用 code 可以在vs code 中快速打开项目

package.json

  "name": "dz-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "react": "^16.10.1",
    "react-dom": "^16.10.1",
    "react-scripts": "3.1.2"  //其他的相关依赖都封装到了react-script中，webpack。babel等
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test", //测试
    "eject": "react-scripts eject"  //将原本相关配置的封装弹射出来，将wepack.cofig在项目中显现出来
  ,

 使用 Mock 数据

方式一： 代理到 mock 服务器 （通过开启一台mock服务器，将mock数据放到该服务器上，将前端请求转发到这个服务器上）

　　npm install -g serve 安装服务

　　在package.json 中配置

　　“”proxy“:

　　　　"/api":

　　　　　　"target": "http://localhost:5000"

　　　　

　　　　　

方式二：直接将 mock 数据放到项目 public 文件夹 （public 中新建 mock 文件夹 > data.json 文件） 通过localhost：3000/mock/data.json 就能访问

　原因是：public 文件夹的静态资源是不会被构建的，打包后直接放到项目中使用的