react和AntDesign怎么使用

本文小編為大家詳細(xì)介紹“react和Ant Design怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“react和Ant Design怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營銷網(wǎng)站建設(shè)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十余年品質(zhì)，值得信賴！

react是Facebook推出的一個(gè)用來構(gòu)建用戶界面的JavaScript開發(fā)框架，主要用于構(gòu)建UI，可使創(chuàng)建交互式UI變得輕而易舉。Ant Design是阿里螞蟻金服團(tuán)隊(duì)基于React開發(fā)的ui組件，主要用于中后臺(tái)系統(tǒng)的使用；它它使用TypeScript構(gòu)建，提供完整的類型定義文件。

本教程操作環(huán)境：Windows7系統(tǒng)、react18版、Dell G3電腦。

什么是react？

React是用于構(gòu)建用戶界面的JavaScript庫， 起源于Facebook的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC框架，都不滿意，就決定自己寫一套，用來架設(shè)Instagram的網(wǎng)站。做出來以后，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了。

React 是一個(gè)聲明式，高效且靈活的用于構(gòu)建用戶界面的 JavaScript 庫。使用 React 可以將一些簡短、獨(dú)立的代碼片段組合成復(fù)雜的 UI 界面，這些代碼片段被稱作“組件”。

由于 React的設(shè)計(jì)思想極其獨(dú)特，屬于革命性創(chuàng)新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關(guān)注和使用，認(rèn)為它可能是將來 Web 開發(fā)的主流工具。

React 是一個(gè)為數(shù)據(jù)提供渲染為 HTML 視圖的開源 JavaScript 庫。React 視圖通常采用包含以自定義 HTML 標(biāo)記規(guī)定的其他組件的組件渲染。React 為程序員提供了一種子組件不能直接影響外層組件的模型，數(shù)據(jù)改變時(shí)對(duì) HTML 文檔的有效更新，和現(xiàn)代單頁應(yīng)用中組件之間干凈的分離。

React 使創(chuàng)建交互式 UI 變得輕而易舉。為你應(yīng)用的每一個(gè)狀態(tài)設(shè)計(jì)簡潔的視圖，當(dāng)數(shù)據(jù)改變時(shí) React 能有效地更新并正確地渲染組件。組件邏輯使用 JavaScript 編寫而非模版，因此你可以輕松地在應(yīng)用中傳遞數(shù)據(jù)，并使得狀態(tài)與 DOM 分離。

React 特點(diǎn)

• 聲明式設(shè)計(jì)：React采用聲明范式，可以輕松描述應(yīng)用。

• 高效：React通過對(duì)DOM的模擬，最大限度地減少與DOM的交互。

• 靈活：React可以與已知的庫或框架很好地配合。

• JSX：JSX 是 JavaScript 語法的擴(kuò)展。React 開發(fā)不一定使用 JSX ，但我們建議使用它。

• 組件：通過 React 構(gòu)建組件，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項(xiàng)目的開發(fā)中。

• 單向響應(yīng)的數(shù)據(jù)流： React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單。

掌握 React 不僅可以幫你應(yīng)對(duì)前端應(yīng)用開發(fā)，而且它的編程思想還可以應(yīng)用到 React Native 原生 App 開發(fā)和服務(wù)器端渲染的后端開發(fā)。所以不論你是否從事前端開發(fā)工作，學(xué)習(xí) React 對(duì)技能提升和職業(yè)發(fā)展都有很大的幫助。

什么是Ant Design？

Ant Design是阿里螞蟻金服團(tuán)隊(duì)基于React開發(fā)的ui組件，主要用于中后臺(tái)系統(tǒng)的使用。

特性：

• 提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語言和視覺風(fēng)格。

• 開箱即用的高質(zhì)量 React 組件。

• 使用 TypeScript 構(gòu)建，提供完整的類型定義文件。

• 全鏈路開發(fā)和設(shè)計(jì)工具體系。

開始使用

• 引入Ant Desig

Ant Design 是一個(gè)服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系，組件庫是它的 React 實(shí)現(xiàn)，antd 被發(fā)布為一個(gè) npm 包方便開發(fā)者安裝并使用。

可使用 npm 或 yarn 的方式進(jìn)行開發(fā)，不僅可在開發(fā)環(huán)境輕松調(diào)試，也可放心地在生產(chǎn)環(huán)境打包部署使用，享受整個(gè)生態(tài)圈和工具鏈帶來的諸多好處。

$ npm install antd --save
$ yarn add antd

在 umi 中，你可以通過在插件集 umi-plugin-react 中配置 antd 打開 antd 插件，antd 插件會(huì)幫你引入 antd 并實(shí)現(xiàn)按需編譯。

在con?g.js文件中進(jìn)行配置：

export default {
    plugins: [
        ['umi-plugin-react', {
            dva: true, // 開啟dva功能
            antd: true // 開啟Ant Design功能
        }]
    ]
};

• 小試牛刀

接下來，我們開始使用antd的組件，以tabs組件為例
效果：

參考官方給出的示例，進(jìn)行使用，創(chuàng)建MyTabs.js文件：

import React from 'react'
import {Tabs} from 'antd'

const TabPane = Tabs.TabPane;
const callback = (key) => { console.log(key);
}

class MyTabs extends React.Component {
    render() {
        return (
            <Tabs defaultActiveKey="1" onChange={callback}>
                <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
                <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
                <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
            </Tabs>
        )
    }
}
export default MyTabs;

效果：

讀到這里，這篇“react和Ant Design怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：react和AntDesign怎么使用
鏈接分享：http://bm7419.com/article42/jcsjec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、用戶體驗(yàn)、做網(wǎng)站、自適應(yīng)網(wǎng)站、響應(yīng)式網(wǎng)站、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)