React Cheatsheet

"Résumé des concepts clés de React : composants, état, props, hooks, JSX - Tout ce dont vous avez besoin pour démarrer rapidement avec React !"

Bases & syntaxe

import React from 'react';
class HelloWorld extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

Utilisez les classes quand vous avez des états ou des méthodes de cycle de vie spécifiques

Structures de données

const items = ['apple', 'banana', 'cherry'];
const user = { name: 'John', age: 30 };

Stockez des listes d'éléments dans un tableau et des objets en utilisant les littéraux de tableaux et d'objets

Fonctions & methodes essentielles

function greet(name) {
  return `Hello, ${name}!`;
}

const items = ['apple', 'banana', 'cherry'];
items.map(item => item.toUpperCase());

Créez des fonctions pour réutiliser le code et utilisez .map() pour itérer sur les tableaux

Patterns courants

// HOC (Higher Order Component)
const withLogging = WrappedComponent => {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component did mount');
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

Utilisez les composants de haut ordre pour ajouter des fonctionnalités à d'autres composants

Operations avancées

// Render Props
const WithCounter = ({ children }) => {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      {children({ count, increment: () => setCount(count + 1) })}
    </div>
  );
};

Utilisez les props de rendu pour passer des fonctions ou des éléments à d'autres composants

Debugging & outils

console.log('Rendering', this.state);
// Chrome DevTools -> React Tab -> Profiler

Utilisez console.log() pour déboguer et l'outil de profilateur du DevTools React pour analyser les performances

Projet React a lancer ?

Besoin d'aide sur un projet ? Decrivez-le pour des conseils personnalises.

Recevoir des conseils

Questions frequentes

A quoi sert cette cheatsheet React ?

Cette cheatsheet React regroupe la syntaxe, les commandes et les astuces essentielles pour React. Elle est concue pour servir d'aide-memoire rapide, que vous soyez debutant ou developpeur confirme cherchant une reference rapide.

Comment utiliser cette cheatsheet React ?

Parcourez les sections pour trouver la syntaxe ou la commande dont vous avez besoin. Vous pouvez la garder ouverte dans un onglet pendant que vous codez, ou la copier dans vos notes pour un acces hors ligne.

Cette cheatsheet est-elle a jour ?

Oui, nos cheatsheets sont regulierement mises a jour pour refleter les dernieres versions et bonnes pratiques de React. Si vous remarquez une information obsolete, n'hesitez pas a nous contacter.