Maison interface Web Questions et réponses frontales Qu'est-ce que réagir ? Qu'est-ce que la conception de fourmis ?

Qu'est-ce que réagir ? Qu'est-ce que la conception de fourmis ?

Jul 13, 2022 pm 06:17 PM
react ant design

react est un framework de développement JavaScript lancé par Facebook pour créer des interfaces utilisateur. Il est principalement utilisé pour créer des interfaces utilisateur, ce qui facilite la création d'interfaces utilisateur interactives. Ant Design est un composant d'interface utilisateur développé par l'équipe Alibaba Ant Financial basé sur React. Il est principalement utilisé pour les systèmes middle et back-end. Il est construit à l'aide de TypeScript et fournit un fichier de définition de type complet.

Qu'est-ce que réagir ? Qu'est-ce que la conception de fourmis ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version React18, ordinateur Dell G3.

Qu'est-ce que réagir ?

React est une bibliothèque JavaScript utilisée pour créer des interfaces utilisateur. Elle est née d'un projet interne de Facebook. Parce que l'entreprise n'était pas satisfaite de tous les frameworks JavaScript MVC du marché, elle a décidé d'en écrire un pour construire le. Site Internet. Après l'avoir réalisé, j'ai trouvé que cet ensemble de choses était très utile, c'est pourquoi il est devenu open source en mai 2013.

React est une bibliothèque JavaScript déclarative, efficace et flexible pour créer des interfaces utilisateur. React vous permet de combiner des extraits de code courts et indépendants dans des interfaces utilisateur complexes. Ces extraits de code sont appelés « composants ».

Parce que l'idée de conception de React est extrêmement unique, il s'agit d'une innovation révolutionnaire, offre des performances exceptionnelles et la logique du code est très simple. Par conséquent, de plus en plus de gens commencent à y prêter attention et à l’utiliser, pensant qu’il pourrait devenir l’outil principal de développement Web à l’avenir.

React est une bibliothèque JavaScript open source qui fournit des vues HTML pour les données. Les vues React sont généralement rendues à l'aide de composants contenant d'autres composants spécifiés dans des balises HTML personnalisées. React fournit aux programmeurs un modèle dans lequel les composants enfants ne peuvent pas affecter directement les composants externes, des mises à jour efficaces des documents HTML lorsque les données changent et une séparation nette entre les composants dans les applications modernes d'une seule page.

React facilite la création d'une interface utilisateur interactive. Concevez des vues concises pour chaque état de votre application afin que React puisse mettre à jour et restituer efficacement les composants lorsque les données changent. La logique des composants est écrite en JavaScript plutôt qu'en modèles, vous pouvez donc facilement transmettre des données dans votre application et conserver un état séparé du DOM.

Caractéristiques de React

  • Conception déclarative : React adopte un paradigme déclaratif, qui facilite la description des applications.

  • Efficace : React minimise les interactions avec le DOM en simulant le DOM.

  • Flexible : React fonctionne bien avec des bibliothèques ou des frameworks connus.

  • JSX : JSX est une extension de la syntaxe JavaScript. JSX n'est pas requis pour le développement de React, mais il est recommandé.

  • Composants : la création de composants via React facilite la réutilisation du code et peut être bien appliquée dans le développement de grands projets.

  • Flux de données de réponse unidirectionnelle : React implémente un flux de données de réponse unidirectionnelle, réduisant ainsi le code en double, c'est pourquoi il est plus simple que la liaison de données traditionnelle.

Maîtriser React peut non seulement vous aider à gérer le développement d'applications frontales, mais ses idées de programmation peuvent également être appliquées au développement back-end du développement d'applications natives React Native et au rendu côté serveur. Ainsi, que vous soyez engagé dans le développement front-end ou non, l'apprentissage de React vous sera d'une grande aide pour améliorer vos compétences et votre évolution de carrière.

Qu'est-ce que Ant Design ?

Ant Design est un composant d'interface utilisateur développé par l'équipe Alibaba Ant Financial basé sur React. Il est principalement utilisé pour l'utilisation de systèmes mid-end et back-end.

Site officiel : https://ant.design/index-cn

Quest-ce que réagir ? Quest-ce que la conception de fourmis ?


