So richten Sie ein React TypeScript-Projekt mit Babel und Webpack von Grund auf neu ein

Aktualisiert: 7. September 2019 - Tippfehler behoben, npm run => npm run-script, gist Codebeispiele

Einführung

In diesem Lernprogramm erfahren Sie, wie Sie ein React TypeScript-Projekt von Grund auf neu einrichten. Ich gehe davon aus, dass die meisten von Ihnen wissen, was TypeScript ist und welche Vorteile es bietet. Für diejenigen, die unsicher sind und mehr Interesse haben, finden Sie hier weitere Informationen. Kommen wir nun zum Einrichten eines React TypeScript-Projekts von Grund auf.

Einrichtung und Erklärung

Zunächst müssen wir sicherstellen, dass Sie die richtige Dateistruktur haben, wie in der folgenden Abbildung gezeigt.

Um es zu replizieren, können Sie diese Befehle verwenden:

mkdir React-Typescript-Boilerplate
CD React-Typescript-Boilerplate
mkdir -p src / components src / styles

Hinweis: Das Flag -p steht für übergeordnete Ordner und ermöglicht Ihnen, übergeordnete Ordner zusammen mit ihren untergeordneten Ordnern zu erstellen. Versuchen Sie den letzten Befehl ohne das -p, um zu sehen.

Stellen Sie sicher, dass Node und Npm auf Ihrem Computer installiert sind. Wenn Sie sich nicht sicher sind, verwenden Sie npm -v, um Ihre Version von npm zu überprüfen. Wenn Sie es nicht installiert haben, installieren Sie es hier.

Sobald Sie bestätigt haben, dass Sie npm installiert haben oder dass Sie es installiert haben, müssen wir unser Projekt mit npm initialisieren und ein package.json erstellen.

Geben Sie npm init ein, um das Projekt zu initialisieren, während Sie sich in / react-typescript-boilerplate befinden. Daraufhin werden Sie aufgefordert, einige der Basiseigenschaften in package.json anzupassen. Sie können auch npm init -y aufrufen, um diese Schritte zu überspringen.

Nachdem wir das Basisprojekt eingerichtet haben, müssen wir einige Pakete installieren. Außerdem werde ich eine kurze und vereinfachte Erläuterung der Funktionen der einzelnen Pakete geben:

  • webpack und webpack-cli

webpack ist einfach ein Modulbündler. Es kann fast jede Ressource oder jedes Asset bündeln, wird jedoch am häufigsten zum Bündeln von JavaScript-Dateien für die Verwendung in einem Browser verwendet. In diesem Fall werden die .tsx- und .ts-Dateien in .js-Dateien gebündelt, damit sie bereitgestellt werden können.

npm installiere webpack webpack-cli --save-dev
  • reagieren und reagieren-dom

Wir brauchen auch die React- und React-Dom-Pakete. reag ist erforderlich, um React-Komponenten zu definieren, und das Paket "react-dom" wird als Einstiegspunkt in das DOM (Document Object Model) für das Web verwendet, während das react-native Paket für native Umgebungen (mobil) verwendet wird.

npm install reagiere reagiere-dom --save
  • Typoskript

typescript ist für den Zugriff auf seine hervorragenden Eigenschaften zur Typprüfung installiert.

npm install typescript --save-dev
  • babel

babel ist ein JavaScript-Compiler, der es uns ermöglicht, JavaScript der nächsten Generation (es6, es7, esnext) zu schreiben und in browserkompatibles JavaScript zu kompilieren. Seit Babel 7 haben Microsoft und das Babel-Team zusammengearbeitet, damit Sie mit dem Babel-Loader JavaScript kompilieren können. Die beiden installierten Plugins dienen dazu, Babel über einige zusätzliche Funktionen von TypeScript zu informieren.

npm install @ babel / core babel-loader @ babel / voreinstellung-reagieren @ babel / voreinstellung-typskript @ babel / voreinstellung-env @ babel / plugin-vorschlag-klasseneigenschaften @ babel / plugin-vorschlag-objekt-rest-verbreitung - -save-dev
  • CSS-Loader und Style-Loader

Zwei Style-Loader, mit denen Sie Ihr CSS im Webpack kompilieren können.

npm installiere css-loader style-loader --save-dev

HTML-Webpack-Plugin

npm installiere html-webpack-plugin --save-dev
  • webpack-dev-server

Der webpack-dev-server überwacht unsere Änderungen und aktualisiert die Webseite, sobald Änderungen an unseren Komponenten vorgenommen werden.

npm installiere webpack-dev-server --save-dev
  • tslint

