react.js javascript React+Typescript项目构建

React+Typescript项目构建流程汇总

提示：使用 typescript

文章目录

React+Typescript项目构建流程汇总一、React手脚架构建？1.项目构建2、项目结构介绍3.项目结构重组

二、构建前期准备安装需要的模块和配置

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

一、React手脚架构建？

1.项目构建

使用 npx create-react-app XXXX --template typescript 命令构建React框架 …提示如下显示即构建成功 使用 yarn start 命令运行项目 显示：如上页面即项目构建完成

2、项目结构介绍

3.项目结构重组

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

二、构建前期准备

安装需要的模块和配置

执行 yarn add react-router-dom 安装react 导航路由 v6 新版本react路由使用方法 执行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 Submit;

};

class Home extends React.Component{

render(){

return(

)

}

}

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 Submit;

};

class Index extends React.Component{

render(){

return(

)

}

}

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 (

);

}

export default App;

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

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

参考文章

 您阅读本篇文章共花了：