Se connecter

Informatique

Création de sites web

Sujet : Je comprends rien au Contexte sur React.JS
1
Pecker_Monkk
Niveau 29
15 juin 2023 à 23:09:23

slt

ca là : export const CountContext =React.createContext();

les définitions sont trop techniques, les exemples sont trop complexe

à l'aide

JeTeDesse
Niveau 5
16 juin 2023 à 13:30:40

Il va falloir faire un effort dans ta demande.

Avant d'apprendre un framework, il faudrait déjà connaître les bases de la POO et du langage spécifique.

just_mclovin
Niveau 7
18 juin 2023 à 07:03:39

C'est plutôt simple pourtant :)
Le code que tu as partagé permet de créer un contexte appelé CountContext et que tu exportes pour qu'il soit disponible pour les autres composants de ton application.

N'hésite pas à bien lire la documentation officielle de React 😊

Bon courage.

jyvaispointcon
Niveau 27
27 juin 2023 à 12:37:59

Le 15 juin 2023 à 23:09:23 :
slt

ca là : export const CountContext =React.createContext();

les définitions sont trop techniques, les exemples sont trop complexe

à l'aide

Parce qu'avant de chercher à comprendre comment marche un Framework il faut maitriser le Vanilla. Donc bien te former à Vanilla. Sauf que faire du web en JS Vanilla bah bon courage ^^

et oui JS n'a pas été conçu pour le web à la base. c'est con :-))) du coup pour comprendre le dev web avec du JS Vanilla tu vas bien t'amuser (et surtout faire des milliers de ligne de code pour un truc qui se fait en une ligne en PHP)

MaSainteVerge
Niveau 6
27 juin 2023 à 13:13:41

Le 27 juin 2023 à 12:37:59 :

Le 15 juin 2023 à 23:09:23 :
slt

ca là : export const CountContext =React.createContext();

les définitions sont trop techniques, les exemples sont trop complexe

à l'aide

Parce qu'avant de chercher à comprendre comment marche un Framework il faut maitriser le Vanilla. Donc bien te former à Vanilla. Sauf que faire du web en JS Vanilla bah bon courage ^^

et oui JS n'a pas été conçu pour le web à la base. c'est con :-))) du coup pour comprendre le dev web avec du JS Vanilla tu vas bien t'amuser (et surtout faire des milliers de ligne de code pour un truc qui se fait en une ligne en PHP)

Pourquoi les débutants affirment tant de conneries sur ce forum ?

jyvaispointcon
Niveau 27
28 juin 2023 à 13:53:40

Le 27 juin 2023 à 13:13:41 :

Le 27 juin 2023 à 12:37:59 :

Le 15 juin 2023 à 23:09:23 :
slt

ca là : export const CountContext =React.createContext();

les définitions sont trop techniques, les exemples sont trop complexe

à l'aide

Parce qu'avant de chercher à comprendre comment marche un Framework il faut maitriser le Vanilla. Donc bien te former à Vanilla. Sauf que faire du web en JS Vanilla bah bon courage ^^

et oui JS n'a pas été conçu pour le web à la base. c'est con :-))) du coup pour comprendre le dev web avec du JS Vanilla tu vas bien t'amuser (et surtout faire des milliers de ligne de code pour un truc qui se fait en une ligne en PHP)

Pourquoi les débutants affirment tant de conneries sur ce forum ?

https://developer.mozilla.org/fr/docs/Learn/Forms/Sending_forms_through_JavaScript

alors qu'avec du PHP : AUCUNE ligne de code n'est nécessaire. Avec JS, même le button il faut le coder :oui:

Mais tu as raison, suis débutant et je dis des tonnes de conneries.

just_mclovin
Niveau 7
28 juin 2023 à 19:53:07

Le 27 juin 2023 à 12:37:59 :

Le 15 juin 2023 à 23:09:23 :
slt

ca là : export const CountContext =React.createContext();

les définitions sont trop techniques, les exemples sont trop complexe

à l'aide

Parce qu'avant de chercher à comprendre comment marche un Framework il faut maitriser le Vanilla. Donc bien te former à Vanilla. Sauf que faire du web en JS Vanilla bah bon courage ^^

