🚀 Construction de composants React visuellement avec Kodok
En avez-vous assez de construire des composants React de manière traditionnelle ? Voulez-vous construire des composants visuellement époustouflants sans écrire une seule ligne de code ? Ne cherchez pas plus loin que Kodok, le tout nouvel environnement de développement intégré qui vous permet de construire des composants React visuellement.
Qu'est-ce que Kodok ?
Kodok est un nouveau produit révolutionnaire qui vous permet de construire d'abord des composants, ce qui signifie que vous pouvez construire des sites de bas en haut plutôt que de haut en bas. Il prend en charge React, TypeScript, CSS, SASS, les modules CSS et Tailwind CSS. Il dispose d'un IDE visuel, d'un éditeur de code, d'un panneau de style et vous permet d'importer des bibliothèques tierces. Il fait pratiquement tout, sauf vous préparer un café.
Comment fonctionne Kodok ?
Kodok vous permet de construire des composants visuellement sans écrire de lignes de code. Vous pouvez ajouter des éléments HTML tels que des divs, des spans, des images, des vidéos, des formulaires, voire même des composants d'autres parties du projet. Vous pouvez également ajouter des bibliothèques externes telles que Semantic UI.
Lorsque vous double-cliquez sur un élément, vous pouvez voir exactement comment le composant est assemblé et sa structure. Vous pouvez également voir le code source brut et comment le composant est programmé. À droite, vous disposez d'un inspecteur qui vous permet de consulter les propriétés et les styles de chacun des composants.
Construction d'un composant vidéo
Disons que vous souhaitez construire un composant vidéo pour votre projet. Vous pouvez commencer par ajouter une image à la page vide. Vous pouvez changer l'adresse source pour la vignette que vous aimez. Vous pouvez ensuite styliser l'image en ajoutant une classe pour celle-ci. Vous pouvez changer la largeur par défaut pour qu'elle soit de 100 % et changer le rayon de bordure pour avoir 20 pixels autour des coins.
Ensuite, vous pouvez ajouter un bloc div pour le titre et un autre bloc div pour l'auteur et sa photo de profil. Vous pouvez définir le nom de classe pour la photo de profil comme Avatar et mettre la largeur et la hauteur à 64 pixels avec un rayon de bordure de 30 pixels. Pour le div parent, vous pouvez créer une classe appelée author holder et sélectionner le type d'affichage comme Flex. Vous pouvez également sélectionner les éléments alignés au centre et ajouter un peu de padding ou de marge pour l'image ainsi que pour le texte.
Vous pouvez créer un style pour le titre et le texte de l'auteur, en définissant une taille de police plus grande pour le titre et un peu plus petite pour le texte de l'auteur. Vous pouvez ensuite redimensionner le cadre pour voir comment il apparaîtrait dans différents affichages et apporter des ajustements mineurs pour qu'il fonctionne dans tous les cas.
Construction d'un tableau de bord
Disons que vous souhaitez construire un tableau de bord pour votre projet. Vous pouvez commencer par ajouter le composant vidéo existant que vous avez créé précédemment. Vous pouvez personnaliser ce composant dans la structure de ce nouveau tableau de bord. Vous pouvez réduire la largeur pour qu'elle soit un peu plus petite, à 480 pixels, afin de pouvoir y voir votre vidéo.
Vous pouvez ajouter un autre composant vidéo et ajouter un espace entre eux d'environ 20 pixels. Vous pouvez également changer l'élément racine pour qu'il soit maintenant un peu plus grand, au lieu de 480 pixels. Vous pouvez ajouter quelques autres composants vidéo, en donnant à chacun sa propre photo de profil, vignette et titre de vidéo.
Ce qui est intéressant maintenant, c'est que vous pouvez double-cliquer sur l'un de ces composants et changer la structure. Par exemple, vous pourriez déplacer un div au-dessus de l'auteur actuel, et la conception mise à jour s'appliquera à tous les autres composants du tableau de bord.
Avantages et inconvénients de Kodok
Avantages :
- Vous permet de construire des composants React visuellement sans écrire de lignes de code
- Prend en charge React, TypeScript, CSS, SASS, les modules CSS et Tailwind CSS
- Dispose d'un IDE visuel, d'un éditeur de code, d'un panneau de style et vous permet d'importer des bibliothèques tierces
- Vous permet de personnaliser les props et de les transmettre au composant supérieur
- Vous permet de construire des sites de bas en haut plutôt que de haut en bas
Inconvénients :
- Encore en version bêta
- Documentation et tutoriels limités disponibles
- Peut ne pas convenir aux projets complexes
Points forts
- Kodok est un nouveau produit révolutionnaire qui vous permet de construire des composants React visuellement.
- Vous pouvez ajouter des éléments HTML, des bibliothèques externes et personnaliser les props.
- Kodok prend en charge React, TypeScript, CSS, SASS, les modules CSS et Tailwind CSS.
- Vous pouvez construire des sites de bas en haut plutôt que de haut en bas.
- Kodok est encore en version bêta et peut ne pas convenir aux projets complexes.
FAQ
Q : Kodok est-il gratuit ?
R : Oui, Kodok est entièrement gratuit.
Q : Quels langages de programmation prend en charge Kodok ?
R : Kodok prend en charge React, TypeScript, CSS, SASS, les modules CSS et Tailwind CSS.
Q : Puis-je personnaliser les props dans Kodok ?
R : Oui, vous pouvez personnaliser les props et les transmettre au composant supérieur.
Q : Kodok convient-il aux projets complexes ?
R : Kodok est encore en version bêta et peut ne pas convenir aux projets complexes.
Ressources
- [Kodok](https://kodok.io/)
- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [SASS](https://sass-lang.com/)
- [CSS Modules](https://github.com/css-modules/css-modules)
- [Tailwind CSS](https://tailwindcss.com/)
