react 实战（一）

好久没有react项目了，怕自己生疏，从头再来做个react +ts 的demo。react大佬忽略。

涉及到的技术有 react,hook组件(函数组件)，class 组件，react-router，redux,antd,axios

1.初始化项目

npx create-react-app react-app --template typescript

2.代码结构

​
├─public
│      favicon.ico
│      index.html
│      manifest.json
│      robots.txt
└─src
    │  App.css
    │  App.test.tsx
    │  App.tsx
    │  index.css
    │  index.tsx
    │  shims.d.ts
    ├─components
    │      index.less
    │      Layout copy.tsx
    │      Layout.css
    │      Layout.tsx
    │      Menu.tsx
    │      
    ├─const
    │      config.ts   
    ├─router
    │      config.tsx   
    ├─store
    │  │  index.ts
    │  │  reducer.ts
    │  └─modules
    │          userInfo.ts          
    ├─utils
    │      
    └─views
        
│  .gitignore
│  craco.config.js
│  package.json
│  README.md
│  tsconfig.json
                

3.运行项目

项目根目录下

npm start
npm build

4.class组件和hook组件

不管是class组件还hook组件 都需要写在tsx或者jsx文件内

class 组件

import { Component, ReactNode } from 'react';
import UserInfo from './userForm'
class Hoc extends Component<any,any>{
    constructor(props:any){
        super(props)
        this.state={value:''}
    }
    
    success=(p:any)=>{
        console.log('pppppp',p)
      }
    render(): ReactNode {
        return(
            <div>
                <p>HOC</p>
                <UserInfo reciveP={this.success}/>
            </div>
        )
    }
}
export default Hoc

hook 函数组件

import React, { FC,useState,useEffect } from 'react';
// 下面声明组件的方法都可以
// function Item(props:any)
// const Item:FC =(props:any)=>
const Item =(props:any)=>{
    const [sum, setSum] = useState(10);
    function onClick(){
        add(10)
    }
    const add =(p:number)=>{
        setSum(sum+p)
    }
    useEffect(()=>{
        console.log('zzzzz')
    })
    return <div>
        <h1>{props.p}</h1>
        <p>{sum}</p>
        <button onClick={onClick}>++</button>
        </div>
}
export default Item

5.增加webpack配置，类似于vue.config.js

这里有两种方法，我采用的第二种

1.npm eject 将create-react-app 配置文件暴露出来

2.使用 @craco/craco npm install @craco/craco --save,将package.json 里面的脚本替换,并且在根目录下添加craco.config.js

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

const path = require("path");
​
const resolve = dir => path.resolve(__dirname, dir);
​
module.exports = {
    devServer: {
        proxy: {
            '/service': {
                target: 'http://localhost:8000',
                changeOrigin: true,
                pathRewrite: {
                    "^/service": ''
                }
            }
        },
    },
    webpack: {
        alias: {
            "@": resolve("src"),
            "components": resolve("src/components"),
            "views": resolve("src/views"),
            "services": resolve("src/services"),
        }
    }
}
​

6.注意事项

6.1 使用别名（@）时会报错，需要在webpack配置别名 import Layout from '@/components/Layout';

6.2 react 官方文档react.docschina.org/docs/introd…