# react-app

**Repository Path**: De_Ja_Vu/react-app

## Basic Information

- **Project Name**: react-app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-19
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

0 初始化 git 仓库

1 初始化项目
1.1 指令
cnpm i -g create-react-app
create-react-app 项目名称
1.2 拉取 react 脚手架 webpack 的配置文件
执行指令
01.cnpm i yarn -g  
02.yarn config set registry https://registry.npm.taobao.org -g
03.yarn eject

2 公共样式引入(确定用哪种 css less/sass/stylus/css)
2.1 采用 less 开发整个项目 需要配置 less
2.1.1 安装 cnpm i less less-loader --save-dev
2.1.2 webpack.config.js 配置
01 修改 style files regexes（样式文件正则），找到 注释 style files regexes，在这部分最后添加如下两行代码：
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

02 修改 getStyleLoaders 函数，添加代码:
lessOptions

    　{
        loader: require.resolve('less-loader'),
        options: lessOptions,
      }

03 模仿代码中提供的 sassRegex 代码，添加如下代码:
{
test: lessRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
}

3 字体图标引入
3.1 在 index.js 引入
import "./static/css/common.less";
import "./static/css/font.css";
import "./static/css/iconfont.css";
4 整个项目的搭建以及文件夹 静态资源的存放

5 基本的路由搭建
5.1  
第一步 安装
cnpm i react-router react-router-dom --save-dev
第二步 引入路由 （定义路由组件）
import { HashRouter, Switch, Route ,NavLink} from "react-router-dom";
第三步 配置路由
<HashRouter>
<FootNav /> {/_路由连接组件_/}
<Switch>
<Route exact path="/" component={Home}></Route>
<Route path="/shop" component={Shop}></Route>
<Route path="/life" component={Life}></Route>
<Route path="/mine" component={Mine}></Route>
</Switch>
</HashRouter>
5.2 拆分路由（低耦合 高内聚）

6 组件的开发
7 第三方插件的加载与使用
8 公共组件的抽取
9 基本的 api 的封装
10 组件之间数据共享 redux/react-redux
城市定位与选择 很多个组件都需要共享 采用 redux 比较方便
11 测试 打包上线