从零开始搭建一个React TypeScript项目

德顺

发布于 2021-07-06 15:02:08

6.5K0

发布于 2021-07-06 15:02:08

文章被收录于专栏：前端资源

最近开始使用 React 和 TypeScript 开发项目了，顺便整理一下 react-ts 项目的创建过程。

node/npm 这些基本的东西就不再赘述了，没有的自行安装一下。

下面正片开始：

全局安装 create-react-app

 npm install -g create-react-app
 // 如果很久之前安装过，建议卸载重新安装 npm uninstall -g create-react-app

创建项目

参考官方文档

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

启动项目

 cd my-app //进入项目目录
 npm run start

目录调整

创建完成后项目目录是这样的，有点乱。

可以把无用的初始化文件删除。

安装 react-router

 yarn add react-router-dom
 // OR npm install --save react-router-dom

TypeScript 支持：

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

运行时报错：

 Could not find a declaration file for module 'react'. 'D:/react/hao-w3h5-react/node_modules/react/index.js' implicitly has an 'any' type.
   If the 'react' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react'  TS7016
 
   > 1 | import React from 'react';
       |                   ^
 ...

原因及解决方法：

不知道咋回事，我安装的时 react-ts 模板，还有这个报错。

比较明显是没有 react 的定义文件，如果使用 TypeScript，除了源代码，还需要有 @types 文件。

执行命令安装定义文件：

npm install @types/react --save

创建路由和页面

创建一个页面

@/pages/home/index.tsx

 import React from 'react'
 
 function Home () {
   return (
     <div>
       <h1>HomePage</h1>
       <h2>www.w3h5.com</h2>
     </div>
   )
 }
 
 export default Home;

可以以同样的方法再创建一个 detail 页面。

配置路由

@/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

配置 App.tsx

@/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}
           >
           </Route>
         ))
       }
       {/* 设置默认路由 推荐方法一*/}
       {/* 重定向*/}
       <Redirect path="/" to="/home" />
     </Switch>
   )
 }
 
 export default withRouter(App)

在 index.tsx 引用

@/routers/index.tsx

 import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
 ReactDOM.render(
   <BrowserRouter>
     {/* 使用了路由懒加载，所以需要使用<Suspense>包起来 */}
     <Suspense fallback={<div></div>}>
       <Switch>
         <Route path="/" render={routerProps => {
           return <App {...routerProps}/>
         }}/>
       </Switch>
     </Suspense>
   </BrowserRouter>,
   document.getElementById('root')
 );