React+Typescript项目构建

React+Typescript项目构建流程汇总

提示：使用 typescript

---

---

一、React手脚架构建？

1.项目构建

使用 npx create-react-app XXXX --template typescript 命令构建React框架

…提示如下显示即构建成功

使用 yarn start 命令运行项目


显示：如上页面即项目构建完成

2、项目结构介绍

3.项目结构重组

如上图所示，将构建的目录进行修改即：

二、构建前期准备

安装需要的模块和配置

1. 执行 yarn add react-router-dom 安装react 导航路由 v6 新版本react路由使用方法

2. 执行yarn add antd 安装 atd Ant Design of React 组件库并引入 import 'antd/dist/antd.css';即可
   

antd使用详细请看官网 Antd快速上手

三、新建 Home+Index实现 页面跳转示例

在pages目录下新建Home-> Home.tsx

Home.tsx

import React from 'react';
import { useNavigate } from 'react-router-dom';

import { Button } from 'antd';

function MyButton() {
    let navigate = useNavigate();
    function handleClick() {
        navigate('/Index');
    };
    return <button onClick={handleClick}>Submit</button>;
};
class Home extends React.Component{
    
    render(){
        return(
            <div>
                <Button type="primary">Home页面</Button>

                <MyButton></MyButton>
            </div>
        )
    }
}
export default Home

Index.tsx

import React from 'react';

import { useNavigate } from 'react-router-dom';

function MyButton() {
    let navigate = useNavigate();
    function handleClick() {
      navigate('/Home');
    };
    return <button onClick={handleClick}>Submit</button>;
  };

class Index extends React.Component{
    
    render(){
        return(
            <div>
                Index页面
                <MyButton></MyButton>
            </div>
        )
    }
}
export default Index

App.tsx 修改成

import React from 'react';

import { BrowserRouter as Router, Routes,Route,Link } from 'react-router-dom';

//页面导入
import Home from './pages/Home/Home'
import Index from './pages/Index/Index'
//======

function App() {
  return (
    <Router>
      <div className="App"> 
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/Index" element={<Index />} />
          <Route path="/Home" element={<Home />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

然后使用命令 yarn start 运行即可

源代码打包-> React+Typescript项目构建源码下载