Using libraries in React

Introduction

In all React projects, it's very common for developers to add external libraries to avoid reinventing the wheel and speed up development. Today, I'm going to show you how to install and use a library in React. For this article, I've chosen to use GSAP and then Three.js, interesting components to use in web development for creating animations and 3D models.

Why Use Libraries?

Sometimes, coding everything yourself can be long and complicated. Libraries offer:

• Ready-made solutions: Avoid writing complicated code for simple features.

• Saves time: Less development.

• Better organization: Components that are already optimized and well-documented.

Installing a Library

Before using the library, you must first install it in your React project.

1. Make sure you have a React project set up. If you haven't already, you can follow my article on how to initialize a React project. Command in the terminal:

1npm install gsap

1npm install three

Using GSAP in a project

GSAP (GreenSock Animation Platform) is an extremely powerful library for animating elements in JavaScript.

1. Create a simple animation with GSAP

We're going to move a square from left to right using GSAP.

In App.js:

1import React, { useEffect, useRef } from "react";
2
3import gsap from "gsap";
4
5const AnimationGSAP = () => {
6const boxRef = useRef(null);
7
8useEffect(() => {
9gsap.to(boxRef.current, { x: 300, duration: 2, repeat: -1, yoyo: true });
10
11}, []);
12
13return (
14
15<div style={{ display: "flex", justifyContent: "center", marginTop: "50px" }}>
16
17<div
18ref={boxRef}
19
20style={{
21width: "100px",
22
23height: "100px",
24
25backgroundColor: "blue",
26
27position: "relative",
28
29}}
30
31/>
32
33</div>
34
35);
36
37};
38
39export default AnimationGSAP;
40

1. First, useRef selects the div element of the square.

2. useEffect will use the animation as soon as the component loads.

3. gsap.to(boxRef.current, { x: 300, duration: 2, repeat: -1, yoyo: true }): This will move the square from 0 to 300 pixels in 2 seconds. repeat: -1 means the animation will repeat indefinitely. yoyo: true returns the square to its initial position before starting again.

Demo:

Using Three.js in a project

Three.js allows you to display 3D scenes in a browser.

Creating a rotating metallic cube

We will create a cube with a metallic effect that rotates in space.

In App.js:

1import React, { useEffect, useRef } from "react";
2import * as THREE from "three";
3
4const SceneThreeJS = () => { 
5const mountRef = useRef(null); 
6
7useEffect(() => { 
8if (!mountRef.current) return; 
9
10const scene = new THREE.Scene(); 
11const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 
12const renderer = new THREE.WebGLRenderer(); 
13
14renderer.setSize(window.innerWidth, window.innerHeight); 
15renderer.setClearColor(0xd3d3d3); 
16mountRef.current.appendChild(renderer.domElement); 
17
18const geometry = new THREE.BoxGeometry(); 
19const material = new THREE.MeshStandardMaterial({ metalness: 1, roughness: 0.3, color: 0xaaaaaa }); 
20const cube = new THREE.Mesh(geometry, material); 
21scene.add(cube); 
22
23const light = new THREE.AmbientLight(0xffffff, 0.5); 
24scene.add(light); 
25
26const directionalLight = new THREE.DirectionalLight(0xffffff, 1); 
27directionalLight.position.set(5, 5, 5); 
28scene.add(directionalLight); 
29
30camera.position.z = 5; 
31
32const animate = () => { 
33requestAnimationFrame(animate); 
34cube.rotation.x += 0.01; 
35cube.rotation.y += 0.01; 
36renderer.render(scene, camera); 
37}; 
38
39animate(); 
40
41return () => { 
42if (mountRef.current) { 
43mountRef.current.removeChild(renderer.domElement); 
44} 
45}; 
46}, []); 
47
48return <div ref={mountRef} />;
49
50};
51
52export default SceneThreeJS;
53

1. First, we create a scene, a camera, and a renderer.

2. We generate a metal cube.

3. We add lights to give a more realistic and aesthetically pleasing effect.

4. The animation loops to rotate the cube.

Demo:

Conclusion

Libraries are essential tools when developing applications. It's not necessary to reinvent the wheel every time; simply install what you need.

Today, we saw how to use GSAP for animations and Three.js for 3D models. These two libraries are incredibly powerful and allow you to make your React projects more interactive anddynamics.

Sources

• Melvynx • Learn to Code. (March 12, 2024). Learn React in just 5 minutes! YouTube. https://www.youtube.com/watch?v=_n_UVPKC_AE
• GSAP Documentation. (n.d.) https://gsap.com/docs/v3
• three.js Documentation. (n.d.). https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene