使用 React + TypeScript 轻松尝试 Ant Design

什么是蚂蚁设计？

Ant Design 是阿里巴巴在中国开发的前端 UI 框架。
它是商业上可用的，并且具有用于 Web 和移动应用程序的庞大组件库。

在日本，MUI比较流行，可能有点黯然失色，
它在海外被广泛使用，尤其是中国公司。

环境

首先安装反应。

 $ npx create-react-app antd-app --template typescript
 

并安装antd。

 $ cd antd-app
$ npm install antd
 

如果安装成功，运行以下命令
Web 服务器将启动，React 的初始屏幕将显示在 http://localhost:3000 。

 $ npm start
 

尝试蚂蚁设计

我们将从 antd 中导入组件以及适用于它们的 css。

  import   {   Button   }   from   '  antd  '  ; 
 import   '  antd/dist/antd.css  '  ; 
 

改写 App.tsx 的内容如下。

  import   React   from   '  react  '  ; 
 import   {   Button  ,   DatePicker  ,   Space   }   from   '  antd  '  ; 
 import   '  antd/dist/antd.css  '  ; 
 import   Typography   from   '  antd/lib/typography/Typography  '  ; 
 import   Title   from   '  antd/lib/typography/Title  '  ; 
 import   Paragraph   from   '  antd/lib/typography/Paragraph  '  ; 

 function   App  ()   { 
   return   ( 
     <  div   style  =  {{  margin  :   "  50px  "  }}  > 
     <  Typography  > 
     <  Title  >  タイトル  <  /Title  >
      <  Paragraph  > 
       こちらは段落です  。 
     <  /Paragraph  >
        <  Space  > 
         <  DatePicker   /> 
         <  Button   type  =  "  primary  "  >  ボタン  <  /Button  >
        <  /Space  >
      <  /Typography  >
      <  /div  >
    ); 
 } 

 export   default   App  ; 
 

如果一切都已成功加载，您应该会看到如下所示的屏幕。

概括

这很容易，不是吗？
提供各种其他组件，
我认为尝试各种事情是好的。

参考

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308629110.html

查看更多关于使用 React + TypeScript 轻松尝试 Ant Design的详细内容...