React

Comment faire du Lazyload en React

par

const LazyLoadImage = ({ alt, src, className, loadInitially = false, observerOptions = { root: null, rootMargin: ‘200px 0px’ }, …props }) => { const observerRef = React.useRef(null); const imgRef = React.useRef(null); const [isLoaded, setIsLoaded] = React.useState(loadInitially); const observerCallback = React.useCallback( entries => { if (entries[0].isIntersecting) { observerRef.current.disconnect(); setIsLoaded(true); } }, [observerRef] ); React.useEffect(() => { … Lire la suite

Comment définir target=_blank dans React

par

Définir la cible à _vide dans React # Pour définir le target d’un élément à _blank En React, utilisez un élément anchor et définissez l’élément rel prop, par exemple <a href= »https://example.com » target= »_blank » rel= »noopener noreferrer »>. Le site _blank signifie que la ressource est chargée dans un nouvel onglet. export default function App() { const openInNewTab = … Lire la suite

Définition des styles en ligne dans React.js

par

Définition des styles en ligne dans React.js # Pour définir des styles en ligne dans React : Définissez l’option style de l’élément à un objet. Définissez les propriétés et valeurs CSS spécifiques pour styliser l’élément. Par exemple, <div style={{backgroundColor: ‘salmon’, color: ‘white’}}>. const App = () => { const stylesObj = { backgroundColor: ‘lime’, color: … Lire la suite

Comment mettre à jour votre version de React

par

Comment mettre à jour votre version de React # Pour mettre à jour votre version de React, installez les dernières versions des éléments suivants react et react-dom en exécutant npm install react@latest react-dom@latest. Si vous utilisez create-react-appmettez également à jour la version de react-scripts. Ouvrez votre terminal dans le répertoire racine de votre projet (où … Lire la suite

Basculer une classe au clic en React

par

Basculer une classe au clic en React # Pour faire basculer une classe au clic dans React : Définissez l’option onClick sur l’élément. Stocke l’état actif dans une variable d’état. Ajouter conditionnellement la classe en utilisant un opérateur ternaire. import {useState} from ‘react’; import ‘./App.css’; export default function App() { const [isActive, setIsActive] = useState(false); … Lire la suite

Comment inverser un tableau en React

par

Inverser un tableau en React # Pour inverser un tableau dans React : Utilisez la syntaxe d’étalement (…) pour créer une copie superficielle du tableau. Appelez la fonction reverse() sur la copie. Stocker le résultat dans une variable. export default function App() { const people = [ {name: ‘Alice’, country: ‘Austria’}, {name: ‘Bob’, country: ‘Belgium’}, … Lire la suite

Exportation de composants dans React.js | bobbyhadz

par

Exportation de composants dans React.js # Utiliser les exportations nommées pour exporter un composant dans React, par ex. export function Button() {}. Le composant exporté peut être importé à l’aide de la commande nommé import comme import {Button} from ‘./another-file.js’. Vous pouvez utiliser autant de d’exportations nommées que nécessaire dans un fichier. Voici un exemple … Lire la suite