Utiliser des librairies en React

Introduction

Dans tous les projets React, il est très commun que les développeurs ajoutent des librairies externes pour éviter de réinventer la roue et accélérer le développement. Aujourd'hui, je vais vous montrez comment installer et utiliser une librairie en React. Pour cet article, j'ai choisi d'utiliser GSAP et ensuite Three.js, des composants intéressant à exploiter en développement web pour faire des animations et des modèles 3D.

Pourquoi utiliser des librairies ?

Parfois, coder tout soi-même peut être long et compliqué. Les librairies offrent :

• Des solutions prêtes : Éviter d’écrire du code compliqué pour des fonctionnalités simple.
• Sauve du temps : Moins de développement.
• Meilleur organisation : Des composants déjà optimisés et bien documentés.

Installation d'une librairie

Avant d’utiliser la librairie, il faut d'abord l'installer dans notre projet React.

1. Assurez-vous d’avoir un projet React en place. Si ce n’est pas encore fait, vous pouvez suivre mon article sur comment initialiser un projet React. mande dans le terminal :

npm install gsap

npm install three

Utiliser GSAP dans un projet

GSAP (GreenSock Animation Platform) est une librairie ultra-puissante pour animer des éléments en JavaScript.

1. Créer une animation simple avec GSAP

On va faire bouger un carré de gauche à droite avec GSAP.

Dans App.js :

import React, { useEffect, useRef } from "react";
import gsap from "gsap";

const AnimationGSAP = () => {
  const boxRef = useRef(null);

  useEffect(() => {
    gsap.to(boxRef.current, { x: 300, duration: 2, repeat: -1, yoyo: true });
  }, []);

  return (
    <div style={{ display: "flex", justifyContent: "center", marginTop: "50px" }}>
      <div
        ref={boxRef}
        style={{
          width: "100px",
          height: "100px",
          backgroundColor: "blue",
          position: "relative",
        }}
      />
    </div>
  );
};

export default AnimationGSAP;

1. D'abord, useRef sélectionne l’élément div du carré.
2. useEffect va utiliser l'animatio dès le chargement du composant.
3. gsap.to(boxRef.current, { x: 300, duration: 2, repeat: -1, yoyo: true }) : Va déplacr le carré de 0 à 300 pixels en 2 secondes. repeat: -1 signifie que l’animation va se répèter à l'infini. yoyo: true fait revenir le carré à sa position initiale avant de repartir.

Demo:

Utiliser Three.js dans un projet

Three.js permet d’afficher des scènes 3D dans un navigateur.

Créer un cube métallique qui tourne

On va créer un cube avec un effet métallique qui tourne dans l’espace.

Dans App.js :

import React, { useEffect, useRef } from "react";
import * as THREE from "three";

const SceneThreeJS = () => {
  const mountRef = useRef(null);

  useEffect(() => {
    if (!mountRef.current) return;

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xd3d3d3);
    mountRef.current.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshStandardMaterial({ metalness: 1, roughness: 0.3, color: 0xaaaaaa });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    const light = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(light);
    
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(5, 5, 5);
    scene.add(directionalLight);

    camera.position.z = 5;

    const animate = () => {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    };

    animate();

    return () => {
      if (mountRef.current) {
        mountRef.current.removeChild(renderer.domElement);
      }
    };
  }, []);

  return <div ref={mountRef} />;
};

export default SceneThreeJS;

1. D'abord on crée une scène, une caméra et un renderer.
2. On génère un cube métallique.
3. Ajout de lumières pour donner un effet plus réaliste et plus beau.
4. L’animation tourne en boucle pour faire tourner le cube sur lui-même.

Demo:

Conclusion

Les librairies sont des outils primordiaux lorsqu'on développe des applications. Il n'est pas nécessaire de réinventer la roue à chaque fois, il suffit simplement d'installer ce dont on a besoin.

Aujourd'hui, on a vu comment utiliser GSAP pour les animations et Three.js pour les modèles 3D. Ces deux librairies sont ultra puissantes et permettent de rendre vos projets React plus interactifs et dynamiques.

Sources

• Melvynx • Apprendre à coder. (2024, 12 mars). Apprendre REACT en juste 5 minutes ! YouTube. https://www.youtube.com/watch?v=_n_UVPKC_AE
• Documentation GSAP. (s.d.) https://gsap.com/docs/v3
• Documentation three.js. (s.d.). https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene