On va voir comment apprendre comment utiliser des images dans un 🧩 React ⚛️ !
Que ce soit pour afficher des images dans un composant unique ou pour les réutiliser dans différents endroits de ton application, nous verrons comment faire ça.
Il est recommandé de stocker les images spécifiques à un composant dans le même dossier que ce composant.
Cela rendra ton composant plus facilement réutilisable en copiant simplement le dossier du composant dans un autre projet.
Si une image est utilisée à plusieurs endroits différents de ton application, tu peux créer un dossier assets situé à la racine du dossier src pour y stocker ces images partagées.
Pour utiliser une image dans un 🧩 composant React ⚛️, il te suffit de l'importer comme n'importe quelle librairie JavaScript.
Ensuite, tu peux utiliser la valeur ainsi importée comme attribut src (entre accolades) d'une balise <img>.
Supposons que tu as une image nommée image.png que tu souhaites centrer dans ta page. Voici comment tu pourrais le faire :
-
Tout d'abord, assure-toi d'avoir placé ton image dans le bon dossier (soit avec le composant, soit dans le dossier
assets). -
Ensuite, dans ton fichier JavaScript ou JSX, importe l'image de la manière suivante :
import React from "react"; import image from "./chemin/vers/ton/image.png";
On va créer ta première application React ⚛️ en utilisant ⚡Vite.
C'est simple et rapide, alors vamos. 🏋🏻♀️
Tout d'abord, assure-toi d'avoir PNPM et Node.js installés sur ta machine. Si tu as déjà installé React ⚛️ globalement avec NPM (-g), désinstalle-le avec npm uninstall -g create-react-app.
Nous utiliserons PNPM pour créer notre application avec la dernière version de ⚡Vite, React ⚛️, et d'autres dépendances.
Installe PNPM avec :
npm i -g pnpmMaintenant, crée ton application ⚡Vite en utilisant la commande suivante :
pnpm create vite a-brillant-react-appSuis les instructions pour configurer ton projet. Choisis React et JavaScript comme options. Une fois terminé, rends-toi dans le dossier créé avec :
cd a-brillant-react-appDans ton projet ⚡Vite, tu trouveras un fichier package.json contenant les informations de ton application, le dossier node_modules pour les dépendances, un dossier public pour les ressources statiques, et le dossier src contenant tes fichiers sources.
Avant de commencer, installe les dépendances du projet avec pnpm install. Pour lancer ton application, utilise la commande suivante :
pnpm run devRends-toi sur http://localhost:5173/ dans ton navigateur (ou sur http://127.0.0.1:4000/ si tu utilises l'extension ⚡Vite pour VS🧊Code) pour voir l'application ⚛️ par défaut.
Crée un fichier main.jsx dans le dossier /src. Cela servira de point d'entrée pour ton application. Importe React ⚛️ et ReactDOM pour rendre l'application dans le DOM (Document Object Model) :
import React from "react";
import ReactDOM from "react-dom";Crée un composant App :
const App = () => (
<div>
<h1>Hello world !</h1>
<p>Comment ça va ?</p>
</div>
);Intègre ce composant dans le DOM en utilisant ReactDOM :
ReactDOM.render(<App />, document.getElementById("root"));Désormais, si tu vas sur ton serveur local tu connais on en a déjà parlé (🔎ctrl+f 4000 ou 🔎ctrl+f 5173 in this README.md).