Button react component dans un button

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Button react component dans un button

XaTriX

J'utilise NextJS v14 et PicoCSS ( https://picocss.com/ )

Dans mon header et ma nav j'ai un menu en ul li qui affiche des boutons stylisés grâce à picocss.

J'ai ajouté le support jour/nuit avec Toggle.dev https://toggles.dev/ et un ThemeToggle.js :

Code :

import React, { useState, useEffect } from 'react';
import { Expand } from "@theme-toggles/react";
import "@theme-toggles/react/css/Expand.css";
const ThemeToggle = () => {
const [isMounted, setIsMounted] = useState(false);
const [isDark, setIsDark] = useState(false);
useEffect(() => {
setIsMounted(true);
const theme = localStorage.getItem('theme') || 'light';
setIsDark(theme === 'dark');
document.documentElement.setAttribute('data-theme', theme);
}, []);
const toggleTheme = () => {
const newTheme = isDark ? 'light' : 'dark';
setIsDark(!isDark);
localStorage.setItem('theme', newTheme);
document.documentElement.setAttribute('data-theme', newTheme);
};
if (!isMounted) {
return null;
}
return (
<Expand
duration={750}
toggled={isDark}
toggle={toggleTheme}
style={{ padding: 0, margin: 0 }}
/>
);
};
export default ThemeToggle;

Et pour mon buton de menu:

Code :

<li>
<button className="secondary" data-tooltip="Jour, nuit ?" data-placement="bottom">
<ThemeToggle />
</button>
</li>

ça marche plutôt pas trop mal, j'ai eu des mouises de style avec les bouttons qui partent en couilles et je comprend maintenant :

Expand semble utiliser button quelque part, puis je met button expand dans un button.

Dans la console nav j'ai

hydration-error-info.js:63 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

Suivi de tout le chemin pour remonter.

Donc soit je demande à un LLM de me génerer le code en reprenant la partie HTML et import CSS de toggle.dev soit je trouve comment remonter le style button "secondary" à Expand.

Une ou plusieurs solutions ?

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

Publicité

XaTriX

Hfr n'est plus vivant ?

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

mechkurt

https://www.youtube.com/watch?v=Meb7uaNlcS0

Spoiler :

Désolé mais je n'ai touché 1 semaine à react y'a plusieurs années...

---------------
D3

XaTriX

T'inquiète pas, y'a quelques semaines j'y avais jamais touché

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

XaTriX

Bon en fait c'était simple, j'ai viré le button final puisque c'était lui qui embriquait le bouzin et générait l'avertissement.
A partir de la un div en role button (voir picocss) et finalement je passe les attributs que je veux à Expand qui se comporte comme un button.

Easy [:auldpuck:9]

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

Hypp0

Je ne contracte pas

Salut,

J'ai déjà eu ce souci avec shadcn en imbriquant des composants de type bouton, dans ce cas il faut passer en prop "asChild" sur le parent.

Sinon dans ton cas t'as peut être pas besoin d'imbriquer deux boutons et tu peux le transformer en div.

Message édité par Hypp0 le 25-09-2024 à 17:35:40

XaTriX

Oui c'est ce que j'ai fait, ça marche bien et je n'ai plus les problèmes de CSS que j'avais en amont.

Merci pour l'autre suggestion, je suis encore un gros noob en js/njs/react/nextjs

Message édité par XaTriX le 25-09-2024 à 19:42:46

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

Hypp0

Je ne contracte pas

C'est pas moi qui vais te jeter la pierre, je viens de me mettre à Next récemment, entre les routes, les server actions, les composants serveur, client, le ssr, eslint et ts qui chialent en permanence, putain quel joyeux bordel j'ai l'impression de rien maitriser [:crapulax]

La j'ai une erreur ts, ça fait 30min que je pige pas [:duck69:2]

XaTriX

Ouh là TS je touche pas encore, si c'est pour rajouter une couche de complexité, non merci
Honnêtement j'ai même pas foutu ESlint et Prettier pour éviter de me faire galérer :whistle:

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

Hypp0

Je ne contracte pas

Prettier c'est plutôt pratique et une fois installé t'as pas grand chose à faire.

Et eslint mine de de rien ça reste indispensable (encore que ça dépend de la complexité de ton projet), je crois que serai incapable de coder quoi que ce soit sans ça, même si des fois ça me fait rager, j'essaie cependant ne pas bidouiller les règles