et oui JS n'a pas été conçu pour le web à la base. c'est con :-))) du coup pour comprendre le dev web avec du JS Vanilla tu vas bien t'amuser (et surtout faire des milliers de ligne de code pour un truc qui se fait en une ligne en PHP)

Je pense que ça faisait un paquet de temps que j'avais pas lu de telles aneries...

jyvaispointcon
Niveau 27
28 juin 2023 à 21:00:36

Le 28 juin 2023 à 19:53:07 :

Le 27 juin 2023 à 12:37:59 :

Le 15 juin 2023 à 23:09:23 :
slt

ca là : export const CountContext =React.createContext();

les définitions sont trop techniques, les exemples sont trop complexe

à l'aide

Parce qu'avant de chercher à comprendre comment marche un Framework il faut maitriser le Vanilla. Donc bien te former à Vanilla. Sauf que faire du web en JS Vanilla bah bon courage ^^

et oui JS n'a pas été conçu pour le web à la base. c'est con :-))) du coup pour comprendre le dev web avec du JS Vanilla tu vas bien t'amuser (et surtout faire des milliers de ligne de code pour un truc qui se fait en une ligne en PHP)

Je pense que ça faisait un paquet de temps que j'avais pas lu de telles aneries...

okay mais alors argumentez alors au lieu de sortie votre phrase bidon. Comment tu constestes ce que je dis ?

just_mclovin
Niveau 7
28 juin 2023 à 23:42:59

Si tu me dis que le soleil est un satellite de la terre, je vais pas me fatiguer à argumenter. Là c'est pareil.

jyvaispointcon
Niveau 27
30 juin 2023 à 15:39:31

Le 28 juin 2023 à 23:42:59 :
Si tu me dis que le soleil est un satellite de la terre, je vais pas me fatiguer à argumenter. Là c'est pareil.

ah ouai c'est une position vachement scientifique ton argument :-))) C'est toi qui dit de la merde parce que de fait tu ne fais pas démonstration que ce que je dis est faux.

jesuisgentil55
Niveau 47
05 juillet 2023 à 11:34:49

Le 27 juin 2023 à 12:37:59 :

Le 15 juin 2023 à 23:09:23 :
slt

ca là : export const CountContext =React.createContext();

les définitions sont trop techniques, les exemples sont trop complexe

à l'aide

Parce qu'avant de chercher à comprendre comment marche un Framework il faut maitriser le Vanilla.

VRAI

Donc bien te former à Vanilla. Sauf que faire du web en JS Vanilla bah bon courage ^^

VRAI

et oui JS n'a pas été conçu pour le web à la base. c'est con :-)))

VRAI & FAUX en même temps. C'est un langage coté client à la base donc oui, ca pas été conçu pour le HTTP (base du web). Mais pour interpréter le HTML dans le navigateur.

du coup pour comprendre le dev web avec du JS Vanilla tu vas bien t'amuser (et surtout faire des milliers de ligne de code pour un truc qui se fait en une ligne en PHP)

VRAI

Bref, on peut pas vraiment dire que tous ce qui est dit est des conneries.

Alexqndre
Niveau 4
05 juillet 2023 à 14:40:28

Tu peux considérer un context comme une variable globale définie au niveau d'un parent càd que tous les enfants de ce parent y ont accès.

Pour définir un context, tu peux procéder comme cela:
function Parent() {
export const MaVariableGlobale = createContext();
const valeurMaVariableGlobale = ...

return <MaVariableGlobale.Provider value={valeurMaVariableGlobale}>
<Enfant1 />
<Enfant2 />
<Enfant3 />
</MaVariableGlobale>
}

Pour utiliser un context, il suffit de l'importer:
import {MaVariableGlobale} from "..."

function Enfant2() {
const valeurMaVariableGlobale = useContext(MaVariableGlobale)

return ...
}

La recette la plus basique. :)

Si ton anglais est ok, je te conseille de lire le tuto sur la docu officielle https://react.dev/learn/passing-data-deeply-with-context

MaSainteVerge
Niveau 6
05 juillet 2023 à 14:41:58

