Comment créer une application React après la dépréciation de l'ARC

Salut, amis développeurs ! ?

Je travaillais récemment sur un projet et j'ai appris que l'équipe React avait abandonné create-react-app (CRA) il y a deux ans. ? Naturellement, cela m'a fait réfléchir à d'autres moyens de configurer une application React basée sur JavaScript.

Quand j'ai consulté la documentation officielle de React, j'ai remarqué qu'ils se concentrent désormais sur les frameworks full-stack comme Next.js et Gatsby. Celles-ci sont géniales si vous créez une application de bout en bout, mais elles peuvent être excessives si vous souhaitez simplement un simple projet basé sur JSX. ?️

Avant de commencer - Que fait l'ARC ? - Create React App (CRA) est un package puissant qui automatise la configuration d'un nouveau projet React. Il gère toute la configuration nécessaire et installe les dépendances requises, fournissant ainsi un bundle sans configuration. Cela permet aux développeurs de commencer à créer leurs applications sans se soucier de la configuration complexe des outils et des configurations.

Alors, maintenant que CRA est obsolète, comment configurer une application JSX pure ? ?
Ici, je vais partager deux choix populaires (Vite et Webpack) pour créer une application basée sur le client avec la bibliothèque React. Dans la section ci-dessous, nous comparerons ces outils et vous donnerons des instructions de configuration pour chacun. Allons-y ! ?‍♂️

⚡ Vite contre Webpack ?

Vite

Avantages :

-Serveur de développement rapide avec remplacement instantané du module à chaud (HMR).
-Prise en charge intégrée des fonctionnalités JavaScript modernes.
-Une configuration minimale est nécessaire pour commencer.

Inconvénients :

-Outil plus récent, il peut donc bénéficier de moins de support communautaire que Webpack.

Webpack

Avantages :

-Hautement configurable et flexible pour les configurations de construction complexes.
-Écosystème de plugins étendu et support communautaire.
-Une expérience éprouvée avec de nombreuses applications à grande échelle.

Inconvénients :

-La configuration initiale peut être plus complexe et plus longue.
-Temps de construction plus lents par rapport à Vite.
-Configuration d'une application React avec Vite

Créer un nouveau projet Vite :

1. Exécutez la commande Vite dans votre terminal

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

2. Démarrez le serveur de développement :

npm run dev

Configuration Vite :

Vite nécessite une configuration minimale prête à l'emploi. La configuration par défaut devrait fonctionner pour la plupart des projets React.
Vous pouvez personnaliser le vite.config.js si nécessaire.

Configurer une application React avec Webpack

1. Initialisez votre projet :

mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react

2. Créer une structure de projet :

 1. Create a src folder and add index.js and App.js files.
 2. Create a public folder and add an index.html file.

3. Configurer Webpack :

• Créez un fichier webpack.config.js :

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

4. Configuration Babel :

• Créez un fichier .babelrc :

npm run dev

5. Démarrez le serveur de développement :

service npx webpack

Conclusion
Vite et Webpack offrent tous deux des moyens puissants de configurer une application React sans CRA. Vite offre une configuration plus rapide et plus simple, idéale pour les projets de taille moyenne et le développement rapide. Webpack, quant à lui, offre une configurabilité étendue et un écosystème robuste, ce qui le rend adapté aux projets plus complexes.

Choisissez l'outil qui correspond le mieux aux exigences et préférences de votre projet. Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!