React+hooks+TS练习

一、初始化项目

1. 通过create-react-app命令创建项目，–template表示使用typescript（node版本高于14才能使用npx）

    npx create-react-app jira --template typescript
   

2. 配置绝对路径
   在tsconfig.json中配置baseUrl，表示项目中的绝对路径是从src目录下开始寻找。
   

3. 使用json-server来Mock数据
   首先安装json-server：yarn add json-server -D
   在根目录下创建_json_server_mock__文件夹，用来存放模拟的数据（名字可随意）
   

   在package.json中配置scripts，新增json-server的命令："json-server": "json-server __json_server_mock__/db.json --watch --port 3001"
   
   由于json-server默认跑在3000的端口号上，和项目跑的端口号冲突，因此修改json-server的端口号为3001。
   此时执行 npm run json-server 就可以启动json-server，进行数据的模拟。

4. 配置api根路径
   在根目录下创建 .env 和 .env.development文件， .env 是项目上线后使用的， .env .development是开发中使用的。在.env.development文件中添加：
   REACT_APP_API_URL = http://localhost:3001
   在项目中使用：
   const apiUrl = process.env.REACT_APP_API_URL

二、JSX实现小demo

通过本demo的实现，可对React的状态提升、组件结合、数据传递和两个最基本hook有了一个完整的使用过程。

接口格式：

实现思路：可分成search_panel和list两个组件，在index中进行状态的保存，将状态通过props传递给search_panel和list两个组件使用。

// index.js
const apiUrl = process.env.REACT_APP_API_URL;

export const ProjetcList = () => {
   
 
    const [param, setParam] = useState({
   
        name: '',
        personalId: ''
    })

    // 存放底部列表数据
    const [list, setList] = useState([])

    // 存放下拉列表数据
    const [users, setUsers] = useState([])

    // input输入框或者下拉框内容改变，则请求数据
    useEffect(() => {
   
        fetch(`${
     apiUrl}/projects?${
     qs.stringify(cleanObj(param))}`).then(async response => {
   
            if(response.ok) {
   
                setList(await response.json())
            }
        })
    }, [param])

    // 请求users
    useEffect(() => {
   
        fetch(`${
     apiUrl}/users`).then(async response => {
   
            if(response.ok) {
   
                setUsers(await response.json())
            }
        })
    }, [])

    return (
        <div>
            <SearchPanel users={
   users} param={
   param} setParam={
   setParam}/>
            <List users={
   users} list={
   list}/>