Retour • 05/08/2022

Le JavaScript à savoir pour commencer React

Écris par Melvyn Malherbe le 05/08/2022

Le JavaScript qu'il faut connaître avant de commencer à faire du React. Ne sois pas trop rapide, quand tu apprends React, on part sur le principe que tout ceci est acquis.

Je n'explique rien dans cet article, mais tu as des sources pour approfondir chaque sujet et chaque fois un exercice.

Dans cet article je vais te partager un maximum de ressources pour que tu puisses apprendre le JavaScript et le TypeScript.

React est incroyable, car il est très proche du JavaScript, il n'y a pas de template ni de syntaxe spécifique.

C'est juste - du - JavaScript

Les déclarations

const number = 1;
number = 2; // erreur, `const` ne peut pas être modifié

const obj = { number: 1 };
obj.number = 2; // ok, on modifie l'objet et pas la variable

const arr = [1, 2, 3];
arr[0] = 2; // ok, on modifie l'array et pas la variable

let string = 'hello';
string = 'world'; // ok, on modifie la variable avec un `let`

La destructuration

JSX

const cat = {
  name: 'Mimi',
  age: 3,
  color: 'white',
};

const { name, age, color } = cat;

const getName = ({ name }) => name;

getName(cat); // 'Mimi'

// On peut l'utiliser comme ça : <Component name={cat.name} age={cat.age} color={cat.color} />
const Component = ({ name, age, color }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>{age}</p>
      <p>{color}</p>
    </div>
  );
};

Affecter par décomposition

🦁 Exercice : Refactor ce code en utilisant la destructuration pour récupérer les variables.

Spread operator

Le spread permet de récupérer le "reste" des valeurs après avoir utilisé la description.

Permet notamment de créer des composants basiques comme un bouton où tu peux passer toutes les props "dont tu n'as pas besoin" au bouton afin de gérer tous les events, les propriétés, etc.

JSX

const Button = ({ children, ...restButtonProps }) => {
  return <button {...restButtonProps}>{children}</button>;
};

Syntaxe de décomposition

Les fonctions fléchés

Ou "arrow function" en anglais.

JSX

const add = (a, b) => a + b;

// Égal à
const add = function (a, b) => {
  return a + b;
}

// Égal à
function add(a, b) {
  return a + b;
}

const Component = ({ numbers }) => {
  return (
    <div>
      {numbers.map(number => <p key={number}>{number}</p>)}
    </div>
  )
}

Arrow function MDN

Les callback

Les callback ou méthode de rappel en français sont des fonctions passée en paramètre.

JSX

const getUser = (username, callback) => {
  fetch(`/api/user/${username}`)
    .then((response) => response.json())
    .then((data) => callback(data)); // call callback with data
};

getUser('codelynx', (user) => {
  console.log(user);
});

// React
const Button = ({ onClick }) => {
  <button onClick={onClick}>Click me</button>;
};

const App = () => {
  return <Button onClick={() => console.log('Hello')} />;
};

Fonction de rappel mdn

Méthode de tableau

const cats = [
  { name: 'Mimi', age: 3 },
  { name: 'Momo', age: 5 },
];

cats.reduce((acc, cat) => acc + cat.age); // 8
cats.map((cat) => cat.age); // [3, 5]
cats.find((cat) => cat.name === 'Momo'); // { name: "Momo", age: 5 }
cats.filter((cat) => cat.age > 5); // []
cats.every((cat) => cat.age > 18); // false

Il y en a plein d'autres méthodes de tableau disponibles.

Méthode de tableau

Les paramètres par défaut

JSX

const sqrt = (a, n = 2) => {
  return Math.pow(a, n);
};

const showCat = ({ name = 'Kitty' } = {}) => {
  console.log(`Hello cat : ${name}`);
};

const Button = ({ isLoading = false, ...props }) => {
  if (isLoading) return <p>Loading...</p>;
  return <button {...props}>...</button>;
};

On peut définir des valeurs par défaut à l'intérieur des objets ou juste pour un paramètre d'une fonction.

Paramètre par défaut sur MDN

Import et export

