ReactJS - Création d'une application React

Salut à toi, futur développeur React ! Je suis ravi de te guider à travers ce voyage passionnant de création de ta première application React. En tant que quelqu'un qui enseigne l'informatique depuis des années, je peux te garantir que React est non seulement puissant mais aussi amusant à apprendre. Alors, plongeons dedans !

ReactJS - Creating a React Application

Qu'est-ce que React ?

Avant de commencer à coder, comprenons ce qu'est React. React est une bibliothèque JavaScript populaire pour construire des interfaces utilisateur. Elle a été développée par Facebook et est maintenant utilisée par de nombreuses grandes entreprises comme Netflix, Instagram et Airbnb. Pense à React comme un ensemble de blocs Lego que tu peux utiliser pour construire des applications web complexes facilement.

Introduction

Pour créer une application React, nous avons besoin de quelques outils. Ne t'inquiète pas si tu n'as jamais utilisé ceux-ci auparavant - nous allons passer chaque étape ensemble !

Prérequis

Node.js et npm (Node Package Manager)
Un éditeur de code (je recommande Visual Studio Code)

Si tu n'as pas encore installé ceux-ci, prends un moment pour le faire. C'est comme préparer ta cuisine avant de cuisiner un repas délicieux !

Utilisation du bundler Rollup

Commençons par créer une application React en utilisant Rollup. Rollup est un bundler de modules JavaScript qui.compile des morceaux de code en quelque chose de plus grand et plus complexe.

Étape 1 : Configuration du projet

Premièrement, créons un nouveau répertoire pour notre projet et initialisons-le :

mkdir my-react-app
cd my-react-app
npm init -y

Cela crée un nouveau dossier et initialise un nouveau projet Node.js. C'est comme poser les fondations de notre maison !

Étape 2 : Installation des dépendances

Maintenant, installons les paquets nécessaires :

npm install react react-dom
npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-replace rollup-plugin-babel @rollup/plugin-babel @babel/preset-react rollup-plugin-terser

Ne sois pas submergé par ces noms longs. Pense à eux comme ingrédients pour notre recette React !

Étape 3 : Création des fichiers de configuration

Créons deux fichiers importants :

rollup.config.js :

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
sourcemap: true,
},
plugins: [
resolve(),
commonjs(),
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
babel({
presets: ['@babel/preset-react'],
}),
terser(),
],
};

Ce fichier indique à Rollup comment bundler notre application. C'est comme donner des instructions à un chef sur la façon de préparer un plat.

.babelrc :

{
"presets": ["@babel/preset-react"]
}

Ce fichier configure Babel, qui aide à traduire le JavaScript moderne dans une version que les anciens navigateurs peuvent comprendre.

Étape 4 : Création de nos composants React

Maintenant, créons notre premier composant React ! Crée un nouveau fichier src/App.js :

import React from 'react';

function App() {
return (
<div>
<h1>Hello, React !</h1>
<p> Bienvenue dans ma première application React !</p>
</div>
);
}

export default App;

Ceci est notre composant principal. C'est comme la star de notre spectacle !

Ensuite, crée src/index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

Ce fichier est responsable du rendu de notre composant App dans le HTML.

Étape 5 : Création du fichier HTML

Crée un nouveau fichier public/index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon application React</title>
</head>
<body>
<div id="root"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>

C'est où notre application React sera montée.

Étape 6 : Ajout de scripts à package.json

Mets à jour ton package.json pour inclure ces scripts :

"scripts": {
"build": "rollup -c",
"start": "rollup -c -w"
}

Ces scripts nous aideront à construire et à exécuter notre application.

Étape 7 : Construction et exécution de l'application

Maintenant, faisons vivre notre création ! Exécute :

npm run build

Cela créera notre fichier JavaScript bundlé. Pour voir ton application, ouvre public/index.html dans un navigateur. Félicitations ! Tu viens de créer ta première application React en utilisant Rollup !

Utilisation du bundler Parcel

Maintenant que nous avons vu comment utiliser Rollup, essayons un autre bundler populaire : Parcel. Parcel est connu pour son approche sans configuration, ce qui le rend super facile à utiliser.

Étape 1 : Configuration du projet

Créons un nouveau projet :

mkdir my-parcel-react-app
cd my-parcel-react-app
npm init -y

Étape 2 : Installation des dépendances

Installe React et Parcel :

npm install react react-dom
npm install --save-dev parcel-bundler

Étape 3 : Création de nos composants React

Crée src/App.js :

import React from 'react';

function App() {
return (
<div>
<h1>Hello, React avec Parcel !</h1>
<p>Cette application a été bundlée avec Parcel.</p>
</div>
);
}

export default App;

Crée src/index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

Étape 4 : Création du fichier HTML

Crée src/index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon application React avec Parcel</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>

Notez comment nous nous lions directement à notre fichier index.js. Parcel s'occupera du bundling pour nous !

Étape 5 : Ajout de scripts à package.json

Mets à jour ton package.json :

"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
}

Étape 6 : Exécution de l'application

Maintenant, lançons notre application :

npm start

Parcel ouvrira automatiquement ton application dans un navigateur. Toute modification que tu fais sera instantanément reflétée !

Pour construire pour la production :

npm run build

Cela créera des fichiers optimisés dans le répertoire dist.

Comparaison de Rollup et Parcel

Voici une comparaison rapide des deux bundlers que nous avons utilisés :

Fonctionnalité	Rollup	Parcel
Configuration	Nécessite un fichier de configuration	Sans configuration
Vitesse	Rapide	Très rapide
Taille du bundle	Généralement plus petit	Légèrement plus grand
Courbe d'apprentissage	Plus pentue	Douce
Flexibilité	Très personnalisable	Moins personnalisable

Les deux bundlers ont leurs forces, et le choix entre eux dépend souvent des besoins spécifiques de ton projet.

Conclusion

Félicitations ! Tu viens de créer des applications React en utilisant Rollup et Parcel. Souviens-toi, le voyage de mille milles commence par un seul pas, et tu viens de faire tes premiers pas dans le monde passionnant du développement React.

While you continue to learn and grow, you'll discover that React opens up a whole new world of possibilities in web development. It's like learning to paint - at first, you might struggle with basic shapes, but soon you'll be creating masterpieces!

Keep practicing, stay curious, and most importantly, have fun! React is a powerful tool, but it's also a joy to use. Happy coding!

Credits: Image by storyset

Tutoriel précédent:

ReactJS - Architecture

Tutoriel suivant:

ReactJS - JSX