Déployer une application React à l'aide de KendoReact et Netlify

Dans cet article, nous apprenons à utiliser l'assistant de modèle d'interface utilisateur Kendo pour créer une nouvelle application React, créer un composant de type Airbnb et le déployer sur Netlify.

Prérequis

Cet article convient à tous les niveaux. d'expertise en utilisant React.js, y compris les débutants. Cet article promet de décomposer les concepts aussi simplement que possible.

Pour pouvoir suivre la démonstration de cet article, vous devez avoir :

• Visual Studio Code installé comme environnement de développement intégré
• Un compte GitHub , que vous pouvez configurer ici si vous n'en avez pas déjà un
• Un compte Netlify, de préférence lié à votre GitHub
• Connaissance pratique du système de fichiers du framework React à un niveau débutant[19659006] Familiarité avec le rendu dans React (celui-ci est un plus mais pas une exigence)

Ce que nous allons construire

En plongeant, nous allons créer le composant d'application KendoBnB, puis le publier à l'aide de Netlify.

Mise en route

Nous allons passer par le processus de configuration l'environnement de développement. Ouvrez votre application VS Code, accédez à l'onglet extensions et recherchez "Kendo UI Template Wizard".

L'équipe Kendo UI est très passionnée par le fait de s'assurer que vous créez des applications Web accessibles qui évoluent facilement à l'aide de la bibliothèque Kendo UI, et cela les a poussés à créer cette extension super utile pour échafauder votre application. Il s'agit d'une interface graphique qui en vaut vraiment la peine, en particulier pour les débutants.

Remarque : KendoReact est une bibliothèque de composants d'interface utilisateur commerciale, et dans le cadre de cela, vous devrez fournir une clé de licence lorsque vous utilisez les composants dans votre Réagir aux projets. Vous pouvez obtenir une clé de licence via un essai gratuit ou en possédant une licence commerciale. Pour plus d'informations, vous pouvez vous rendre sur la page KendoReact Licensing.

Configuration d'une nouvelle application

Maintenant que l'assistant de modèle est installé dans votre code VS, vous devez redémarrer l'application. puis ouvrez la palette de commandes. Allez dans Affichage -> Palette de commandes ou utilisez le raccourci Commande + Maj + P pour Mac ou Ctrl + Maj + P sur un PC. Une zone de saisie apparaîtra dans votre code VS, et recherchez ici l'assistant de modèle d'interface utilisateur Kendo et cliquez sur le bouton de lancement. sélection récemment utilisée. » title= »kendo-ui-template-wizard-launch »/>

Choisissez un nom de projet et saisissez-le dans la case prévue, puis choisissez où exactement sur votre machine vous voulez qu'il se trouve. Après cela, cliquez sur le bouton Suivant.

L'étape suivante consiste à choisir le framework. Pour nous, nous voulons une application React et choisissez donc React.

La prochaine étape consiste à sélectionner une page vierge dans la liste de la grille, du formulaire et des graphiques, car nous allons construire le composant nous-mêmes, puis cliquez sur créer.

La création prendra 3 secondes et votre nouveau projet React est prêt !

Si vous cliquez sur "Ouvrir le projet dans VS Code", vous serez redirigé vers le dossier du projet. Accédez au dossier des composants et supprimez tous les composants se terminant par .jsx, à l'exception du fichier Home.jsx. Nous essayons de créer un composant simple qui n'aura pas besoin d'éléments tels que l'en-tête, le pied de page ou les composants vides.

Votre fichier app.js devrait ressembler à ceci après le nettoyage :

import React {useState} de 'react';
import './App.scss';
import[19659032]{ BrowserRouter as Router, Route } from "react-router-dom";
import Accueil de './components/Home';
fonction App() {
  retour ([19659054]<Router>
        <div className="content">
          <h1>KendoBnB</h1>
          <Route chemin exact="/" composant={Accueil} />
        </div>
    </ Router>
  );
}
export default App;

La seule route que nous avons spécifiée est la route d'accueil. La prochaine chose à faire est d'ouvrir le terminal dans le nouveau fichier de projet et d'exécuter cette commande pour installer toutes les dépendances nécessaires :

npm install

Nous allons maintenant utiliser deux composants importants de l'interface utilisateur KendoReact pour créer notre composant KendoBnB : le composant React Card et le composant React Dialog.

Le composant KendoReact Card

Le composant KendoReact Card génère un balisage accessible et facile à styliser. Il est destiné à être utilisé aussi facilement que tout autre composant, qu'il s'agisse du vôtre ou d'une partie d'une bibliothèque de composants d'interface utilisateur. La carte comporte plusieurs éléments configurables, notamment l'en-tête, le titre, le sous-titre, le corps, l'action, le pied de page et l'image. la manière la plus accessible dans votre composant. Les boîtes de dialogue communiquent des informations spécifiques et invitent les utilisateurs à effectuer des actions spécifiques en interagissant avec une boîte de dialogue modale. Le composant React Dialog fait partie de la bibliothèque KendoReact de composants d'interface utilisateur. Il est distribué via npm sous le package @progress/kendo-react-dialogs.

The Home Component

Maintenant à la maison composant pour lier les choses ensemble. Remplacez le contenu du fichier home.jsx par le bloc de code ci-dessous :