là je me suis forcé à utiliser typescript pour un nouveau projet, car ça fait des mois que je repousse, mais c'est vrai que ça rajoute quand même de la complexité, mais au final ça permet aussi d'éviter bien des erreurs.

Sinon si t'as besoin d'aide sur react / next / tailwind etc. Et l'ecosysteme react de façon plus generale hésite pas, je suis loin d’être un crack mais je connais quelques trucs quand même

Publicité

XaTriX

Je note, je note

J'ai prévu de passer à Prettier & ESlint mais je voulais pas me charger entre la découverte de Next, JS plus grossièrement, PicoCSS, NextAuth, React...

Et il me tarde de tester Tailwind !

J'utilises pas mal de LLM pour générer du code, je sais pas si tu as testé de ton côté mais ça marche pas mal du tout

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

Hypp0

Je ne contracte pas

Talwind :love: depuis que je me suis mis à tailwind, maintenant dès que je dois toucher/lire du css "vanilla" https://www.youtube.com/watch?v=wLg04uu2j2o avant ça j'étais passé par Sass ensuite CSS Modules et styled components, mais tailwind c'est tellement pratique [:cosmoschtroumpf]

Oui j'utilise chat gpt(4o/o1-mini) mais mais je préfère quand même vérifier dans la doc ou stackoverflow quand j’ai un doute car des fois il propose des trucs un peu crado. Surtout quand c'est des techno assez récente genre next 14 etc. il est pas tout le temps à jour

d'ailleurs un très bon plugin que j'utilise avec prettier : https://github.com/tailwindlabs/pre [...] ailwindcss

ça permet d'automatiquement réorganiser les classes tw dans l'ordre recommandé sans avoir à se soucier de ça.

Message édité par Hypp0 le 26-09-2024 à 16:46:05

XaTriX

Ah non ils ont pas à jour (Claude 3.5 aussi), ça date d'un an en arrière donc Next13, difficultés sur les API route, etc. Mais ça te fait 80% du boulot si tu l'orientes bien et j'apprends beaucoup avec :love:

Je note pour le plugin tailwind x prettier :love: faut vraiment que j'y passe, prochain projet je l'utilise !

Message édité par XaTriX le 27-09-2024 à 20:17:02

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

fredo3

Salut

Je me permets de m'immiscer un peu sur ce topic pour une question.

C'est quoi la plus value de Next.js par rapport à react seul?

(Et merci pour Tailwindcss, je ne connaissais pas)

Message cité 1 fois
Message édité par fredo3 le 29-10-2024 à 10:00:53

XaTriX

Je suis noob alors j'ai demandé au LLM o1 preview

Citation :

Next.js est un framework basé sur React qui apporte une multitude de fonctionnalités supplémentaires pour faciliter le développement d'applications web modernes. Voici les principales plus-values de Next.js par rapport à l'utilisation de React seul :

Rendu côté serveur (SSR) et génération statique (SSG) : Next.js permet de rendre les pages côté serveur ou de les générer statiquement lors de la phase de build. Cela améliore les performances initiales de l'application et est bénéfique pour le référencement naturel (SEO) car les moteurs de recherche peuvent indexer facilement le contenu pré-rendu.
Routage automatique basé sur le système de fichiers : Avec Next.js, chaque fichier ajouté dans le dossier pages devient automatiquement une route accessible. Cela simplifie grandement la configuration du routage, éliminant le besoin d'utiliser des bibliothèques tierces comme React Router.
Division automatique du code (Code Splitting) : Next.js optimise le chargement des pages en divisant le code en bundles plus petits qui sont chargés uniquement lorsque nécessaire. Cela réduit le temps de chargement initial et améliore l'expérience utilisateur.
Optimisation des performances : Le framework inclut des optimisations telles que le préchargement automatique des ressources nécessaires, la gestion optimisée des images avec le composant Image, et la prise en charge intégrée de l'internationalisation (i18n).
Système de styles flexible : Next.js supporte nativement les CSS Modules, Sass, et d'autres solutions de stylisation, permettant une gestion aisée des styles avec une portée locale ou globale selon les besoins.
Fonctionnalités API intégrées : Il est possible de créer des API côté serveur directement au sein de l'application Next.js en utilisant le dossier pages/api. Cela simplifie le développement en évitant de configurer un serveur séparé pour les endpoints API.
Support TypeScript : Next.js est compatible avec TypeScript sans configuration supplémentaire, offrant une meilleure gestion des types et une détection des erreurs à la compilation.
Expérience développeur améliorée : Le framework propose un environnement de développement convivial avec le rechargement à chaud (Hot Reloading), des messages d'erreur clairs, et une configuration par défaut optimisée qui réduit le besoin de réglages manuels.
Déploiement simplifié : Next.js est conçu pour être facilement déployé sur des plateformes serverless ou services d'hébergement statique, ce qui facilite la mise en production.
Communauté et écosystème florissants : En étant construit sur React, Next.js bénéficie d'une large communauté de développeurs et d'un écosystème riche en extensions et en outils complémentaires.