Caractéristiques :

  • Extrait du langage interactif et du style visuel des entreprises de niveau intermédiaire et les produits back-end.

  • Composants React de haute qualité prêts à l'emploi.

  • Construit en utilisant TypeScript, fournissant des fichiers de définition de type complets.

  • Système d'outils de développement et de conception à lien complet.

Démarrez

  • Présentation d'Ant Design

Ant Design est un système de conception qui sert des produits au niveau de l'entreprise. La bibliothèque de composants est son implémentation React et est publiée sous forme de package npm pour plus de commodité. des développeurs. Installer et utiliser.

Vous pouvez utiliser npm ou Yarn pour le développement. Non seulement vous pouvez facilement déboguer dans l'environnement de développement, mais vous pouvez également le conditionner et le déployer en toute sécurité dans l'environnement de production, en profitant des nombreux avantages apportés par l'ensemble de l'écosystème et de la chaîne d'outils.

$ npm install antd --save
$ yarn add antd
Copier après la connexion

Dans umi, vous pouvez ouvrir le plug-in antd en configurant antd dans l'ensemble de plug-ins umi-plugin-react. Le plug-in antd vous aidera à introduire antd et à implémenter la compilation à la demande.

Configurez dans le fichier config.js :

export default {
    plugins: [
        ['umi-plugin-react', {
            dva: true, // 开启dva功能
            antd: true // 开启Ant Design功能
        }]
    ]
};
Copier après la connexion
  • Essayez-le

Ensuite, nous commençons à utiliser les composants antd, en prenant le composant tabs comme exemple, adresse : https://ant.design/components / tabs-cn/
Effect:

Quest-ce que réagir ? Quest-ce que la conception de fourmis ?

Référez-vous à l'exemple officiel, utilisez-le, créez le fichier 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;
Copier après la connexion

Effet:

Quest-ce que réagir ? Quest-ce que la conception de fourmis ?

À ce stade, nous maîtrisons l'utilisation de base des composants antd.

【Recommandations associées : Tutoriel vidéo Redis

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment créer une application de chat en temps réel avec React et WebSocket Comment créer une application de chat en temps réel avec React et WebSocket Sep 26, 2023 pm 07:46 PM

Comment créer une application de chat en temps réel à l'aide de React et WebSocket Introduction : Avec le développement rapide d'Internet, la communication en temps réel a attiré de plus en plus d'attention. Les applications de chat en direct font désormais partie intégrante de la vie sociale et professionnelle moderne. Cet article expliquera comment créer une application simple de chat en temps réel à l'aide de React et WebSocket, et fournira des exemples de code spécifiques. 1. Préparation technique Avant de commencer à créer une application de chat en temps réel, nous devons préparer les technologies et outils suivants : React : un pour la construction

Guide pour la séparation du front-end et du back-end de React : Comment réaliser le découplage et le déploiement indépendant du front-end et du back-end Guide pour la séparation du front-end et du back-end de React : Comment réaliser le découplage et le déploiement indépendant du front-end et du back-end Sep 28, 2023 am 10:48 AM

Guide de séparation front-end et back-end de React : Comment réaliser un découplage front-end et back-end et un déploiement indépendant, des exemples de code spécifiques sont nécessaires Dans l'environnement de développement Web actuel, la séparation front-end et back-end est devenue une tendance. En séparant le code front-end et back-end, le travail de développement peut être rendu plus flexible, plus efficace et faciliter la collaboration en équipe. Cet article expliquera comment utiliser React pour réaliser une séparation front-end et back-end, atteignant ainsi les objectifs de découplage et de déploiement indépendant. Tout d’abord, nous devons comprendre ce qu’est la séparation front-end et back-end. Dans le modèle de développement Web traditionnel, le front-end et le back-end sont couplés

Comment créer des applications Web simples et faciles à utiliser avec React et Flask Comment créer des applications Web simples et faciles à utiliser avec React et Flask Sep 27, 2023 am 11:09 AM

Comment utiliser React et Flask pour créer des applications Web simples et faciles à utiliser Introduction : Avec le développement d'Internet, les besoins des applications Web deviennent de plus en plus diversifiés et complexes. Afin de répondre aux exigences des utilisateurs en matière de facilité d'utilisation et de performances, il devient de plus en plus important d'utiliser des piles technologiques modernes pour créer des applications réseau. React et Flask sont deux frameworks très populaires pour le développement front-end et back-end, et ils fonctionnent bien ensemble pour créer des applications Web simples et faciles à utiliser. Cet article détaillera comment exploiter React et Flask

