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
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>
);
};
🦁 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.
const Button = ({ children, ...restButtonProps }) => {
return <button {...restButtonProps}>{children}</button>;
};
Les fonctions fléchés
Ou "arrow function" en anglais.
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>
)
}
Les callback
Les callback ou méthode de rappel en français sont des fonctions passée en paramètre.
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')} />;
};
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.
Les paramètres par défaut
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.
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
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>
)
}
&& 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
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 !
<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.
Cette article à été créer pour la formation BeginReact.dev !
Recommendations
Écris par Melvyn Malherbe
J'ai aidé 200 personnes à apprendre React et Next.js. Je suis un créateur de contenu et un développeur web. Plus de 2'600 personnes reçoivent mes newsletter par email chaque semaine.
En apprendre plus à propos de moi