tslint wird in Ihrer IDE verwendet und unterstreicht Ihren Code rot, wenn er nicht den in tslint.json festgelegten Regeln entspricht.

npm install tslint tslint-unveränderlich --save-dev
  • Reagieren und Reagieren-Dom-Typen

React- und React-Dom-Typen sind die Typisierungsdateien, die wir für TypeScript installieren.

npm install @ types / react @ types / react-dom

Eine Randnotiz zum Eingeben von Dateien (types.d.ts): Der TypeScript-Compiler beschwert sich, wenn Sie ein Paket ohne die eingegebenen Dateien installieren. Dies ist ärgerlich, da nicht alle npm-Pakete Typisierungsdateien enthalten, sodass TypeScript sich über das nicht vorhandene Modul beschwert. Ein einfacher, wenn auch hackiger Weg, um damit umzugehen, besteht darin, eine override.d.ts-Datei in / react-typescript-boilerplate / typings zu erstellen und Folgendes einzugeben: Deklarieren Sie das Modul package-with-no-typings-file. Auf diese Weise können Sie das Paket verwenden, ohne dass sich die IDE beschwert, aber Sie haben keine Typen.

Nachdem wir nun alle erforderlichen Abhängigkeiten und Pakete haben, erstellen wir auch einige der Basisdateien: index.tsx und index.html in / src. Wenn Sie sich in ./src befinden, können Sie touch index.tsx index.html eingeben, um neue Dateien vom Terminal aus zu erstellen.

Hinweis: .tsx ist nur die TypeScript-Version einer .jsx-Datei, wenn Sie mit React vertraut sind.

index.html:

Erstellen der HTML-Datei, die normalerweise auf einem Server gehostet wird, und des Speicherorts, an dem der Reaktionscode eingefügt wird (root).

Wir werden auch einige grundlegende Stile hinzufügen.

Erstellen Sie unter ./src/styles die Datei index.css mit dem folgenden Code:

h1 {
    Farbe: # 292727;
    Textausrichtung: Mitte;
}

Erstellen Sie in ./src/components App.tsx:

Hier finden Sie die Unterschiede zwischen React.Component und React.PureComponent.

index.tsx:

Dies ist ziemlich einfach, wenn Sie React zuvor verwendet haben. Sie erstellen im Grunde eine einfache HTML-Datei und fügen ReactDOM.render im Stammverzeichnis des React-Projekts ein.

Wir müssen auch alle Konfigurationsdateien hinzufügen, mit denen wir die Dateien kompilieren, bündeln und mit TypeScript entwickeln können:

  • package.json

Stellen Sie sicher, dass Sie diese Eigenschaft in Ihrer package.json festgelegt haben, damit Sie npm verwenden können, um Typen zu bündeln, zu testen, zu starten, zu erstellen und zu überprüfen. Versuchen Sie, mit npm run-script die einzelnen Eigenschaften von Skripten aufzurufen (z. B. npm run-script bundle).

Die folgenden Dateien sollten im übergeordneten Ordner / react-typescript-boilerplate erstellt werden:

  • .babelrc

.babelrc teilt babel mit, welche Voreinstellungen zum Transpilieren des Codes verwendet werden sollen. Sie können sich ansehen, was diese beiden Dinge tun, aber sie tun im Wesentlichen dasselbe, was der Code in ES5 umsetzt.

  • webpack.config.js
  • tsconfig.json

In der Datei tsconfig können wir konfigurieren, welche TypeScript-Regeln wir einhalten möchten. Weitere Informationen hierzu finden Sie hier.

  • tslint.json

Last but not least definiert die Datei tslint.json die Regeln, anhand derer unsere IDE sofort Rückmeldung darüber gibt, ob unser Code die angegebenen Regeln einhält oder nicht.

Führen Sie abschließend den Befehl im Terminal aus:

npm start

In Ihrem Standardbrowser sollte ein neues Fenster geöffnet sein. Damit können Sie ein TypeScript React-Projekt von Grund auf neu einrichten. Nachdem Sie Ihr eigenes TypeScript-Reaction-Boilerplate erstellt haben, können Sie mit der Erstellung von Reaction-Projekten beginnen! Wenn Sie möchten, können Sie dieses Reaktionssetup auch von meinem Github klonen. Vergessen Sie nicht, die Sterne zu spielen

Wenn Sie diesen Artikel hilfreich fanden, klicken Sie bitte auf die Schaltfläche . Wenn Sie Fragen / Wünsche haben oder auf Schwierigkeiten stoßen, lassen Sie es mich unten wissen. Ich würde gerne helfen.