Le JavaScript à savoir pour commencer React

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 =

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, 

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

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 = ({ 

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);
});

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

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

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

const Button = ({ isLoading = false, ...props }) 

// 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(() 

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

// 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";

const user = { username: undefined };

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

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

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

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

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

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