7.6 Modifier le Style en Utilisant JavaScript en React

Modifier Style JavaScript React est une compétence précieuse pour les développeurs cherchant à créer des interfaces utilisateur réactives et dynamiques. Comprendre comment manipuler les styles directement à partir de vos composants React vous permettra de fournir une expérience utilisateur immersive. Dans ce tutoriel, nous allons explorer comment cela fonctionne et comment l’implémenter avec des exemples concrets de code.

Introduction à la Modification des Styles en React avec JavaScript

Dans React, les styles inline et les classes CSS sont couramment utilisés pour mettre en forme vos composants. Cependant, pour créer des interactions plus dynamiques, vous pouvez utiliser JavaScript pour modifier les styles de manière conditionnelle ou en réponse aux événements utilisateur. Pour en savoir plus sur les composants par classe et fonction en React, consultez cet article.

Utilisation des Styles Inline avec les Objets JavaScript

Les objets JavaScript sont souvent utilisés pour définir des styles inline dans React. Cette méthode permet de lier les propriétés CSS directement à des variables JavaScript, ce qui offre plus de flexibilité pour des modifications dynamiques. Apprenez comment maîtriser les objets en JavaScript pour développer en React.

import React from 'react';

function StyledComponent() {
  const style = {
    color: 'blue',
    backgroundColor: 'lightgray',
    padding: '10px',
    borderRadius: '5px',
  };

  return (
    

      Ce texte est stylisé avec des styles JavaScript inline.
    
  );
}

export default StyledComponent;

Modifier Dynamiquement les Styles avec les Événements

Une des puissantes fonctionnalités de React est la capacité de modifier les styles en réponse à des événements utilisateur, comme les hover, clicks ou soumissions de formulaire. Si vous souhaitez approfondir votre compréhension des événements disponibles dans React, explorez notre guide complet.

import React, { useState } from 'react';

function DynamicStyledButton() {
  const [hovered, setHovered] = useState(false);

  const buttonStyle = {
    backgroundColor: hovered ? 'darkblue' : 'blue',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
  };

  return (
     setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      Hover me!
    
  );
}

export default DynamicStyledButton;

Application dans un Projet Réel

Prenons l’exemple d’une to-do liste où chaque élément peut être surligné pour indiquer qu’il est terminé. Les styles seront modifiés dynamiquement lors de l’interaction utilisateur. Découvrez comment mener un projet de to-do list avec React.

import React, { useState } from 'react';

function TodoItem({ task }) {
  const [completed, setCompleted] = useState(false);

  const taskStyle = {
    textDecoration: completed ? 'line-through' : 'none',
    cursor: 'pointer',
  };

  return (
    
 setCompleted(!completed)}>
      {task}
    
  );
}

function TodoList() {
  const tasks = ['Apprendre React', 'Compléter cet exemple', 'Lire la documentation'];

  return (
    

      {tasks.map(task => (
        
      ))}
    
  );
}

export default TodoList;

Conclusion

La modification des styles en utilisant JavaScript dans React vous permet de créer des applications plus interactives et réactives. En explorant les styles inline, l’utilisation d’événements et de hooks, vous êtes désormais équipé pour manipuler les apparences de vos composants de manière dynamique. Pour approfondir vos connaissances, consultez des tutoriels sur la création de votre première application React. N’hésitez pas aussi à consulter des ressources supplémentaires comme la documentation officielle de React ou des cours sur des plateformes comme Udemy et Coursera pour continuer à développer vos compétences en développement front-end.