Passer la souris dans le cadre
React
React, souvent appelé React.js, est une bibliothèque JavaScript open-source conçue par Facebook et utilisée par des millions de développeurs à travers le monde. Depuis sa création en 2013, elle est devenue un incontournable pour le développement d'interfaces utilisateur (UI) dynamiques, rapides et évolutives. Si vous recherchez une solution moderne et performante pour créer des applications web, React est un choix stratégique.
JSX
Virtual DOM
Composants
Propriétés
État
Contexte
Hooks
Portail
Ref
Render Props
Higher-Order Components
Lazy Loading
Suspense
React Router
JSX
Virtual DOM
Composants
Propriétés
État
Contexte
Hooks
Portail
Ref
Render Props
Higher-Order Components
Lazy Loading
Suspense
React Router
Installation de React
Fonctionnalités de React
JSX
Définition : JSX est une syntaxe qui permet d'écrire du HTML directement dans JavaScript. Elle facilite la création d'éléments React et les rend plus lisibles. Les balises HTML et JavaScript peuvent être combinées dans un seul fichier pour un développement rapide et efficace.
// Exemple basique avec JSX
const App = () => (
<div>
<h1>Hello, JSX!</h1>
</div>
);Virtual DOM
Définition : Le Virtual DOM est une copie légère du DOM réel utilisée par React. Lorsqu'un changement est effectué, React compare le Virtual DOM au DOM réel et applique uniquement les modifications nécessaires. Cela améliore les performances en réduisant les manipulations directes du DOM.
// React met à jour uniquement les parties modifiées
const element = <h1>Hello, Virtual DOM!</h1>;
ReactDOM.render(element, document.getElementById('root'));Composants
Définition : Les composants sont des blocs réutilisables de code React qui encapsulent des éléments d'interface utilisateur. Ils peuvent être des fonctions ou des classes. Les composants permettent une meilleure modularité et la réutilisation de code.
// Composant fonctionnel
const Button = () => <button>Click me</button>;
// Utilisation du composant
const App = () => (
<div>
<Button />
</div>
);Propriétés
Définition : Les props (propriétés) sont utilisées pour transmettre des données d'un composant parent à un composant enfant. Elles sont immuables, ce qui signifie qu'un composant enfant ne peut pas modifier les props qu'il reçoit.
// Transmission de props
const Greeting = ({ name }) => <h1>Hello, {name}!</h1>;
// Utilisation
const App = () => <Greeting name='React' />;État
Définition : L'état (state) est un objet local à chaque composant, utilisé pour gérer des données dynamiques. Il permet aux composants de répondre à des interactions utilisateur ou à des changements dans les données.
// Gestion de l'état avec useState
import { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
};Contexte
Définition : Le contexte est une méthode de React pour partager des données (comme un thème ou une langue) à travers l'arbre des composants sans avoir besoin de passer des props manuellement à chaque niveau.
// Exemple avec le contexte
import { createContext, useContext } from 'react';
const ThemeContext = createContext('light');
const App = () => (
<ThemeContext.Provider value='dark'>
<Child />
</ThemeContext.Provider>
);
const Child = () => {
const theme = useContext(ThemeContext);
return <p>Theme: {theme}</p>;
};Hooks
Définition : Les hooks sont des fonctions qui permettent d'utiliser des fonctionnalités React (comme l'état ou le cycle de vie) dans des composants fonctionnels. Les hooks les plus courants sont useState et useEffect.
// Exemple avec useState et useEffect
import { useState, useEffect } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`Count is: ${count}`);
}, [count]);
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
};Portail
Définition : Les portails permettent de rendre un composant dans un élément DOM différent de celui de son parent. Cela est utile pour les modales ou les tooltips qui doivent apparaître en dehors de l'arbre principal.
// Exemple de portail
import ReactDOM from 'react-dom';
const Modal = () => ReactDOM.createPortal(
<div>Modal Content</div>,
document.getElementById('modal-root')
);Ref
Définition : Une ref est un objet spécial fourni par React pour accéder directement à un élément DOM ou à une instance de composant. Cela est utile pour gérer des focus, des animations, ou mesurer la taille d'un élément.
// Exemple avec useRef pour un champ de saisie
import { useRef } from 'react';
const InputFocus = () => {
const inputRef = useRef();
return (
<div>
<input ref={inputRef} placeholder='Tapez ici...' />
<button onClick={() => inputRef.current.focus()}>Focus</button>
</div>
);
};Render Props
Définition : Un pattern où une fonction est passée en prop pour définir ce qu’un composant doit rendre. Cela permet de partager des comportements entre plusieurs composants.
// Exemple avec le pattern Render Props
const MouseTracker = ({ render }) => {
const [position, setPosition] = useState({ x: 0, y: 0 });
const handleMouseMove = (e) => setPosition({ x: e.clientX, y: e.clientY });
return <div onMouseMove={handleMouseMove}>{render(position)}</div>;
};
const App = () => (
<MouseTracker render={({ x, y }) => <p>Position : {x}, {y}</p>} />
);Higher-Order Components
Définition : Un Higher-Order Component (HOC) est une fonction qui prend un composant en entrée et retourne un nouveau composant enrichi. Cela permet de réutiliser des fonctionnalités entre plusieurs composants.
// Exemple avec un HOC pour ajouter un message d'accueil
const withGreeting = (Component) => (props) => (
<div>
<p>Bienvenue !</p>
<Component {...props} />
</div>
);
const Hello = () => <p>Hello React!</p>;
const EnhancedHello = withGreeting(Hello);Lazy Loading
Définition : Le Lazy Loading permet de charger des composants ou des ressources uniquement lorsqu'elles sont nécessaires. Cela améliore les performances en réduisant la taille initiale du bundle.
// Exemple de Lazy Loading avec React
import React, { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./MyComponent'));
const App = () => (
<Suspense fallback={<p>Chargement...</p>}>
<LazyComponent />
</Suspense>
);Suspense
Définition : Suspense est un composant React utilisé pour gérer les états de chargement lors du rendu asynchrone. Il est souvent utilisé avec le Lazy Loading pour afficher un indicateur de chargement.
// Exemple de Suspense pour le Lazy Loading
import React, { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./MyComponent'));
const App = () => (
<Suspense fallback={<p>Chargement en cours...</p>}>
<LazyComponent />
</Suspense>
);React Router
Définition : React Router est une bibliothèque pour gérer les routes dans une application React. Elle permet de naviguer entre différentes pages ou vues sans recharger l'application.
// Exemple avec React Router
import { BrowserRouter, Routes, Route } from 'react-router-dom';
const Home = () => <h1>Accueil</h1>;
const About = () => <h1>À propos</h1>;
const App = () => (
<BrowserRouter>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
</Routes>
</BrowserRouter>
);News populaire
If Not React, Then What?
Frameworkism is now the dominant creed of today's frontend discourse, and it's bullshit. We owe it to ourselves and to our users to reject dogma and embrace engineering as a discipline.
Lire la suiteBoardgame.io: an engine for creating turn-based games using JavaScript
State Management and Multiplayer Networking for Turn-Based Games - boardgameio/boardgame.io
Lire la suite
We switched from Next.js to Astro (and why it might interest you)
Follow the first article of a series in which we'll try to summarize our journey with Astro, sharing many cool...
Lire la suite