So erstellen Sie eine React-Anwendung nach der CRA-Veraltung

Hallo, liebe Entwickler! ?

Ich habe kürzlich an einem Projekt gearbeitet und erfahren, dass das React-Team die Create-React-App (CRA) vor zwei Jahren veraltet hat. ? Das brachte mich natürlich dazu, über alternative Möglichkeiten zum Einrichten einer JavaScript-basierten React-Anwendung nachzudenken.

Als ich mir die offizielle React-Dokumentation angesehen habe, ist mir aufgefallen, dass sie sich jetzt auf Full-Stack-Frameworks wie Next.js und Gatsby konzentrieren. Diese sind großartig, wenn Sie eine End-to-End-Anwendung erstellen, aber sie können übertrieben sein, wenn Sie nur ein einfaches JSX-basiertes Projekt wollen. ?️

Bevor Sie beginnen – Was macht CRA? - Create React App (CRA) ist ein leistungsstarkes Paket, das die Einrichtung eines neuen React-Projekts automatisiert. Es übernimmt die gesamte erforderliche Konfiguration und installiert die erforderlichen Abhängigkeiten, wodurch ein Bundler ohne Konfiguration bereitgestellt wird. Dadurch können Entwickler mit der Entwicklung ihrer Anwendungen beginnen, ohne sich um die komplexe Einrichtung von Tools und Konfigurationen kümmern zu müssen.

Also, jetzt ist CRA veraltet. Wie richtet man dann eine reine JSX-App ein? ?
Hier werde ich zwei beliebte Optionen (Vite und Webpack) zum Erstellen einer clientbasierten Anwendung mit der React-Bibliothek vorstellen. Im folgenden Abschnitt vergleichen wir diese Tools und geben Ihnen jeweils Anweisungen zur Einrichtung. Lass uns eintauchen! ?‍♂️

⚡ Vite vs. Webpack ?

Vite

Vorteile:

-Schneller Entwicklungsserver mit sofortigem Hot-Module-Austausch (HMR).
-Eingebaute Unterstützung für moderne JavaScript-Funktionen.
-Für den Einstieg ist nur eine minimale Konfiguration erforderlich.

Nachteile:

-Neueres Tool, daher möglicherweise weniger Community-Unterstützung im Vergleich zu Webpack.

Webpack

Vorteile:

-Hoch konfigurierbar und flexibel für komplexe Build-Setups.
- Umfangreiches Plugin-Ökosystem und Community-Unterstützung.
-Nachgewiesene Erfolgsbilanz bei vielen Großanwendungen.

Nachteile:

-Die Erstkonfiguration kann komplexer und zeitaufwändiger sein.
-Langsamere Bauzeiten im Vergleich zu Vite.
-Einrichten einer React-App mit Vite

Erstellen Sie ein neues Vite-Projekt:

1. Führen Sie den Vite-Befehl in Ihrem Terminal aus

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

2. Starten Sie den Entwicklungsserver:

npm run dev

Vite-Konfiguration:

Vite erfordert sofort eine minimale Konfiguration. Das Standard-Setup sollte für die meisten React-Projekte funktionieren.
Sie können die Datei vite.config.js bei Bedarf anpassen.

Einrichten einer React-App mit Webpack

1. Initialisieren Sie Ihr Projekt:

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. Projektstruktur erstellen:

 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. Webpack konfigurieren:

• Erstellen Sie eine webpack.config.js-Datei:

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

4. Babel-Konfiguration:

• Erstellen Sie eine .babelrc-Datei:

npm run dev

5. Starten Sie den Entwicklungsserver:

npx-Webpack-Serve

Fazit
Sowohl Vite als auch Webpack bieten leistungsstarke Möglichkeiten zum Einrichten einer React-Anwendung ohne CRA. Vite bietet eine schnellere und einfachere Einrichtung, ideal für mittlere Projekte und schnelle Entwicklung. Webpack hingegen bietet umfassende Konfigurierbarkeit und ein robustes Ökosystem, wodurch es für komplexere Projekte geeignet ist.

Wählen Sie das Tool, das Ihren Projektanforderungen und -präferenzen am besten entspricht. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine React-Anwendung nach der CRA-Veraltung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!