Le 28 juin 2023 à 23:42:59 :
Si tu me dis que le soleil est un satellite de la terre, je vais pas me fatiguer à argumenter. Là c'est pareil.

C'est tellement ça :rire:

just_mclovin
Niveau 7
06 juillet 2023 à 00:46:24

Le 30 juin 2023 à 15:39:31 :

Le 28 juin 2023 à 23:42:59 :
Si tu me dis que le soleil est un satellite de la terre, je vais pas me fatiguer à argumenter. Là c'est pareil.

ah ouai c'est une position vachement scientifique ton argument :-))) C'est toi qui dit de la merde parce que de fait tu ne fais pas démonstration que ce que je dis est faux.

Tu fais une inversion de la charge de la preuve.

jyvaispointcon
Niveau 27
03 août 2023 à 10:22:58

Le 06 juillet 2023 à 00:46:24 :

Le 30 juin 2023 à 15:39:31 :

Le 28 juin 2023 à 23:42:59 :
Si tu me dis que le soleil est un satellite de la terre, je vais pas me fatiguer à argumenter. Là c'est pareil.

ah ouai c'est une position vachement scientifique ton argument :-))) C'est toi qui dit de la merde parce que de fait tu ne fais pas démonstration que ce que je dis est faux.

Tu fais une inversion de la charge de la preuve.

Même plus besoin d'argumenter plus puisqu'un autre la fait pour moi. et au passage tu ne fais juste pas dire "je ne suis pas convaincu" mais tu affirmes quelques chose, donc c'est à toi normalement d'apporter des arguments de ce que tu affirmes. L'arroseur arrosé :oui:
bon apres ca pue le trolle à 2 francs comme il y en a tant sur jv :-)))

Apochaos
Niveau 63
03 août 2023 à 14:38:10

Le 27 juin 2023 à 12:37:59 :

Le 15 juin 2023 à 23:09:23 :
slt

ca là : export const CountContext =React.createContext();

les définitions sont trop techniques, les exemples sont trop complexe

à l'aide

Parce qu'avant de chercher à comprendre comment marche un Framework il faut maitriser le Vanilla. Donc bien te former à Vanilla. Sauf que faire du web en JS Vanilla bah bon courage ^^

et oui JS n'a pas été conçu pour le web à la base. c'est con :-))) du coup pour comprendre le dev web avec du JS Vanilla tu vas bien t'amuser (et surtout faire des milliers de ligne de code pour un truc qui se fait en une ligne en PHP)

Ayaaaaaaaa https://image.noelshack.com/fichiers/2016/26/1467335935-jesus1.png

T'es au courant que le javascript est à l'origine un langage utilisé par les navigateurs ? https://image.noelshack.com/fichiers/2016/38/1474488555-jesus24.png

Et que faire du javascript vanilla ça n'a rien de compliqué ? https://image.noelshack.com/fichiers/2018/27/4/1530827992-jesusreup.png

Alors oui tu n'as pas de facilité pour faire des class comme en PHP ou en Java avec un mot clé dédié et tu vas devoir les faire en utilisant des functions tout en hackant les prototypes pour rajouter des methods, mais ça n'a rien de chinois non plus https://image.noelshack.com/fichiers/2017/18/1493758368-mpytb.png

Ils sont marrants les débutants quand tu leur retires tout les bundler, babel, webpack et compagnies https://image.noelshack.com/fichiers/2017/15/1492340491-jesus32.png

Les dev dans les années 2000 https://image.noelshack.com/fichiers/2023/31/4/1691066225-swole-doge.png

Les dev maintenant https://image.noelshack.com/fichiers/2023/31/4/1691066225-cheems-doge.png

edit : j'ai passé par la partie où tu compares du JS et du PHP pour du frontend parce que ce que tu dis n'a simplement aucun sens

Apochaos
Niveau 63
03 août 2023 à 15:00:02

Le 15 juin 2023 à 23:09:23 :
slt

ca là : export const CountContext =React.createContext();

les définitions sont trop techniques, les exemples sont trop complexe

à l'aide

Du coup pour répondre sérieusement à l'op :