Bien comprendre la syntaxe d'import et d'export en JavaScript qui permet notamment d'avoir des imports dynamiques et de split son code.

// Date.js
export const dateToString = (date) => {
  return date.toString();
};

// App.js
import { dateToString } from './Date';

console.log(dateToString(new Date()));

// Dynamic import
import React from 'react';

// Importé des composants dynamiques (pas besoin de le savoir avant de faire du React mais tu vas vite l'apprendre.)
const HugeComponent = React.lazy(() => import('./HugeComponent'));

Ternaire

JSX

const numbers = 10

const warningText = numbers > 10
  ? "Numbers is upper than 10"
  : "Numbers is lower than 10";

// Égal à

let warningText;
if (numbers > 10) {
  warningText = "Numbers is upper than 10";
} else {
  warningText = "Numbers is lower than 10";
}

const Button = ({ isLoading, children ...props }) => {
  return (
    <button {...props}>
      {isLoading ? "Loading..." : children}
    </button>
  )
}

Ternaire sur mdn

&& et ?? et ||

// Test si la valeur est null ou undefined uniquement
const nullishOperator = (value) => {
  return value ?? 'default';
};

nullishOperator('Test'); // 'Test'
nullishOperator(null); // 'default'
nullishOperator(0); // 0

// Test is la valeur est "falsy"
const orOperator = (value) => {
  return value || 'default';
};

orOperator('Test'); // 'Test'
orOperator(null); // 'default'
orOperator(0); // 'default'

// Inversement test si la valeur est "truthy"
const andOperator = (value) => {
  return value && 'default';
};

andOperator('Test'); // 'default'
andOperator(null); // null
andOperator(0); // 0

Le nullish operator est utiles pour remplacer un ternary operator :

const user = { username: undefined };

// Avant
const username = user.username == null ? user.username : 'default';

// Après
const username = user.username ?? 'default';

Chaîne optionnelle

JSX

const cat = {
  cat: 'Mimi',
  size: {
    height: 'big',
    width: 'big',
    fullSize: () => {
      return 'very big';
    },
  },
};

// Sans chaîne optionnelle
const height = cat && cat.size && cat.size.height;

// Avec chaîne optionnelle
const height = cat?.size?.height;

// Avec une fonction
const height = cat?.size?.fullSize?.();

const User({ user }) {
  return (
    <div>
      <h1>{user?.name}</h1>
      <p>{user?.age}</p>
    </div>
  )
}

Promises

C'est un essentiel en JavaScript, en React aussi.

const fakeAsyncCall = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Hello world');
    }, 1000);
  });
};

// Sans async/await, la valeur est "Promise"
console.log(fakeAsyncCall());

(async () => {
  // Avec async/await, la valeur est "Hello world" car on attend la valuer
  console.log(await fakeAsyncCall());
})();

// On peut aussi utiliser .then
fakeAsyncCall().then((value) => {
  console.log(value);
});

// Tu peux tester ce code avec ton nom dans ton navigateur
const getAgeForName = (name) => {
  return window
    .fetch(`https://api.agify.io?name=${name}`)
    .then((response) => response.json());
};

getAgeForName('John').then((response) => {
  console.log(response);
});

Le DOM

Le DOM n'est pas lié au JavaScript mais il est lié au web, React interagit constamment avec le DOM.

Il faut comprendre ce que c'est, comment ça fonctionne et savoir interagir avec lui !

HTML

<div>
  <p>Hello <span id="world">World !</span></p>
</div>

<script>
  const world = document.getElementById('world');
  world.style.color = 'red';
</script>

Résultat :

Hello World !

Conclusion

Si tout ce que je viens de te présenter te rappelle quelque chose, c'est qu'il est temps de plonger dans le magnifique univers de React !

Ce framework va te faire avoir une vision magnifique du JavaScript.

Je tiens à te dire que personnellement, j'ai compris énormément de choses en JavaScript avec React, car c'est un framework vraiment très proche de ce langage.

Le meilleur moyen d'apprendre React !

Rejoins par développeurs, cette formation reçoit une note de 4.7 / 5 🚀

Reçois 12 leçons premium pour maîtriser React et faire partie des meilleurs