Débuter en javascript (Questions sur l'environnement à utiliser/installer)

**Meroga** · 26/07/2021, 12h09

Bonjour,
j'essaye de me (re)mettre à javascript et je ne comprends absolument rien. Dans mes souvenirs il n'y avait besoin de rien si ce n'est d'un navigateur et d'un éditeur de texte mais tous les tutoriels que je trouve parle d'environnement à installer, de serveur local ou d'environnement en ligne auxquels je ne comprends rien (ni comment s'en servir ni comment ça fonctionne).
Comment débuter ? (mon objectif in fine est d'apprendre à utiliser la librairie React)
Merci d'avance.

**Archimède** · 26/07/2021, 14h55

Salut,
déjà que veux-tu faire avec javascript... c'est la question à se poser ? car avant de se lancer dans l'utilisation de bibliothèques, il faut faire du basique et ensuite cibler le bon outil suivant l'objectif à atteindre.
Pour le développement, utilise visual studio code, il est génial... Super autocompletion, coloration syntaxique etc...ça facilite la vie par rapport à un simple éditeur de texte où tu n'as aucune suggestion d'aide dans le codage.

**Meroga** · 26/07/2021, 15h11

Merci pour ta réponse.
Pour Visual Studio Code je l'ai téléchargé oui pour l'instant je n'ai pas eu l'occasion de m'apercevoir de son potentiel.
Pour mon objectif, justement je ne sais pas trop, je cherche à réaliser un projet en React pour me familiariser avec cette bibliothèque. Pour l'instant je n'ai pas encore d'idée de projet, ça dépendra de ce qu'on peut faire ou non avec cette bibliothèque.
Mais de toute façon, je n'en suis même pas là. Visiblement il faut utiliser des "modules" en javascript (chose que je ne connais pas) mais ça ne marche pas sur mon ordinateur (ça déclenche un tas d'erreurs et je ne comprends absolument rien de ce qu'il se passe).

**Archimède** · 26/07/2021, 15h53

Re,
pour React.js, je ne connais pas cette bibliothèque, je ne peux pas t'aider... Mais je ne pense pas que ce soit la bonne stratégie de démarrer directement sur l'utilisation d'une bibliothèque sans connaître l'essentiel du langage javascript.
Pour l'intérêt de vscode, commence par créer un nouveau fichier et enregistre-le au format html. tape ensuite ! dans la saisie du code, tu verras apparaître Emet Abbreviation, clique dessus et tu auras l'ossature directe d'une page html.
A l'intérieur d'une balise <script>, toutes les propriétés de tes objets javascript sont accessibles en faisant ton_objet point(.). Il suffit de choisir... etc
C'est tout de même mieux qu'un simple éditeur de texte.
Après, il faut que tu te fixes un objectif de réalisation. Javascript n'est pas dissociable de html et css.
Fais déjà des tutos basiques de réalisation de page web en maitrisant les trois.
Après tu pourras te lancer dans l'utilisation de bibliothèques spécifiques suivant tes besoins.

**alexiiiis** · 29/07/2021, 04h51

Avant d'attaquer directement avec React qui demande quelques connaissances de Javascript, il serait plus judicieux comme l'a précisé Archimède de reprendre les bases avec seulement un fichier Html et un autre Script et de regarder les résultats dans la console de ton navigateur web.

Si tu maitrises l'anglais je t'oriente vers le site freecodecamp, tu peux apprendre Javascript gratuitement avec des petits algos basiques. Et ensuite commencer à apprendre React.

Donc tu te fais un dossier avec 2 fichiers :

- index.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script src="script.js"></script>
    </body>
</html>

- script.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
// Tout ton code Javascript
console.log('Hello World');

Et ensuite ouvre index.html dans ton navigateur web, tu appuies sur la touches F12 ou tu cliques droit et "inspecter"
Et la tu choisis Console(1) et tu verras apparaître le résultat(2) de ce que tu as saisi dans ton fichier script.js

Nom : res.png
Affichages : 152
Taille : 12,2 Ko

Nom : res.png
Affichages : 152
Taille : 12,2 Ko

Courage !!!

**Meroga** · 29/07/2021, 11h19

Bonjour,
j'ai été voir ton site mais il faut s'inscrire pour avoir accès aux cours.
Merci pour ton exemple mais je sais déjà faire ce genre de choses en fait. Et je sais aussi ce qu'est une variable, une fonction, une fonction fléchée, une classe, les événements, le DOM, etc.
J'ai réussi à finir ce tuto https://fr.reactjs.org/tutorial/tutorial.html qui permet de créer un jeu de morpion en React (en suivant les étapes au fur et à mesure et en cherchant par moi même au lieu de copier-coller).

Ce que je n'ai pas très bien compris c'est :
- Quand peut-on simplement ouvrir un bloc note et écrire le code et quand faut-il passer par un serveur pour que ça marche ?
- Si on doit passer par un serveur, que faut-il "installer" et pour quoi ? Qu'est-ce que Babel ?
- Faut-il préférer un outil en ligne comme "codepen.io" ou une installation en dur sa machine ? Dans le premier cas, y a-t-il un outil plus adapter ?
- Quid de Github ? Je veux dire je sais que ça permet de gérer les différentes branches et versions du code mais cela apporte-t-il autre chose quant au développement Web ?
- Est-il courant de faire des "tests" (type Junit) ? Si oui, quel environnement utiliser ?

Sur React plus particulièrement :

- Pourquoi préfère-t-on utiliser des composants fonctionnels plutôt que sous forme de classe ?
- J'ai défini des fonctions dans une fonctions, est-ce une bonne pratique ?
Merci d'avance.

**alexiiiis** · 31/07/2021, 03h35

D'accord donc t'es pas débutante, dans ton premier post la facon dont tu parles m'a fait penser que tu avais vraiment pas d'expérience du tout.
FreeCodeCamp, oui il faut s'inscrire pour pouvoir garder ta progression, mais c'est gratuit.

- Quand peut-on simplement ouvrir un bloc note et écrire le code et quand faut-il passer par un serveur pour que ça marche ?

Tu ne peux pas juste écrire du javascript dans ton bloc note et essayer de le lire sans rien, puisque Javascript a besoin d'être compilé. Pour cela,il te faut ton navigateur Web. Ou alors tu peux utiliser Node.
Node a plusieurs casquettes, je ne pourrais te dire toutes car tu peux faire vraiment pas mal de chose avec.

Imaginons que tu ai installée Node sur ton pc, maintenant tu n'as plus besoin de ton Navigateur Web, tu peux écrire ton code javascript dans ton bloc note si tu veux, puis ouvrir un terminal, et tapper la commande "node nomDeTonFichier.js" en étant sûr de donner la bonne route pour accéder à ce fichier script.

- Si on doit passer par un serveur, que faut-il "installer" et pour quoi ? Qu'est-ce que Babel ?

Du coup Node pour la premiere reponse (peut être autre chose mais je ne connais pas, ou je n'ai pas en tête).
Babel est un peu different, Babel permet entre guillemet de convertir du code Javascript moderne (ES6,ES7 etc... ) en langage plus plus ancien pour être sur que ton navigateur web le comprenne. Car bien souvent JS est plus en avance que les navigateurs. Donc nous Dev ca nous permet de tapper du code plus moderne, avec parfois des fonctionnalités plus avancées et Babel se charge de convertir. (je ne sais pas si Babel a d'autres fonctions)

- Faut-il préférer un outil en ligne comme "codepen.io" ou une installation en dur sa machine ? Dans le premier cas, y a-t-il un outil plus adapter ?

Pour faire quoi ? Perso je fais tout sur ma machine, ou alors si tu veux partager du code facilement peut être CodePen et encore ?
Il me semble que CodePen permet de changer les versions de Babel, et autres framework facilement donc pour tester Rapidement effectivement CodePen peut être utile.

- Quid de Github ? Je veux dire je sais que ça permet de gérer les différentes branches et versions du code mais cela apporte-t-il autre chose quant au développement Web ?

Quid ?
Github ( ou Gitlab ) est une plateforme qui te permet de mettre ton code en ligne ( en créant des dossiers Privés ou Publics ). Cette plateforme permet de faire ce qu'on appel de la "gestion de version" ou en anglais du "Versionning". En gros quand tu crees ton site/application tu vas avoir plusieurs fonctionnalités, et a chaque fois que tu vas faire une nouvelle fonctionnalité, tu vas publier sur github ( on dit souvent "tu push" ), ce qui te permet de garder un historique, et si en cas de problème sur ta nouvelle fonctionnalité, alors tu peux revenir en arrière en téléchargeant la version précédente.

Les branches permettent d'organiser ton travail, et également si tu bosses en équipe.

- Est-il courant de faire des "tests" (type Junit) ? Si oui, quel environnement utiliser ?

Alors oui je dirais qu'il est de plus en plus courant d'en faire, mais je ne saurais trop te répondre, étant également débutant dans le domaine des tests.

- Pourquoi préfère-t-on utiliser des composants fonctionnels plutôt que sous forme de classe ?

De mémoire, quand j'ai appris React, les classes c'était galères avec les States, ceci a peut être évolué, j'ai toujours tendance à utiliser les fonctions

- J'ai défini des fonctions dans une fonctions, est-ce une bonne pratique ?

Faudrait du code pour juger.
Mais j'aurai tendance a dire que ce n'est pas bon. Il faut créer ses fonctions et si besoin l'appeler à l'intérieur d'une autre, mais pas la déclarer dedans.

J'espère t'avoir un peu aidé !!

**melka one** · 31/07/2021, 10h14

jour

certaines api peuvent empêcher le fonctionnement d'un programme ces soucis sont souvent lié au "crossOrigin" mais ça reste asser rare un exemple ici , il y a aussi l'utilisation d'ajax qui requière d'avoir un serveur pour tester ses requêtes, pour tous le reste pas vraiment besoin de serveur.

**Meroga** · 31/07/2021, 20h02

Bonjour melka one,
justement j'avais eu un soucis de ce genre.
En fait, je ne comprenais pas (et ne suis pas sure d'avoir bien compris) pourquoi le premier code ci-dessous fonctionnait sans problème alors que le deuxième générait une erreur Cors. A priori c'est qu'il fallait un serveur vu que dans le deuxième cas il y a des import de modules mais je ne suis pas sure que ce soit la seule chose qui bloque :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
//Premier code (copier-coller d'un tuto React, fonctionne très bien)
'use strict';
 
const e = React.createElement;
 
class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }
 
  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }
 
    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}
 
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
//Deuxième code (j'ai eu du mal à le faire fonctionner, j'ai du passé par create-react-app et je n'ai pas tout compris à l'environnement)
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
 
const App = () => {
 const [liked, setLikeValue] = React.useState(false);
 
 
 
   if (liked) 
      return (<p> You liked this. </p>);
 
    return (<button onClick={() => setLikeValue(true)}>
    Cliquez ici
  </button>);
 
}
 
const domContainer = document.querySelector('#like_button_container');
 
 
ReactDOM.render(<App />, domContainer);

Bonjour alexiiiis.
Oui ça m'a aidé. En fait j'avais déjà fait un peu de javascript (dont manipulation du DOM et d'autres choses) il y a 10 ans quand j'étais étudiante. Les fonctions fléchées je n'avais pas très bien compris à l'époque mais aujourd'hui avec le recul ça me semble assez naturel. La déstructuration je ne connaissais pas mais en voyant un exemple j'ai compris directement, etc.
A l'époque, j'avais utilisé simplement un éditeur de texte et mon navigateur web, peut-être le serveur de la fac, et je n'avais pas eu de problèmes quant à l'environnement mais en commençant à regarder React j'ai eu l'impression que ce n'était plus aussi simple. En particulier, j'ai eu beaucoup de mal à faire fonctionner le deuxième code posté plus haut et je n'ai pas tout compris à ce qu'il s'est passé quand j'ai fait

Code bash :

Sélectionner tout - Visualiser dans une fenêtre à part

npx create-react-app mon-app

et à ce qu'était node.js.

- Quand peut-on simplement ouvrir un bloc note et écrire le code et quand faut-il passer par un serveur pour que ça marche ?

Tu ne peux pas juste écrire du javascript dans ton bloc note et essayer de le lire sans rien, puisque Javascript a besoin d'être compilé. Pour cela,il te faut ton navigateur Web. Ou alors tu peux utiliser Node.
Node a plusieurs casquettes, je ne pourrais te dire toutes car tu peux faire vraiment pas mal de chose avec.

Envoyé par alexiiiis

Du coup Node pour la premiere reponse (peut être autre chose mais je ne connais pas, ou je n'ai pas en tête).
Babel est un peu different, Babel permet entre guillemet de convertir du code Javascript moderne (ES6,ES7 etc... ) en langage plus plus ancien pour être sur que ton navigateur web le comprenne. Car bien souvent JS est plus en avance que les navigateurs. Donc nous Dev ca nous permet de tapper du code plus moderne, avec parfois des fonctionnalités plus avancées et Babel se charge de convertir. (je ne sais pas si Babel a d'autres fonctions)

Merci. Je ne savais pas du tout et c'est un peu plus clair maintenant.

Pour CodePen, c'était simplement pour savoir si il valait mieux passé par un éditeur en ligne ou passer par une installation plus "lourde" sur machine (node.js, babel et tous les trucs que je vois passer dans les tutos). L'idée est de faire un petit projet en react type "todo list".
D'ailleurs, y a-t-il moyen de gérer la persistance (pour sauvegarder un liste en local par exemple) sans passer par PHP et tout le reste ? J'ai un doute parce que niveau sécurité ça me parait pas fou mais je pose quand même la question, on ne sait jamais..

Pour Github je connais le principes du versionning, des branches, etc. Je posais la question pour savoir si ça pouvait apporter quelque chose en plus niveau environnement. Il me semble avoir lu sur un forum que ça pouvait dispenser d'avoir un serveur en local et je voulais creuser la question mais ça n'a surement rien à voir.

Envoyé par alexiiiis

De mémoire, quand j'ai appris React, les classes c'était galères avec les States, ceci a peut être évolué, j'ai toujours tendance à utiliser les fonctions

Je note.

Envoyé par alexiiiis

- J'ai défini des fonctions dans une fonctions, est-ce une bonne pratique ?

Faudrait du code pour juger.
Mais j'aurai tendance a dire que ce n'est pas bon. Il faut créer ses fonctions et si besoin l'appeler à l'intérieur d'une autre, mais pas la déclarer dedans.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
Voici mon code pour la grille de morpion :
 
const Board = () => {
    const renderSquare = (i) => {
        return <Square value = {squares[i]}  onClick = { () => handleClick(i)} />;
    }
 
 
   const handleClick = (i) =>{
    const newSquares = squares.slice();
    if(newSquares[i] == null)
    {
      newSquares[i] = turn ? 'X' : 'O';
      setSquareValue(newSquares);
      setTurn(1 - turn);
    }
 
    console.log(squares);
 
 
  }
 
  const calculateWinner = () => {
    const lines = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6],
    ];
    for (let i = 0; i < lines.length; i++) {
      const [a, b, c] = lines[i];
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
      }
    }
    return null;
  }
 
  let [turn, setTurn] = React.useState(1);
 
   let [squares, setSquareValue] = React.useState(Array(9).fill(null));
 
    let status;
 
    const w = calculateWinner();
    if (w)
     {
      status ="Le joueur " + w + " a gagné";
    } else {
      status = `Next player: ${turn ? 'X' : 'O'}`;
    }
 
 
 
 
    return (
      <div >
        <div className="status">{status}</div>
        <div className="board-row">
          {renderSquare(0)}
          {renderSquare(1)}
          {renderSquare(2)}
        </div>
        <div className="board-row">
          {renderSquare(3)}
          {renderSquare(4)}
          {renderSquare(5)}
        </div>
        <div className="board-row">
          {renderSquare(6)}
          {renderSquare(7)}
          {renderSquare(8)}
        </div>
      </div>
    );
  }

**alexiiiis** · 01/08/2021, 03h40

Dans ton deuxieme code, je suis pas sur que tu es besoin du mot clé React.

const [liked, setLikeValue] = useState(false);

devrait faire l'affaire non ?

Pour CodePen, c'était simplement pour savoir si il valait mieux passé par un éditeur en ligne ou passer par une installation plus "lourde" sur machine (node.js, babel et tous les trucs que je vois passer dans les tutos). L'idée est de faire un petit projet en react type "todo list".
D'ailleurs, y a-t-il moyen de gérer la persistance (pour sauvegarder un liste en local par exemple) sans passer par PHP et tout le reste ? J'ai un doute parce que niveau sécurité ça me parait pas fou mais je pose quand même la question, on ne sait jamais..

Pour Github je connais le principes du versionning, des branches, etc. Je posais la question pour savoir si ça pouvait apporter quelque chose en plus niveau environnement. Il me semble avoir lu sur un forum que ça pouvait dispenser d'avoir un serveur en local et je voulais creuser la question mais ça n'a surement rien à voir.

Tu finiras par l'installer tot ou tard ( Node ).
Tu peux utiliser le LocalStorage pour sauvegarder des petites informations en local, de mémoire LocalStorage c'est 5mo de donnée.

Pas sûr de comprendre pour Github. Si c'est héberger des sites, oui tu peux avec Github si tu fais que du html/css/javascript. Regarde du cote de "Github Page".

Débuter en javascript (Questions sur l'environnement à utiliser/installer)

JavaScript

Discussions similaires

Partager

Partager