Je ne fais pas de React mais d'après la doc ( https://react.dev/reference/react/createContext ), le "context" n'est qu'une grosse variable globale qui te permet d'accéder à une valeur n'importe où dans ton app par ses composants enfants.

Tu dois englober ton composant par un "autre composant" (exemple : ThemeContext.provider) qui a été créé par la fonction "createContext" et tu peux modifier la valeur via l'attribut "value" du composant.

Ensuite, dans les composants enfants, tu peux récupérer cette valeur en passant la référence de la globale (ex: ThemeContext) à la fonction "useContext".

Je vais te mettre les exemples de la doc ci-dessous avec des commentaires. Attention, comme j'ai dis avant, je ne fais pas de React donc c'est plutôt ma propre interprétation de la doc.


// context.js
import { createContext } from 'react';

// Ici tu exportes ton contexte, tu peux le récupérer n'importe où par après
export const ThemeContext = createContext('light');

// app.js
import { ThemeContext } from 'context.js'; // on importe le context pour avoir accès au provider

function App() {
  // ici tu as ton state 
  const [theme, setTheme] = useState('light'); 
  
  // tu dois englober les enfants avec un "Provider"
  // React semble créer automatiquement ce composant via la fonction createContext.
  // Tu dois passer dans l'attribut "value" la valeur du state, l'attribut est réactif
  // donc à chaque changement via setTheme, l'attribut va changer avec
  // et se propager aux enfants
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

// button.js
import { ThemeContext } from 'context.js'; // on importe le context pour avoir accès à la référence

function Button() {
  // On peut récupérer la valeur en donnant la référence à useContext
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
}

Je pense que ce qui n'était pas clair dans la doc, c'était simplement le fait qu'il manquait les import/export.

jyvaispointcon
Niveau 27
08 août 2023 à 18:23:14

Le 03 août 2023 à 14:38:10 :

Le 27 juin 2023 à 12:37:59 :

Le 15 juin 2023 à 23:09:23 :
slt

ca là : export const CountContext =React.createContext();

les définitions sont trop techniques, les exemples sont trop complexe

à l'aide

Parce qu'avant de chercher à comprendre comment marche un Framework il faut maitriser le Vanilla. Donc bien te former à Vanilla. Sauf que faire du web en JS Vanilla bah bon courage ^^

et oui JS n'a pas été conçu pour le web à la base. c'est con :-))) du coup pour comprendre le dev web avec du JS Vanilla tu vas bien t'amuser (et surtout faire des milliers de ligne de code pour un truc qui se fait en une ligne en PHP)

Ayaaaaaaaa https://image.noelshack.com/fichiers/2016/26/1467335935-jesus1.png

T'es au courant que le javascript est à l'origine un langage utilisé par les navigateurs ? https://image.noelshack.com/fichiers/2016/38/1474488555-jesus24.png

Et que faire du javascript vanilla ça n'a rien de compliqué ? https://image.noelshack.com/fichiers/2018/27/4/1530827992-jesusreup.png

Alors oui tu n'as pas de facilité pour faire des class comme en PHP ou en Java avec un mot clé dédié et tu vas devoir les faire en utilisant des functions tout en hackant les prototypes pour rajouter des methods, mais ça n'a rien de chinois non plus https://image.noelshack.com/fichiers/2017/18/1493758368-mpytb.png

Ils sont marrants les débutants quand tu leur retires tout les bundler, babel, webpack et compagnies https://image.noelshack.com/fichiers/2017/15/1492340491-jesus32.png

Les dev dans les années 2000 https://image.noelshack.com/fichiers/2023/31/4/1691066225-swole-doge.png

Les dev maintenant https://image.noelshack.com/fichiers/2023/31/4/1691066225-cheems-doge.png

edit : j'ai passé par la partie où tu compares du JS et du PHP pour du frontend parce que ce que tu dis n'a simplement aucun sens

trop de stickers /ignored

1
Sujet : Je comprends rien au Contexte sur React.JS
News culture
La Planète des Singes : Le Nouveau Royaume - la révolution simienne est en marche !
   Retour haut de page
Consulter la version web de cette page