En résumé, Next.js apporte une structure et des fonctionnalités prêtes à l'emploi qui permettent de gagner du temps et d'améliorer la qualité des applications web développées. Il résout des problématiques communes rencontrées avec React seul, comme le SEO, le routage, et le rendu côté serveur, tout en conservant la flexibilité et la puissance de React.

Message cité 1 fois

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

fredo3

XaTriX a écrit :

Je suis noob alors j'ai demandé au LLM o1 preview

J'avoue j'ai pas encore ce reflex

mmh pour l'i18n et le routage ca peut être pratique en effet.

Mais j'ai pas l'impression que ce soit très demandé comme framework.
Rarement vu sur des offres d'emploi. Je me trompe?

Message édité par fredo3 le 29-10-2024 à 10:05:48

XaTriX

Je ne sais pas mais je l'ai utilisé parce que c'est souvent utilisé, enfin je crois. J'ai l'impression que les ressources sont conséquentes, en tout cas j'ai voulu utiliser un truc "simple" et plutôt connu parce que j'y connaissais rien à ce language
Pareil avec Tailwind (même si j'utilise PicoCSS), on voit des bootstrap de partout avec NextJS+Tailwind (doit même avoir un npx pour poper les deux d'un coup ?)

Message cité 1 fois

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

Hypp0

Je ne contracte pas

fredo3 a écrit :

Salut

Je me permets de m'immiscer un peu sur ce topic pour une question.

C'est quoi la plus value de Next.js par rapport à react seul?

(Et merci pour Tailwindcss, je ne connaissais pas)

Pour faire simple react c'est une librarie, Next.js c'est un framework.