Comment créer une application de messagerie fiable avec React et RabbitMQ Comment créer une application de messagerie fiable avec React et RabbitMQ Sep 28, 2023 pm 08:24 PM

Comment créer une application de messagerie fiable avec React et RabbitMQ Introduction : Les applications modernes doivent prendre en charge une messagerie fiable pour obtenir des fonctionnalités telles que les mises à jour en temps réel et la synchronisation des données. React est une bibliothèque JavaScript populaire pour créer des interfaces utilisateur, tandis que RabbitMQ est un middleware de messagerie fiable. Cet article explique comment combiner React et RabbitMQ pour créer une application de messagerie fiable et fournit des exemples de code spécifiques. Présentation de RabbitMQ :

Comment créer une application d'analyse de données rapide à l'aide de React et Google BigQuery Comment créer une application d'analyse de données rapide à l'aide de React et Google BigQuery Sep 26, 2023 pm 06:12 PM

Comment utiliser React et Google BigQuery pour créer des applications d'analyse de données rapides Introduction : À l'ère actuelle d'explosion de l'information, l'analyse des données est devenue un maillon indispensable dans diverses industries. Parmi eux, créer des applications d’analyse de données rapides et efficaces est devenu l’objectif poursuivi par de nombreuses entreprises et particuliers. Cet article explique comment utiliser React et Google BigQuery pour créer une application d'analyse rapide des données et fournit des exemples de code détaillés. 1. Présentation React est un outil pour créer

Guide de débogage du code React : Comment localiser et résoudre rapidement les bogues frontaux Guide de débogage du code React : Comment localiser et résoudre rapidement les bogues frontaux Sep 26, 2023 pm 02:25 PM

Guide de débogage du code React : Comment localiser et résoudre rapidement les bogues frontaux Introduction : Lors du développement d'applications React, vous rencontrez souvent une variété de bogues qui peuvent faire planter l'application ou provoquer un comportement incorrect. Par conséquent, maîtriser les compétences de débogage est une capacité essentielle pour tout développeur React. Cet article présentera quelques techniques pratiques pour localiser et résoudre les bogues frontaux, et fournira des exemples de code spécifiques pour aider les lecteurs à localiser et à résoudre rapidement les bogues dans les applications React. 1. Sélection des outils de débogage : In Re

Guide de l'utilisateur de React Router : Comment implémenter le contrôle de routage frontal Guide de l'utilisateur de React Router : Comment implémenter le contrôle de routage frontal Sep 29, 2023 pm 05:45 PM

Guide de l'utilisateur de ReactRouter : Comment implémenter le contrôle du routage frontal Avec la popularité des applications monopage, le routage frontal est devenu un élément important qui ne peut être ignoré. En tant que bibliothèque de routage la plus populaire de l'écosystème React, ReactRouter fournit des fonctions riches et des API faciles à utiliser, rendant la mise en œuvre du routage frontal très simple et flexible. Cet article expliquera comment utiliser ReactRouter et fournira quelques exemples de code spécifiques. Pour installer ReactRouter en premier, nous avons besoin

Guide de conception réactive React : Comment obtenir des effets de mise en page front-end adaptatifs Guide de conception réactive React : Comment obtenir des effets de mise en page front-end adaptatifs Sep 26, 2023 am 11:34 AM

Guide de conception réactive React : Comment obtenir des effets de mise en page front-end adaptatifs Avec la popularité des appareils mobiles et la demande croissante des utilisateurs pour des expériences multi-écrans, la conception réactive est devenue l'une des considérations importantes dans le développement front-end moderne. React, en tant que l'un des frameworks front-end les plus populaires à l'heure actuelle, fournit une multitude d'outils et de composants pour aider les développeurs à obtenir des effets de mise en page adaptatifs. Cet article partagera quelques directives et conseils sur la mise en œuvre d'une conception réactive à l'aide de React, et fournira des exemples de code spécifiques à titre de référence. Fle en utilisant React

See all articles