import * as React from 'react';
import[19659063]* as ReactDOM from 'react-dom';
import { Dialog, DialogActionsBar  } de '@progress/kendo-react-dialogs';
import { Card, CardHeader, CardTitle , CardBody, CardActions, CardImage, CardSubtitle } from '@progress/kendo-react -layout';
class Home s'étend React.Component {
    état = {
        visible: false
    };
    
    toggleDialog = () => {
        this. setState({
            visible :  !ceci.état.visible
        });
    }
    rendu() {
        return (
          <div[19659137]style={{ display: 'flex', justifierContent: 'space-evenly'[19659032]}}>
            {}
            <div>
            {ceci.état.visible && <Dialog title={"Veuillez confirmer"} onClose[19659138]={this.toggleDialog}>
              <p style={ { margin: "25px", textAlign: "center" }} >Voulez-vous continuer payer avec Paypal?</p>
              <DialogActionsBar>
                <button className="k-button" onClick={this[19659035].toggleDialog}>Non</bouton>
                <button className="k-button" onClick={this[19659035].toggleDialog}>Oui</bouton>
              </DialogActionsBar>
            </Dialogue>}
          </div>
             <div style={{largeur: '45%'}} >
              <Carte>
                <CardImage src="https://wander-lush.org/wp-content/uploads/2021/01/Medellin-Airbnb-Penthouse-in -Laureles.jpg" />
                <div>
                  <En-tête de carte>
                  <h1 CardTitle={true}>Confortable 1 Chambre Condo Downtown[19659193]</h1>
                    <div CardSubtitle={true}>
                      <span className="avis">
                        <span className="k-icon ki-star" style={[19659035]{ couleur: '#ffce2a' }} />
                        <span className="k-icon ki-star" style={[19659035]{ couleur: '#ffce2a' }} />
                        <span className="k-icon ki-star" style={[19659035]{ couleur: '#ffce2a' }} />
                        <span className="k-icon ki-star" style={[19659035]{ couleur: '#ffce2a' }} />
                        <span className="k-icon k-i-star-outline" />
                        <div>$200/nuit (3 nuits min.)[19659178]</div>
                      </span>
                    </div>
                  </En-tête de carte>
                  <Corps de la carte>
                    <p>Le bon endroit pour être si vous êtes in NYC, il vient  avec une piscine, un accès wifi et un parking gratuit où vous pourrez également fumer et faire la fête avec des amis.
                    </p>
                  </CardBody>
                  <Actions de carte>
                  <button className="k-button k-primary k-flat" onClick= {this.toggleDialog}>Réserver maintenant</bouton>
                  </Actions de carte>
                </div>
              </Carte>
            </div>
            <div style={{largeur: '45%'}}>[19659166]<Carte>
                <CardImage src="https://media.cntraveler.com/photos/5e9907c14ab09800086faf63/master/pass/airbnb-view-37143825.jpg" />
                <div>
                  <En-tête de carte>
                  <h1 CardTitle={true}>Appartement au sous-sol anglais moderne</ h1>
                    <div CardSubtitle={true}>
                      <span className="avis">
                        <span className="k-icon ki-star" style={[19659035]{ couleur: '#ffce2a' }} />
                        <span className="k-icon ki-star" style={[19659035]{ couleur: '#ffce2a' }} />
                        <span className="k-icon ki-star" style={[19659035]{ couleur: '#ffce2a' }} />
                        <span className="k-icon ki-star" style={[19659035]{ couleur: '#ffce2a' }} />
                        <span className="k-icon k-i-star-outline" />
                        <div>$200/nuit (3 nuits min.)[19659178]</div>
                      </span>
                    </div>
                  </En-tête de carte>
                  <CardBody>
                    <p>Le bon endroit pour être si vous êtes in NYC, il vient  avec une piscine, un accès wifi et un parking gratuit où vous pourrez également fumer et faire la fête avec des amis.
                    </p>
                  </CardBody>
                  <Actions de carte>
                    <button className="k-button k-primary k-flat" onClick= {this.toggleDialog}>Réserver maintenant</bouton>
                  </Actions de carte>
                </div>
              </Carte>
            </div>
          </ div>
        )
    }
}
export default Home;

Vous voyez les deux éléments de carte et nous avons initialisé la fonction d'état pour la bascule pour l'élément de dialogue et la carte. Le fichier App.js dans le dossier racine doit ressembler à ceci :

import React, {useState} from 'react'[19659035];
import './App.scss';
import { BrowserRouter as Router, Route } de "react-router-dom";
import Home from './components/Home';
fonction  App() {
  return (
    <Router>
        <div className=[19659056]"content">
          <h2 style={{ display: 'flex', justifierContent: 'space-evenly' }}>KendoBnB</h2>
          < Itinéraire exact chemin="/" composant={Home} />
        </ div>
    </Router>
  );
}
export default App;[19659074]Vous pouvez voir que les autres routes et leurs importations ont été supprimées de ce fichier, alors assurez-vous de le faire aussi pour éviter les erreurs. Si vous exécutez l'application sur le serveur de développement :
npm start
Vous obtiendrez ceci :
Déploiement de l'application
Maintenant que l'application fonctionne comme vous le souhaitez. , pour préparer l'application à la production, exécutez cette commande :
npm run build
Cela réduira tous les fichiers nécessaires au déploiement d'une application en production. Vous remarquerez un nouveau dossier appelé « build » dans le projet. Ouvrez l'application Netlify ici. Connectez-vous à votre compte gratuit et cliquez sur Sites.
Vous verrez une liste des sites que vous avez déployés à l'aide de la plate-forme, ou si vous êtes nouveau, vous n'y verrez aucun projet. Faites défiler la liste et vous verrez une section glisser-déposer.
 Faites glisser le dossier de construction dans cet espace et le tour est joué ! Votre application est publiée.
Conclusion
Ceci a été une introduction au démarrage d'une nouvelle application React, en utilisant les composants de l'interface utilisateur KendoReact pour créer des composants React, puis en déployant l'application gratuitement à l'aide de Netlify. Vous pouvez désormais créer plus de produits avec KendoReact et Netlify. Bon piratage !