Si tu utilises juste React "seul" tu seras vite limité et tu vas devoir toi même choisir et ajouter dans ton projet tout un tas de libraires, quel routeur, quel bundler, serveur de dev etc. (ce qui déjà n'est pas une mince affaire).

Mais le gros + de Next c'est de pouvoir faire du backend ce que React seul ne peut pas faire.

Il y a aussi des trucs très intéressants comme le SSR & SSG. L’optimisation des images grâce au composant <Image /> de next (que j'aimais pas au début mais que j'utilise constamment désormais)

Mais c'est bien de comprendre les concepts de react et faire un peu de react "vanilla" d'abord, car next utilise react.

Sinon je trouve le système de routage de Next bien foutu et bien plus intuitif et "visuel" que react routeur.

/Ce message n'a pas été généré par un LLM

Hypp0

Je ne contracte pas

XaTriX a écrit :

[...](doit même avoir un npx pour poper les deux d'un coup ?)

Oui t'as juste a exécuter "npx create-next-app@latest"

Hypp0

Je ne contracte pas

Bonne chance pour obtenir ça en React "vanilla" sans SSR et SSG

(shop next.js sur lequel je bosse)

Message édité par Hypp0 le 29-10-2024 à 13:27:04

fredo3

Merci pour vos réponses :jap:

Je vais jeter un coup d'oeil aux tuto :jap:

Message édité par fredo3 le 30-10-2024 à 10:00:26

XaTriX

Tu bosses dans le milieu ?

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

fredo3

Je suis dev oui.
Mais j'ai toujours fuit le javascript comme la peste

Mais là j'ai plus trop le choix. Faut que je me mette aux front-end.

Message cité 1 fois

XaTriX

C'est marrant mais le CSS m'emmerde toujours un peu

Message cité 1 fois

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

Hypp0

Je ne contracte pas

fredo3 a écrit :

Je suis dev oui.
Mais j'ai toujours fuit le javascript comme la peste

Mais là j'ai plus trop le choix. Faut que je me mette aux front-end.

T'es pas développeur PHP j’espère [:theorie des lavabos]

XaTriX a écrit :

C'est marrant mais le CSS m'emmerde toujours un peu

Tailwind a changé ma vie :love: , je sais pas comment je faisais pour faire tout en css vanilla/sass avant [:skylvind:8]

De toute façon CSS vanilla c'est poubelle, c'est clairement impossible à maintenir, hors react avec styled component ou css module, car le css est scopé au composant (ou a l’extrême en passant du css inline mais c'est ultra crado).

Message cité 1 fois
Message édité par Hypp0 le 30-10-2024 à 22:19:35

XaTriX

Hypp0 a écrit :

T'es pas développeur PHP j’espère [:theorie des lavabos]

Hypp0 a écrit :

Tailwind a changé ma vie :love: , je sais pas comment je faisais pour faire tout en css vanilla/sass avant [:skylvind:8]

De toute façon CSS vanilla c'est poubelle, c'est clairement impossible à maintenir, hors react avec styled component ou css module, car le css est scopé au composant (ou a l’extrême en passant du css inline mais c'est ultra crado).

Ce qui veut dire :??:

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

Hypp0

Je ne contracte pas

En gros chaque composant encapsule et isole son css, et grâce à ça on évite : les problèmes de nommage (l'enfer), on évite aussi les problèmes de spécificité qui se produisent souvent car on sait plus qui target quoi à quel endroit et avec quel force, et on éviter de se retrouver avec des "!important" dégueulasses et les problèmes que ça amène.

En css vanilla tous les sélecteurs sont globaux, tandis que CSS module (par exemple) génère automatiquement des nom de classe uniques à la compilation.

On évite aussi les problèmes de classes qui s'accumulent et dont on ne sait pas si on doit les supprimer ou les modifier sous peine de péter un truc [:clooney8]

C'est 1000 fois plus facile à maintenir. En gros le css se retrouve colocalisé avec le composant qui l'utilise

On pourrait s'étendre encore longtemps sur l'enfer d'utiliser du css vanilla dès qu'un projet grossit un peu, putain quand je regarde des anciens projets j'en ai des suées [:skylvind:8]

Sinon perso j'ai testé pas mal de trucs et pour moi tailwind reste le plus pratique/simple/puissant, je veux plus utiliser autre chose

XaTriX

J'ai commencé avec XHTML 1.1 et CSS2 mais alors ce que tu me dis me donne absolument pas envie de faire du CSS voir même du front

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

Hypp0

Je ne contracte pas

Avec des outils modernes le css reste "fun" enfin si on peut dire que le CSS est fun

Et puis flexbox/grid ont apporté beaucoup. Mais clairement écrire du css "vanilla" hors apprentissage, c'est sûr que c'est pas raisonnable.

Après si c'est pour styler une simple page je dis pas, mais si le projet devient un peu sérieux faut oublier.

Et puis surtout il y a aucune difficulté à utiliser tailwind quand on connait le css, la doc est incroyablement bien foutue, il y juste un peu de gymnastique à faire au début pour apprendre les classes/aller regarder la doc et c'est tout.

Message édité par Hypp0 le 02-11-2024 à 22:52:03

fredo3

C'est une fausse impression où Nextjs s'apprend assez vite???

Je regarde des tuto, et oui il y a pas mal de conventions à connaître mais hormis ça, il est facile à apprendre. Cool

Message édité par fredo3 le 06-11-2024 à 19:50:55

Hypp0

Je ne contracte pas

Je pense que ça dépend surtout de ton background et de ta connaissance de react. Il y a quand meme bcp de subtilités avec next je trouve.

Mais une fois que t'as compris le syteme de routage, les components client/server, le streaming de components, les server actions. Après pour la partie backend c'est juste du js. Il a aussi tout les api qu'il ont étendu, du genre NextResponse/NextRequest mais que t'es même pas obligé d'utiliser

Donc oui t'as sûrement raison, globalement c'est plutôt facile a apprendre si tu connais déjà js/ts/reactr

Message édité par Hypp0 le 07-11-2024 à 13:23:10

Publicité

FORUM HardWare.fr

Programmation

Javascript/Node.js

Button react component dans un button

Sujets relatifs
[React] Comment changer le state de manière unique dans une map	[Javascript - React] useRef dans map() ne fonctionne pas
Reconnaitre un button - optimisation de code	[React/JS] Actualiser image dans le front
fermer une fenetre lors du clique sur button	Facebook share button
Aide button de recherche sur un tableau	Sélection d'un noeud d'un JTree avec un button.
[Flash cs3 - AS2] Component - Layout manager - Anchor System	Java Button
Plus de sujets relatifs à : Button react component dans un button

Page générée en 0.052 secondes