React é uma estrutura de desenvolvimento JavaScript lançada pelo Facebook para construir interfaces de usuário. É usado principalmente para construir UIs, facilitando a criação de UIs interativas. Ant Design é um componente de UI desenvolvido pela equipe Alibaba Ant Financial baseado em React. É usado principalmente para sistemas intermediários e back-end. Ele é construído usando TypeScript e fornece um arquivo de definição de tipo completo.
O ambiente operacional deste tutorial: sistema Windows7, versão react18, computador Dell G3.
O que é reagir?
React é uma biblioteca JavaScript usada para construir interfaces de usuário. Originou-se de um projeto interno do Facebook. Como a empresa não estava satisfeita com todos os frameworks JavaScript MVC do mercado, decidiu escrever o seu próprio para construir o site do Instagram. Depois de fazê-lo, descobri que esse conjunto de coisas é muito útil, por isso foi aberto em maio de 2013.
React é uma biblioteca JavaScript declarativa, eficiente e flexível para construção de interfaces de usuário. Usando o React, você pode combinar trechos de código curtos e independentes em interfaces de UI complexas. Esses trechos de código são chamados de "componentes".
Porque a ideia de design do React é extremamente única, é uma inovação revolucionária, tem excelente desempenho e a lógica do código é muito simples. Portanto, mais e mais pessoas estão começando a prestar atenção e usá-lo, pensando que pode ser a ferramenta principal para o desenvolvimento da Web no futuro.
React é uma biblioteca JavaScript de código aberto que fornece visualizações de dados renderizados em HTML. As visualizações React normalmente são renderizadas usando componentes que contêm outros componentes especificados na marcação HTML personalizada. O React fornece aos programadores um modelo no qual os componentes filhos não podem afetar diretamente os componentes externos, atualizações eficientes em documentos HTML quando os dados são alterados e separação clara entre componentes em aplicativos modernos de página única.
O React facilita muito a criação de UI interativa. Projete visualizações concisas para cada estado do seu aplicativo para que o React possa atualizar e renderizar componentes de maneira eficiente e correta quando os dados forem alterados. A lógica do componente é escrita em JavaScript em vez de modelos, para que você possa transmitir dados facilmente pelo seu aplicativo e manter o estado separado do DOM.
Características
Design declarativo: O React adota um paradigma declarativo, o que facilita a descrição da aplicação.
Eficiente: React minimiza a interação com o DOM simulando o DOM.
Flexível: o React funciona bem com bibliotecas ou estruturas conhecidas.
JSX: JSX é uma extensão da sintaxe JavaScript. O desenvolvimento do React não usa necessariamente JSX, mas nós o recomendamos.
Componentes: Construir componentes através do React facilita a reutilização de código e pode ser bem aplicado no desenvolvimento de grandes projetos.
Fluxo de dados de resposta unidirecional: o React implementa o fluxo de dados de resposta unidirecional, reduzindo assim o código duplicado, e é por isso que é mais simples do que a vinculação de dados tradicional.
Dominar o React pode não apenas ajudá-lo a lidar com o desenvolvimento de aplicativos front-end, mas suas ideias de programação também podem ser aplicadas ao desenvolvimento de aplicativos nativos React Native e ao desenvolvimento back-end de renderização do lado do servidor. Portanto, esteja você envolvido no desenvolvimento front-end ou não, aprender React será de grande ajuda para o aprimoramento de habilidades e desenvolvimento de carreira.
O que é design de formiga?
Ant Design é um componente de UI desenvolvido pela equipe Alibaba Ant Financial baseado em React. Ele é usado principalmente para sistemas mid e back-end.
Site oficial: https://ant.design/index-cn
característica:
A linguagem interativa e o estilo visual extraídos de produtos intermediários e back-end de nível empresarial.
Componentes React de alta qualidade prontos para uso.
Construído usando TypeScript, fornecendo arquivos completos de definição de tipo.
Sistema de ferramentas de desenvolvimento e design full-link.
Comece
Apresentando Ant Desig
Ant Design é um sistema de design que atende produtos de nível empresarial. A biblioteca de componentes é sua implementação React e é publicada como um pacote npm para desenvolvedores instalarem e usarem.
Você pode usar NPM ou Yarn para desenvolvimento, além de depurar facilmente no ambiente de desenvolvimento, mas também empacotá-lo e implantá-lo com segurança no ambiente de produção, aproveitando os muitos benefícios trazidos por todo o ecossistema e cadeia de ferramentas.
$ npm instalar antd --save$ fio adicionar antdNo umi, você pode abrir o plug-in antd configurando o antd no conjunto de plug-ins umi-plugin-react. O plug-in antd o ajudará a apresentar o antd e implementar a compilação sob demanda.
Configure no arquivo config.js:
exportar padrão { plugins: [ ['umi-plugin-react', { dva: true, // Habilitar função dva antd: true // Habilitar função Ant Design}] ]};Teste suas habilidades
A seguir, começamos a usar componentes antd, tomando como exemplo o componente tabs, endereço: https://ant.design/components/tabs-cn/ Efeito:
Consulte o exemplo oficial, use-o e crie o arquivo MyTabs.js:
importar React de 'react'importar {Tabs} de 'antd'const TabPane = Tabs.TabPane;const callback = (key) => { console.log(key);}class MyTabs estende React.Component { render() { return ( <Tabs defaultActiveKey="1" onChange={callback}> <TabPane tab="Tab 1" key="1">Conteúdo do painel de guias 1</TabPane> <TabPane tab="Tab 2" key="2" >Conteúdo do Painel de Guias 2</TabPane> <TabPane tab="Tab 3" key="3">Conteúdo do Painel de Guias 3</TabPane> </Tabs> ) }}export default MyTabs;Efeito:
Neste ponto, dominamos o uso básico dos componentes antd.