react项目级应用框架搭建

项目目录结构

记录自己的每个学习足迹

做项目,学习技术,学习框架都少不了项目框架的搭建;这里记录下自己搭建框架的过程。框架技术点react+TypeScript+redux+ant

1. 第一步创建项目

yarn create react-app mini-turn-pc --template typescript
#or
npx create-react-app mini-turn-pc --template typescript

这里使用的是yarn,如果你使用的是 npm也没问题。

然后我们进入项目并启动。

cd mini-turn-pc
yarn start

此时浏览器会访问 http://localhost:3000 ，看到 Welcome to React 的界面第一步就算成功了。

2. 引入 antd 组件库

	yarn add antd

如果在App.tsx引入全部的 antd 组件的样式（对前端性能是个隐患）。一般采用按需加载,按组件来加载所需要的样式。

	yarn add react-app-rewired customize-cra babel-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件

修改package.json配置

"scripts": {
   
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

// const rewireLess = require('react-app-rewire-less');
const {
    override, fixBabelImports, addLessLoader,addWebpackAlias,addDecoratorsLegacy } = require('customize-cra');
const path = require('path')

module.exports = override(
    fixBabelImports('import', {
   
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,//为true时支持less解析,自定义主题需要用到 less 变量覆盖功能
    }),
    addLessLoader({
   
        javascriptEnabled: true,
        modifyVars: {
    
            "@primary-color": "#1DA57A" ,// 全局主色
            "@link-color " : "#1DA57A", // 链接色
            "@success-color " : "#52c41a", // 成功色
            "@warning-color " : "#faad14", // 警告色
            "@error-color " : "#f5222d", // 错误色
            "@font-size-base " : "14px", // 主字号
            "@heading-color " : "rgba(0, 0, 0, 0.85)", // 标题色
            "@text-color " : "rgba(0, 0, 0, 0.65)", // 主文本色
            "@text-color-secondary " : "rgba(0, 0, 0, 0.45)", // 次文本色
            "@disabled-color " : "rgba(0, 0, 0, 0.25)", // 失效色
            "@border-radius-base " : "4px", // 组件/浮层圆角
            "@border-color-base " : "#d9d9d9", // 边框色
            "@box-shadow-base " : "0 2px 8px rgba(0, 0, 0, 0.15)", // 浮层阴影
        },
    }),
    addDecoratorsLegacy()
);

修改后重启 yarn start，如果看到一个绿色的按钮就说明配置成功了。
到这里react+ant配置就算完成了。

3. 接下来是加入redux状态管理

在前端3大框架中,不管是哪个都少不了状态管理。在这里使用的是redux,redux不只能在react中使用,也能在angular中配合服务使用。
首先加入包:

	yarn add redux redux-thunk react-redux

若是出现找不到module的情况则需要加入 yarn add @types/react-redux

React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据。redux的原理这里不做介绍有兴趣的可自行查阅资料学习。

快捷链接-_-: React-Redux 中文文档.

这里就写上 redux 的demo:
(1) 创建常量文件: redux/constant/count.ts

	export const ADD = 'ADD'
	export const MINUS = 'MINUS'

(2) 创建actions文件: redux/actions/count.ts

  import {
    ADD, MINUS } from "../constant/count"
  export const add = () => {
   
    return {
   
      type: ADD
    }
  }
  export const minus = () => {
   
    return {
   
      type: MINUS
    }
  }
  
  // 异步的action
  export function asyncAdd () {
   
    return (dispatch:any) => {
   
      setTimeout(() => {
   
        dispatch(add())
      }, 2000)
    }
  }
  

(3) 创建reducer文件: redux/reducers/count.ts

	import {
    ADD, MINUS } from "../constant/count"
	const INITIAL_STATE = {
   
	    num: 0
	  }
	  
	export default function counter (state = INITIAL_STATE, action:any) {
   
	  switch (action.type) {
   
	    case ADD:
	      return {
   
	        ...state,
	        num: state.num + 1
	      }
	      case MINUS:
	        return {
   
	          ...state,
	          num: state.num - 1
	        }
	      default:
	        return state
	  }
	}

(4) 创建总文件index用来统一管理reducer文件 : redux/reducers/index.ts
(在actions和constant目录下都可以创建一个index统一来管理)

	import {
    combineReducers } from 'redux';
	import counter from './count';
	
	export default combineReducers({
   
	    counter
	})
	```
	(5) 创建store文件 :   redux/store.ts
	```javascript
	import {
    createStore, combineReducers,applyMiddleware  } from "redux";
	import thunk from 'redux-thunk';
	import reducers from "./reducers/index";
	
	const middlewares = [thunk]
	
	// 全局就管理一个store
	export const store = createStore(
	    reducers,
	    applyMiddleware(...</