Dans ce deuxième article de la série Prise en main de KendoReact Eric Bishard vous aide à mieux comprendre KendoReact pour vous permettre de créer des applications plus robustes. Découvrez ce que KendoReact peut faire pour vous, développeur de React!

Retour à la Premier message de la série.

Pt 2. Création d'applications robustes avec KendoReact

La première chose que nous ayons trouvée. re va faire aujourd'hui est utiliser create-react-app . Ensuite, nous localiserons les composants que nous allons utiliser sur le site de KendoReact et les installerons à l'aide du gestionnaire de paquets de noeuds.

Nous installerons également le thème par défaut de Kendo . .

Nous avons d'abord créé le projet à l'aide de create-react-app. Si vous débutez avec l'application Créer React, consultez cet article. En savoir plus . Sinon, ouvrons notre terminal et installons-le globalement (si nécessaire):

 npm installer create-react-app -g 

Une fois installé, vous pouvez exécuter create-react-app à tout moment, faisons exactement cela.

 créer-réagir-application kendo-react 

Nous allons principalement travailler dans le répertoire src . Rappelez-vous que vous pouvez toujours vous référer au; Pour plus d’informations sur tous les composants, consultez la documentation de KendoReact Pour ce projet, nous allons travailler avec les boutons DropDo Composants de la grille de NumericTextBox et .

Commençons par installer les boutons. Nous voyons que dans la Documentation des boutons nous avons une section Installation qui nous permet de savoir comment commencer. Nous devons juste installer la bibliothèque de boutons avec npm en lançant:

 npm install @ progress / kendo-react-buttons 

. Le paquet sera ainsi sauvegardé dans le paquet .json du projet et dans tous les paquets Kendo. suivez la même convention de nommage:

 npm install @ progress / kendo-react-  

Maintenant, installons le reste des packages dont nous avons besoin: DropDowns, NumericTextBoxes ainsi que le package d'internationalisation requis pour les fonctionnalités de globalisation des composants KendoReact.

 npm install @ progress / kendo-react-grid @ progress / kendo-data-query @ progress / kendo-réact-entrées @ progress / kendo-react-intl @ progress / kendo-react-dropdowns @ progress / kendo-react-dateinputs @ progress / kendo-react-pdf @ progress / kendo-drawing 

Nous pouvons maintenant parler du thème. Afin d'obtenir un style moderne et agréable, nous devons installer l'un des de ces thèmes . Pour ce projet, nous ne procéderons à aucune personnalisation en CSS, nous nous baserons uniquement sur le style du thème. Si vous souhaitez personnaliser, vous pouvez utiliser le Progress Theme Builder . Ce générateur vous permet de personnaliser votre thème pour n’importe quelle bibliothèque de composants Kendo UI. Vous pouvez utiliser Material, Bootstrap ou vos propres paramètres personnalisés en utilisant ces thèmes comme point de départ.

Pour le moment, nous allons simplement installer le thème par défaut. Tout ce que nous allons faire est de lancer:

 npm install @ progress / kendo-theme-default 

Ce paquet est maintenant ajouté à votre package.json et réside également dans votre node_modules et on peut l'inclure dans React avec une simple importation. Ensuite, nous importons le thème CSS dans notre page App.js :

 import '@ progress / kendo-theme-default / dist / all.css'; 

Avant de commencer le Kendo composants, vous pouvez supprimer le contenu de App.css le logo.svg et sa déclaration d'importation au sommet du fichier App.js . Pendant que nous modifions le fichier App.js remplaçons le code HTML (JSX) par le texte suivant:

 
 
 Grille KendoReact 
 

Restez à l'écoute pour le prochain troisième post de la série— il n'est pas encore tout à fait en direct, mais vous pourrez le trouver bientôt!