首页 > 其他分享 >使用Vite+TS+Antd构建React项目

使用Vite+TS+Antd构建React项目

时间:2024-08-12 18:28:02浏览次数:12  
标签:react About import App TS React Home Antd

安装Vite

npm install -g vite

#yarn global add vite

创建React项目 

vite create my-react-app --template react-ts

安装React Router 

npm install react-router-dom @types/react-router-dom
#yarn add react-router-dom @types/react-router-dom

安装Ant Design  

npm install antd
yarn add antd

配置React Router 

现在,我们已经安装了React Router,可以开始配置路由了。在src目录下创建一个新的文件夹,名为“pages”。在pages文件夹中创建两个新的文件,名为“Home.tsx”和“About.tsx”。这些文件将会成为我们的两个页面。

在Home.tsx中,可以编写以下代码:

import React from 'react';

const Home : React.FC= () => {
  return (
    <div>
      <h1>Welcome to the Home page!</h1>
    </div>
  );
};

export default Home;

 

在About.tsx中,可以编写以下代码:

import React from 'react';

const About : React.FC= () => {
  return (
    <div>
      <h1>Welcome to the About page!</h1>
    </div>
  );
};

export default About;

现在,我们需要在App.tsx中配置React Router。可以编写以下代码:

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import Home from './pages/Home';
import About from './pages/About';

const { Header, Content } = Layout;

const App : React.FC= () => {
  return (
    <Router>
      <Layout>
        <Header>
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <Link to="/">Home</Link>
            </Menu.Item>
            <Menu.Item key="2">
              <Link to="/about">About</Link>
            </Menu.Item>
          </Menu>
        </Header>
        <Content style={{ padding: '0 50px' }}>
          <div className="site-layout-content">
            <Switch>
              <Route exact path="/">
                <Home />
              </Route>
              <Route path="/about">
                <About />
              </Route>
            </Switch>
          </div>
        </Content>
      </Layout>
    </Router>
  );
};

export default App;

使用Ant Design 

现在,我们已经安装了Ant Design,可以开始使用Ant Design来构建我们的UI界面了。在App.tsx中,可以编写以下代码:

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import { HomeOutlined, InfoCircleOutlined } from '@ant-design/icons';
import Home from './pages/Home';
import About from './pages/About';

const { Header, Content } = Layout;

const App: React.FC = () => {
  return (
    <Router>
      <Layout>
        <Header>
          <div className="logo" />
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
            <Menu.Item key="1" icon={<HomeOutlined />}>
              <Link to="/">Home</Link>
            </Menu.Item>
            <Menu.Item key="2" icon={<InfoCircleOutlined />}>
              <Link to="/about">About</Link>
            </Menu.Item>
          </Menu>
        </Header>
        <Content style={{ padding: '0 50px' }}>
          <div className="site-layout-content">
            <Switch>
              <Route exact path="/">
                <Home />
              </Route>
              <Route path="/about">
                <About />
              </Route>
            </Switch>
          </div>
        </Content>
      </Layout>
    </Router>
  );
};

export default App;

启动  

yarn dev

打包 

yarn vite build #生成dist目录

  

 

 

 

标签:react,About,import,App,TS,React,Home,Antd
From: https://www.cnblogs.com/boye169/p/18355513

相关文章

  • Oracle中exists和in的性能差异
    关于exists和inexists关键字和in关键字都能实现外表查询后的结果过滤功能。在SQL语句性能优化方面,建议exists代替in进行子查询,实际上二者分场景进行使用。低效SELECT*FROMEMP(基础表)WHEREEMPNO>0ANDDEPTNOIN(SELECTDEPTNOFROMDEPTWHERELOC='MELB')高效SE......
  • 提升SEO与网站可爬性 :动态生成sitemaps和robots.txt文件
    本文由ChatMoney团队出品在现代Web开发中,搜索引擎优化(SEO)是网站成功的关键因素之一。搜索引擎通过网络爬虫来索引网页,而sitemaps和robots.txt文件则是帮助这些爬虫更好地理解和索引网站内容的重要工具。sitemaps简介Sitemap(站点地图)是一种XML文件,它包含了网站上的所有URL以......
  • 动态生成sitemaps和robots.txt文件:提升SEO与网站可爬性
    本文由ChatMoney团队出品在现代Web开发中,搜索引擎优化(SEO)是网站成功的关键因素之一。搜索引擎通过网络爬虫来索引网页,而sitemaps和robots.txt文件则是帮助这些爬虫更好地理解和索引网站内容的重要工具。sitemaps简介Sitemap(站点地图)是一种XML文件,它包含了网站上的所有URL以......
  • Windows Defender SmartScreen 已阻止启动一个未识别的应用?
    您开发软件(.exe,.cab,.dll,.ocx,.msi,.xpi,.xap等),用户在下载的时候提醒,“WindowsDefenderSmartScreen已阻止启动一个未识别的应用启动,行此应用可能会导致您的电脑存在风险”该怎么解决?一 如何消除提示如果需要消除这一提示,这使用EV代码签名证书对这个软件进行数字签名!其......
  • react-navigation使用redux-saga等处理各种跳转、清除堆栈、返回不同页面的问题
    react-navigation使用redux-saga等处理各种跳转、清除堆栈、返回不同页面的问题名字还是土一点好关注IP属地:上海0.272018.01.2114:26:36字数154阅读4,027一直没有找到有关于 react-navigation 处理app各种不同状态需要默认不同首页的例子,于是只能自己写了。整个......
  • React Router v6 使用指南
    ReactRouterv6使用指南杭州程序员张张 2020-08-19阅读 7 分钟19 本文首发于公众号《前端全栈开发者》,第一时间阅读最新文章,会优先两天发表新文章。关注后私信回复:大礼包,送某网精品视频课程网盘资料,准能为你节省不少钱!在本教程中,让我们看一下......
  • React Router 6 (React路由) 最详细教程
    ReactRouter6(React路由)最详细教程蒋川 2022-03-29阅读 5 分钟3 ReactRouter 经历多个版本的发展,现在已经到了 ReactRouter6。虽然网络上写React-Router路由本身的教程很多,但真正讲到React-Router6的并不多。同时因为第6版引......
  • 07-react应用-组件化编码
    目录样式模块化功能界面的组件化编码流程(通用)案例总结todoList案例相关知识点样式模块化//样式模块化index.module.cssimporthellofrom'./index.module.css'divclassName={hello.title}功能界面的组件化编码流程(通用)拆分组件:拆分界面,抽取组件实......
  • SciTech-Mathematics-Probability+Statistics-7 Key Statistics Concepts
    7KeyStatisticsConceptsEveryDataScientistMustMasterBYBALAPRIYACPOSTEDONAUGUST9,2024Statisticsisoneofthemust-haveskillsforalldatascientists.Butlearningstatisticscanbequitethetask.That’swhyweputtogetherthisguidetoh......
  • docker之pull失败。error pulling image configuration: download failed after attem
    一、问题描述docker部署完成后,想pull项目,但是就是报错:errorpullingimageconfiguration:downloadfailedafterattempts=6:dialtcp108.160.170.26:443:connect:connectionrefused, 更奇葩的是执行dockersearchhello-world是可以的。二、解决问题1)问题分析:看报......