Utiliser KendoReact avec Qwik

Puisque Qwik vous permet d’importer n’importe quel composant React, essayons-le avec KendoReact.

Kendo UI fonctionne bien avec de nombreux frameworks, pas seulement React, Angular, jQuery et Vue. Cependant, saviez-vous que vous pouvez également l’utiliser avec Qwik ? Le framework « reprenable » peut importer n’importe quel composant React et fonctionne bien avec Bibliothèques de l’interface utilisateur React comme KendoReact.

Installation de Qwik

Tout d’abord, créez une nouvelle application Qwik.

npm create qwik@latest

Ensuite, ajoutez react pour la compatibilité.

npm run qwik add react

Dépendances ajoutées

{
  "dependencies": {
    "@builder.io/qwik-react": "0.5.0",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

Ajout du plugin React

// vite.config.ts
import { qwikReact } from '@builder.io/qwik-react/vite';
export default defineConfig({
  plugins: [qwikReact()]
});

Installation de KendoReact

Vous configurez KendoReact de la même manière qu’une application React ou Next.js.

1. Obtenez un Clé de licence pour l’interface utilisateur de React Kendo
2. Téléchargez le kendo-ui-license.txt et placez-le à la racine de votre projet.
3. Si vous utilisez Git, assurez-vous de l’ajouter au fichier .gitignore déposer.
4. Installez le package d’activation.

 npm i -D @progress/kendo-licensing

5. Activez votre licence.

npx kendo-ui-license activate

6. Installez les composants KendoReact que vous souhaitez utiliser. Voici un Exemple de graphiques.

npm i -D @progress/kendo-react-charts @progress/kendo-drawing @progress/kendo-react-intl @progress/kendo-react-layout @progress/kendo-react-progressbars @progress/kendo-svg-icons @progress/kendo-licensing hammerjs

Remarquez que j’installe les packages sur devDependencesmême si cela n’a vraiment pas d’importance.

7. Spécifier react JSX en haut du composant React .tsx fichiers que vous importez.

/** @jsxImportSource react */

☢️ Très important pour que cela fonctionne !

Création du composant

Vous souhaitez créer un composant pour l’intégration React. Le Réagir au MUI l’exemple aime le integrations répertoire, utilisons donc le sous-répertoire kendo.

/** @jsxImportSource react */

import { qwikify$ } from "@builder.io/qwik-react";
import { Chart, ChartSeries, ChartSeriesItem } from "@progress/kendo-react-charts";

export const KendoChart = qwikify$(() => {
    const data = [1, 2, 3, 5, 8, 13];
    return (
        <div>
            <Chart>
                <ChartSeries>
                    <ChartSeriesItem data={data} name="Fibonacci" />
                </ChartSeries>
            </Chart>
        </div>
    );
});

Notez que nous importons le qwikify$ fonction au lieu du component$ fonction. Cette fonction compile comme par magie le composant dans React, vous permettant de l’utiliser dans Qwik.

Remarques

• Chaque composant Qwik est un composant React isolé. Pour avoir du sens, vous souhaitez regrouper autant de composants React que possible en un seul. qwickify$ déclaration. Cela évitera de surcharger le compilateur de l’application React.
• Bien que des techniques d’hydratation partielle soient possibles, ces composants perdent leur capacité de reprise, ce qui rend Qwik incroyablement rapide.
• Ne mélangez pas React et Qwik dans le même fichier.

Possibilités

Vous pouvez également ajouter une technique d’hydratation en vol stationnaire.

export const KendoChart = qwikify$(() => {
    const data = [1, 2, 3, 5, 8, 13];
    return (
        <div>
            <Chart>
                <ChartSeries>
                    <ChartSeriesItem data={data} name="Fibonacci" />
                </ChartSeries>
            </Chart>
        </div>
    );
}, { eagerness: 'hover' });

Le { eagerness: 'hover' } L’option téléchargera les données lorsqu’un utilisateur survole le composant. Ce sera l’ensemble du composant React lui-même.

Utilisation du composant

Importez le composant comme vous le feriez pour n’importe quel autre composant Qwik.

import { component$ } from "@builder.io/qwik";
import { KendoChart } from "~/integrations/kendo/chart";

export default component$(() => {

    return <KendoChart client:visible />;

});

📝 Remarquez que vous devez ajouter client:visible si le composant est interactif. Vous pouvez également utiliser client:load, client:idle, client:hover, client:signal, client:event et client:only pour une hydratation fine.

Communication

• Vous pouvez communiquer entre les composants en partageant un signal entre eux.
• Vous pouvez également utiliser accueillir des auditeurs. Il s’agit de la même technologie que vous pourriez voir dans les composants Web créés à partir de différents frameworks ou bibliothèques. Utilisez le host: préfixe.

Déploiement

Vous pouvez utiliser un Adaptateur Qwik pour déployer votre application. Assurez-vous d’ajouter Kendo UI aux variables d’environnement de votre serveur cloud.

KENDO_UI_LICENSE=...YOUR_KEY_HERE...

Dépôt : GitHub
Démo : Vercel Bord

Très facile.

Pour en savoir plus sur l’intégration de Qwik React, consultez Qwik Réagir.

KendoReact est livré avec un essai gratuit de 30 jours, alors essayez-le dès aujourd’hui !

Essayez KendoReact