Comment changer la couleur d'arrière-plan à l'aide de React

React, en tant que bibliothèque JavaScript populaire, nous fournit des outils et des technologies puissants pour créer des applications Web interactives. Dans cet article, nous explorerons des exemples de code sur la façon d'utiliser React pour modifier la couleur d'arrière-plan afin de vous aider à démarrer rapidement et à obtenir des effets de couleur d'arrière-plan personnalisés.

introduction

Dans le développement Web, la couleur d’arrière-plan est l’un des éléments importants dans la conception des pages. En changeant la couleur d’arrière-plan, nous pouvons ajouter un attrait visuel à notre site Web ou à notre application et créer une atmosphère différente. React fournit un moyen simple et élégant de changer la couleur d’arrière-plan. Jetons un coup d’œil !

Chapitre 1 : Création d'un projet React

Tout d’abord, nous devons créer un projet React. Si vous êtes déjà familiarisé avec la configuration d'un environnement de développement React, vous pouvez ignorer cette étape.

Créez un nouveau projet React dans votre environnement de développement à l'aide de la commande suivante :

npx create-react-app background-color-app
cd background-color-app

Chapitre 2 : Ajouter une fonction de remplacement de la couleur d'arrière-plan

Maintenant, nous allons ajouter la fonctionnalité de changement de couleur d'arrière-plan dans notre application React. Tout d’abord, nous devons créer un nouveau composant pour contrôler le changement de couleur d’arrière-plan.

Créez un fichier nommé sous srcle dossier BackgroundColorChanger.jset ajoutez le code suivant :

import React, { useState } from 'react';

const BackgroundColorChanger = () => {
  const [backgroundColor, setBackgroundColor] = useState('#ffffff');

  const handleColorChange = (event) => {
    setBackgroundColor(event.target.value);
  };

  return (
    <div>
      <h2>背景颜色更换器</h2>
      <input type="color" value={backgroundColor} onChange={handleColorChange} />
      <div style={
   
   { backgroundColor, width: '200px', height: '200px' }}></div>
    </div>
  );
};

export default BackgroundColorChanger;

Dans le code ci-dessus, nous utilisons useStatedes hooks React pour gérer l'état de la couleur d'arrière-plan. Grâce handleColorChangeà la fonction, nous pouvons mettre à jour la couleur d'arrière-plan en fonction de la couleur sélectionnée par l'utilisateur.

Chapitre 3 : Utiliser le changeur de couleur d'arrière-plan dans votre application

Nous devons maintenant utiliser le composant changeur de couleur d'arrière-plan que nous venons de créer dans notre application. Ouvrez src/App.jsle fichier et ajoutez le code suivant au fichier :

import React from 'react';
import BackgroundColorChanger from './BackgroundColorChanger';

const App = () => {
  return (
    <div>
      <h1>React背景颜色更换示例</h1>
      <BackgroundColorChanger />
    </div>
  );
};

export default App;

Dans le code ci - dessus, nous BackgroundColorChangerajoutons le composant au composant principal de l'application App.

Chapitre 4 : Exécuter l'application

Nous avons maintenant fini de coder le changeur de couleur d’arrière-plan. Lançons l'application et voyons comment cela se passe.

Démarrez l'application en exécutant la commande suivante dans le terminal :

npm start

Ouvrez-le dans votre navigateur http://localhost:3000et vous verrez une page simple avec un changeur de couleur d'arrière-plan. En sélectionnant une couleur différente, vous verrez la couleur d’arrière-plan changer en conséquence.

en conclusion

Toutes nos félicitations! Vous avez réussi à changer la couleur d'arrière-plan à l'aide de React. Grâce aux exemples de code de cet article, vous avez appris à créer un projet React, à ajouter une fonctionnalité de changement de couleur d'arrière-plan et à l'utiliser dans votre application. J'espère que cet article vous a été utile et je vous souhaite plus de succès dans le développement de React !

Ce qui précède est un exemple de code simple et pratique sur la façon de changer la couleur d'arrière-plan à l'aide de React. Merci pour la lecture!

Remarque : Les exemples de cet article utilisent des composants de fonction React et des Hooks. Si vous utilisez des composants de classe, ajustez en conséquence.

Liens de référence :