create-react-app脚手架搭建学习详解

学习目标

  • 学习create-react-app脚手架
  • 学习经典redux、react-redux数据流架构

  • react全家桶:react-router-dom、ant-design...

  • 学习与实践hook编程

  • 创建一个简单的管理系统(菜单管理、用户管理、角色管理等功能开发)

  • 可预测的数据流、实践组件化

环境搭建

  •  在本地安装create-react-app
cnpm i create-react-app -g
  •  通过creat-react-app创建一个本地脚手架,我这里命名为react-admin
create-react-app react-admin
  • 过程有点慢,等待安装就好了,安装后再进行环境配置。这个是基于webpack搭建的一个脚手架,但是文件目录看不到webpack的影子,我们需要“暴露”一下create-react-app脚手架搭建学习详解_第1张图片
nmp run eject
  • 如果执行上述命令报错,要先提交一次代码,也就是先执行下面的代码,是一些git命令,再执行npm run eject,如果执行这个代码没报错就不用管
git init
git add --all
git commit -m 'first commit'
  • 此时文件列表发生改变了,已经可以看到webpack的配置文件了,我们在此文件列表的基础上进行修改配置
  • 我们要区分 环境所需要的包 和 代码所需要的包,所以要对package.json文件进行配置,将一些包移动到环境所需要的devDependencies字段中,此时webpack版本号是v4
"dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "7.12.3",
    "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
    "@svgr/webpack": "5.5.0",
    "@testing-library/jest-dom": "^5.15.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@typescript-eslint/eslint-plugin": "^4.5.0",
    "@typescript-eslint/parser": "^4.5.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.0",
    "babel-loader": "8.1.0",
    "babel-plugin-named-asset-import": "^0.3.7",
    "babel-preset-react-app": "^10.0.0",
    "bfj": "^7.0.2",
    "camelcase": "^6.1.0",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "css-loader": "4.3.0",
    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
    "eslint": "^7.11.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-testing-library": "^3.9.2",
    "eslint-webpack-plugin": "^2.5.2",
    "file-loader": "6.1.1",
    "fs-extra": "^9.0.1",
    "html-webpack-plugin": "4.5.0",
    "identity-obj-proxy": "3.0.0",
    "jest": "26.6.0",
    "jest-circus": "26.6.0",
    "jest-resolve": "26.6.0",
    "jest-watch-typeahead": "0.6.1",
    "mini-css-extract-plugin": "0.11.3",
    "optimize-css-assets-webpack-plugin": "5.0.4",
    "pnp-webpack-plugin": "1.6.4",
    "postcss-flexbugs-fixes": "4.2.1",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "8.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "5.0.2",
    "prompts": "2.4.0",
    "react-app-polyfill": "^2.0.0",
    "react-dev-utils": "^11.0.3",
    "react-refresh": "^0.8.3",
    "resolve": "1.18.1",
    "resolve-url-loader": "^3.1.2",
    "sass-loader": "^10.0.5",
    "semver": "7.3.2",
    "style-loader": "1.3.0",
    "terser-webpack-plugin": "4.2.3",
    "ts-pnp": "1.2.0",
    "url-loader": "4.1.1",
    "web-vitals": "^1.1.2",
    "webpack": "4.44.2",
    "webpack-dev-server": "3.11.1",
    "webpack-manifest-plugin": "2.2.0",
    "workbox-webpack-plugin": "5.1.4"
  },
  • 启动项目
npm start

整理src、public、入口文件、App根组件中无关的文件和代码

  • 修改src/index.js, reportWebVitals这个文件是开发性能测试工具,在开发中需求不大,相关文件配置都能删除,App.test.js、setUp.test也是测试文件,一般都不需要,可以直接删除
//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './style/init.css';
import App from './App';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
)

//App.js

import './style/init.css';

export default function App() {
  return (
    
hello React
); }
  • 修改样式文件位置,新建style文件夹,将src目录下的样式文件都收录到style中,保持路径简洁,新建assets放置logo等静态资源(注意路径)和一些常用的文件夹,如果自带的图片删除需要修改manifest.json文件,删除对应字段就可

  • 配置一个二次封装webpack的文件(个人喜好,不配置也可)
// react.config.js

// 二次封装webpack(建议使用webpack的一级字段)
// webpack.config.js文件中的resolve中的alias字段
const path = require('path')
module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  // loaders
  module: {
    rules: [

    ]
  },
  // plugins
  plugins: [],
  
  // 配置端口
  devServer: {
    port: 9090
  }
}
  • 同时要修改webpack.config.js文件中和start.js
// webpack.config.js文件
// resolve字段中的alias

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',
        // Allows for better profiling with ReactDevTools
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),

        //添加的字段
        ...(rctconfig.resolve? (rctconfig.resolve.alias || {}) : {}),
      },



// start.js文件

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || (rctconfig.devServer && rctconfig.devServer.port) || 3000;

  • 此时的目录结构为

create-react-app脚手架搭建学习详解_第2张图片

  • proxy代理方式(四种

    1. react-config.js中配置proxy(常用)

    2. 在package.json中配置

    3. 在webpack配置中直接改

    4. 在src配置代理文件setupProcxy.js(很少用)

- 建议阅读'https://create-react-app.dev/docs/deployment'这篇文章
  • 到这里基本环境就已经搭建的差不多了,可以开始做项目了,一些babel插件和plugin可以根据具体项目要用到的时候再安装和使用。redux基本简介和用法在下一篇学习中总结

你可能感兴趣的:(react,react.js,前端,webpack,前端框架)