# reactDemo

**Repository Path**: zhang_xiaobin__sleepy_one/reactDemo

## Basic Information

- **Project Name**: reactDemo
- **Description**: 仿YT
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React项目开发
## 1、create-react-app脚手架创建项目
    npm i create-react-app  ---- 创建 React 脚手架
    create-react-app myApp  ---- 创建项目 myApp

## 2、抽离配置文件
### create-react-app默认的配置文件在react-scripts模块内，如果你需要配置，那么需要抽离
    npm run eject
#### 如果报错为如下：
```
    Remove untracked files, stash or commit any changes, and try again.
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! test@0.1.0 eject: `react-scripts eject`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the test@0.1.0 eject script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    npm ERR! A complete log of this run can be found in:
    npm ERR!        C:\Users\lenovo\AppData\Roaming\npm-cache\_logs\2018-11-01T04_03_50_129Z-debug.log
```
#### 主要问题是脚手架添加.gitgnore文件
    解决方法：
    git add .
    git commit -m ' '
    git push
    然后再执行：
    npm run eject
## 3、修改项目目录结构
    src
        api         ---- 数据请求
        components  ---- 公共组件
        layout      ---- 页面布局
        pages       ---- 页面
        store       ---- 状态管理
## 4、修改配置文件
### 在抽离配置文件之后 config 中修改 来添加别名 @ 以及可以省略的后缀
#### 1、config/webpack.config 中
    查找 alias 修改配置 
    添加：'@': path.join(__dirname, '../', 'src'),
    alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',
        '@': path.join(__dirname, '../', 'src'),
        // Allows for better profiling with ReactDevTools
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
      },
#### 2、config/paths.js 中
    查找 moduleFileExtensions 修改配置
    添加： 'scss'
    const moduleFileExtensions = [
            'web.mjs',
            'mjs',
            'web.js',
            'js',
            'web.ts',
            'ts',
            'web.tsx',
            'tsx',
            'json',
            'web.jsx',
            'jsx',
            'scss'
        ];
## 5、安装 React 项目的必须依赖
    npm i react-router-dom -S
    npm i redux redux-thunk react-redux -S
    npm i axios -S
    npm i antd-mobile -S
    npm i babel-plugin-import -D  按需引入配置