Application mobile: Utilisation dans create-react-app – Ant Design

Installation et initialisation#

Avant de commencer, vous devrez peut-être installer du fil.

$ yarn create react-app antd-demo



$ npx create-react-app antd-demo

L’outil créera et initialisera automatiquement l’environnement et les dépendances, veuillez essayer de configurer votre paramètre de proxy ou utiliser un autre registre npm si des erreurs réseau se produisent pendant celui-ci.

Puis on rentre à l’intérieur antd-demo et démarrez-le.

$ cd antd-demo
$ yarn start

Ouvrez le navigateur à l’adresse http://localhost:3000/. Il affiche un en-tête indiquant « Welcome to React » sur la page.

Importer et#

Vous trouverez ci-dessous la structure de répertoires par défaut.

├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
└── yarn.lock

Maintenant nous installons antd de fil ou npm.

$ yarn add antd

Modifier src/App.js, importez le composant Button depuis antd.

import React from 'react';
import { Button } from 'antd';
import './App.css';

const App = () => (
  <div className="App">
    <Button type="primary">ButtonButton>
  div>
);

export default App;

Ajouter antd/dist/antd.css Au sommet de src/App.css.

@import '~antd/dist/antd.css';

OK, vous devriez maintenant voir un bouton principal bleu affiché sur la page. Ensuite, vous pouvez choisir n’importe quel composant de antd pour développer votre application. Visitez d’autres workflows de create-react-app dans son Guide de l’utilisateur.

Nous exécutons avec succès des composants antd maintenant, allez créer votre propre application !

Tester avec Jest#

create-react-app livré avec jest intégré. Jest ne prend pas en charge esm modules, et Ant Design les utilise. Afin de tester votre application Ant Design avec Jest, vous devez ajouter ce qui suit à votre package.json :

"jest": {
  "transformIgnorePatterns": [
    "/node_modules/(?!antd|@ant-design|rc-.+?|@babel/runtime).+(js|jsx)$"
  ]
}

Guides avancés#

Dans le monde réel, nous devons généralement modifier la configuration par défaut du pack Web pour des besoins personnalisés tels que des thèmes. Nous pouvons y parvenir en utilisant craco, l’une des solutions de configuration personnalisées de create-react-app.

Installez craco et modifiez le scripts champ dans package.json.

$ yarn add @craco/craco
/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

Créez ensuite un craco.config.js dans le répertoire racine de votre projet pour une redéfinition ultérieure.


module.exports = {
  
};

Personnaliser le thème#

Selon la documentation Customize Theme, nous devons modifier moins de variables via loader comme less-loader. Nous pouvons utiliser craco-less pour y parvenir,

Nous devons d’abord modifier src/App.css à src/App.less, puis importez moins de fichiers à la place.

/* src/App.js */
- import './App.css';
+ import './App.less';
/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';

Puis installez craco-less et modifier craco.config.js comme ci-dessous.

$ yarn add craco-less
const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

En ajoutant modifyVars option de less-loader ici, nous devrions voir un bouton vert affiché sur la page après le redémarrage du serveur maintenant.

Nous fournissons un thème sombre et un thème compact intégrés dans antd, vous pouvez vous référer à Utiliser un thème sombre ou compact.

Vous pouvez également essayer react-app-rewired et personnaliser-cra pour personnaliser la configuration de webpack create-react-app comme craco l’a fait.

éjecter#

Vous pouvez également éjecter votre application à l’aide de l’éjection de fil pour une configuration personnalisée de create-react-app, bien que vous deviez creuser par vous-même.

Sommaire#

Enfin, nous avons utilisé antd avec create-react-app avec succès, le code source de ce guide a été poussé vers create-react-app-antd que vous pouvez cloner et utiliser directement.

Partie suivante, nous allons vous présenter comment utiliser antd dans TypeScript et Umi, continuons !

#Utilisation #dans #createreactapp #Ant #Design