如何搭建TS的React项目

1.全局安装 create-react-app（如果之前安装过，请先卸载并重新安装）：

npm uninstall -g create-react-app
npm install -g create-react-app

2.创建项目（使用 TypeScript 模板）：

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

3.进入项目目录

cd my-app

4.安装 react-router（用于路由管理）：

yarn add react-router-dom
# 或者
npm install --save react-router-dom

5.安装 TypeScript 支持：

npm install --save-dev @types/react-router-dom

6.创建页面（示例：Home 页面）： 在 src/pages/home/index.tsx 中创建一个简单的页面：

import React from 'react';

function Home() {
  return (
    <div>
      <h1>HomePage</h1>
      <h2>www.w3h5.com</h2>
    </div>
  );
}

export default Home;

7.配置路由： 在 src/routers/index.tsx 中配置路由：

import { lazy } from 'react';

const Home = lazy(() => import('../pages/home'));
const Detail = lazy(() => import('../pages/detail'));

export type RouterType = {
  path: string;
  component: React.LazyExoticComponent<any>;
  root: string[];
  notExect?: boolean;
}[];

const Routers: RouterType = [
  { path: '/home', component: Home, root: [] },
  { path: '/detail', component: Detail, root: [] },
];

export default Routers;

8.配置 App.tsx： 在 src/routers/App.tsx 中配置路由和默认路由：

import React from 'react';
import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
import Routers from './routers';

function App() {
  return (
    <Switch>
      {Routers.map((router) => (
        <Route
          exact={!router.notExect}
          key={router.path}
          path={router.path}
          component={router.component}
        />
      ))}
      {/* 设置默认路由 */}
      <Redirect path="/" to="/home" />
    </Switch>
  );
}

export default withRouter(App);

9.在 index.tsx 引用： 在 src/index.tsx 中引用 App 组件：

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    {/* 使用了路由懒加载，所以需要使用 <Suspense> 包起来 */}
    <Suspense fallback={<div>Loading...</div>}>
      <App />
    </Suspense>
  </BrowserRouter>,
  document.getElementById('root')
);

10.运行验证： 现在你可以访问 http://localhost:3000/home 查看效果了。