# k0904_react_app

**Repository Path**: jiely007/k0904_react_app

## Basic Information

- **Project Name**: k0904_react_app
- **Description**: react全家桶学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-28
- **Last Updated**: 2022-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

0 初始化git仓库 
1 初始化项目    npx  create-react-app  app
 1.1 拉取react 脚手架 webapck的配置文件
 1.2 执行指令 yarn eject

第一步  初始化项目后 执行 yarn eject   让配置显示出来    
准备配置less 



less基本配置 

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 配置

配置位置   config/webpack.config.js 里面 进行配置 


1  安装 less   less-loader  
2  引入(配置)
3  测试     


```
  webpack.config.js( 53行位置 )
        第一步 
            //手动配置less  
        const lessRegex = /\.less$/;
        const lessModuleRegex = /\.module\.less$/;
       第二步  添加 配置
       
        {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            
            
            
             {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },
            
      第三步 重启项目 
       yarn start 
      
```


//第三步  项目目录建立 以及加载静态资源static


// 第四步 rem 布局  （public/index.html） 添加 rem js  
```
  <script>

// 引入rem 
(function (doc, win) {
          var docEl = doc.documentElement,
                  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                  recalc = function () {
                      var clientWidth = docEl.clientWidth;
                      if (!clientWidth) return;
                      if(clientWidth>=750){
                          docEl.style.fontSize = '100px';
                      }else{
                          docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                      }
                  };

          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
      })(document, window);


    </script>

```



//第五步  字体图标引入 
   5.1 index.js ```

```
// 引入初始化样式以及字体图标 

import './static/css/common.less'

import './static/css/font.css'
import  './static/css/iconfont.css'


```

// 第六步准备路由搭建 

第一步 安装
         cnpm i react-router  react-router-dom --save-dev


 第二步 引入路由 （定义路由组件）      
 import { HashRouter, Switch, Route,NavLink } from 'react-router-dom'



第三步配置路由
   











首页    
模块化拆分 
 1 头部    传值
 2 轮播图  (发送请求)
 3 分类导航(nav)  (发送请求)
 4  底部tab栏切换




antd  安装   安装版本号 3.26.19

第一步安装  yarn add antd  /  cnpm i  antd@3.26.19 --save






//跨域处理   
第一步安装 

cnpm install http-proxy-middleware --save