Der Autor hat dieTech Education Fundausgewählt, um eine Spende im Rahmen desWrite for DOnations-Programms zu erhalten.
Einführung
TypeScript hat die Strukturierung und das Schreiben von Code für Apps, insbesondere für Webanwendungen, durchJavaScript Entwickler erheblich verbessert. Als Obermenge von JavaScript definiert, verhält sich TypeScript wie JavaScript, verfügt jedoch über zusätzliche Funktionen, mit denen Entwickler größere und komplexere Programme mit weniger oder keinen Fehlern erstellen können. TypeScript wird immer beliebter. von großen Unternehmen wie Google für das Angular-Web-Framework übernommen. Das Backend-Framework vonNest.jswurde ebenfalls mit TypeScript erstellt.
Eine Möglichkeit zur Steigerung der Produktivität als Entwickler ist die Möglichkeit, neue Funktionen so schnell wie möglich zu implementieren, ohne die bestehende App in der Produktion beschädigen zu müssen. Um dies zu erreichen, wird das Schreiben von statisch typisiertem Code von vielen erfahrenen Entwicklern übernommen. Statisch typisierte Programmiersprachen wie TypeScript erzwingen eine Zuordnung für jede Variable mit einem Datentyp. B. eine Zeichenfolge, eine Ganzzahl, ein Boolescher Wert usw. Einer der Hauptvorteile der Verwendung einer statisch typisierten Programmiersprache besteht darin, dass die Typprüfung zum Zeitpunkt der Kompilierung abgeschlossen ist, sodass Entwickler Fehler in ihrem Code frühzeitig erkennen können.
React ist eine Open-Source-JavaScript-Bibliothek, mit der Entwickler High-End-Benutzeroberflächen für skalierbare Webanwendungen erstellen. Die hervorragende Leistung und die dynamischen Benutzeroberflächen, die mit React für Anwendungen mit nur einer Seite erstellt wurden, machen es bei Entwicklern zu einer beliebten Wahl.
In diesem Lernprogramm erstellen Sie eine Kundenlisten-Verwaltungsanwendung mit einem separaten REST-API-Backend und einem Frontend, das mit React und TypeScript erstellt wurde. Sie erstellen das Backend mit einer gefälschten REST-API namensjson-server. Sie können damit schnell ein CRUD-Backend (Erstellen, Lesen, Aktualisieren und Löschen) einrichten. Folglich können Sie sich mit React und TypeScript auf die Front-End-Logik einer Anwendung konzentrieren.
Voraussetzungen
Um dieses Tutorial abzuschließen, benötigen Sie:
-
Eine lokale Installation vonNode.js (mindestens v6) und
npm(mindestens v5.2). Node.js is a JavaScript run-time environment that allows you to run your code outside of the browser. Es wird mit einem vorinstallierten Paketmanager namensnpmgeliefert, mit dem Sie Pakete installieren und aktualisieren können. Um diese unter macOS oder Ubuntu 18.04 zu installieren, befolgen Sie die Schritte inHow to Install Node.js and Create a Local Development Environment on macOS oder den Abschnitt „Installieren mit einem PPA“ inHow To Install Node.js on Ubuntu 18.04. -
Eine lokale Installation von Garn; follow these steps, um Yarn auf Ihrem Betriebssystem zu installieren.
-
Grundlegendes Verständnis von TypeScript undJavaScript.
-
Ein Texteditor installiert; wieVisual Studio Code,Atom oderSublime Text.
[[Schritt 1 - Installieren von Typoskript und Erstellen der Reaktionsanwendung]] == Schritt 1 - Installieren von TypeScript und Erstellen der Reaktionsanwendung
In diesem Schritt installieren Sie das TypeScript-Paket mithilfe des Node Package Managers (npm) global auf Ihrem Computer. Anschließend installieren Sie auch React und seine Abhängigkeiten und überprüfen, ob Ihre React-App funktioniert, indem Sie den Entwicklungsserver ausführen.
Öffnen Sie zunächst ein Terminal und führen Sie den folgenden Befehl aus, um TypeScript zu installieren:
npm install -g typescriptFühren Sie nach Abschluss des Installationsvorgangs den folgenden Befehl aus, um Ihre Installation von TypeScript zu überprüfen:
tsc -vSie sehen die aktuelle Version auf Ihrem Computer installiert:
OutputVersion 3.4.5Als Nächstes installieren Sie die React-Anwendung, indem Sie das Toolcreate-react-app verwenden, um die Anwendung mit einem einzigen Befehl einzurichten. Sie verwenden den Befehlnpx, ein Paket-Runner-Tool, das mitnpm 5.2+ geliefert wird. Das Toolcreate-react-appunterstützt die Arbeit mit TypeScript, ohne dass eine zusätzliche Konfiguration erforderlich ist. Führen Sie den folgenden Befehl aus, um eine neue React-Anwendung mit dem Namentypescript-react-app zu erstellen und zu installieren:
npx create-react-app typescript-react-app --typescriptDer vorhergehende Befehl erstellt eine neue React-Anwendung mit dem Namentypescript-react-app. Das Flag--typescript setzt den Standarddateityp für React-Komponenten auf.tsx.
Bevor Sie diesen Abschnitt abschließen, muss die Anwendung von einem Anschluss zu einem anderen verschoben werden. Dazu müssen Sie eine Routing-Bibliothek für Ihre React-Anwendung mit dem NamenReact Router und die entsprechenden TypeScript-Definitionen installieren. Sie werdenyarn verwenden, um die Bibliothek und andere Pakete für dieses Projekt zu installieren. Dies liegt daran, dassyarn schneller ist, insbesondere beim Installieren von Abhängigkeiten für eine React-Anwendung. Wechseln Sie in den neu erstellten Projektordner und installieren Sie React Router mit dem folgenden Befehl:
cd typescript-react-app
yarn add react-router-domSie haben jetzt das React Router-Paket, das die Routing-Funktionalität in Ihrem Projekt bereitstellt. Führen Sie als Nächstes den folgenden Befehl aus, um die TypeScript-Definitionen für React Router zu installieren:
yarn add @types/react-router-domJetzt installieren Sieaxios, einen versprochenen HTTP-Client für Browser, um die Ausführung von HTTP-Anforderungen aus den verschiedenen Komponenten zu unterstützen, die Sie in der Anwendung erstellen:
yarn add axiosSobald der Installationsprozess abgeschlossen ist, starten Sie den Entwicklungsserver mit:
yarn startIhre Anwendung wird aufhttp://localhost:3000 ausgeführt.
Sie haben TypeScript erfolgreich installiert, eine neue React-Anwendung erstellt und React Router installiert, um beim Navigieren von einer Seite der Anwendung zu einer anderen zu helfen. Im nächsten Abschnitt richten Sie den Back-End-Server für die Anwendung ein.
[[Schritt-2 - Erstellen eines JSON-Servers]] == Schritt 2 - Erstellen eines JSON-Servers
In diesem Schritt erstellen Sie einen Mock-Server, mit dem Ihre React-Anwendung schnell eine Verbindung herstellen und dessen Ressourcen nutzen kann. Es ist wichtig zu beachten, dass dieser Back-End-Service nicht für eine Anwendung in der Produktion geeignet ist. Sie können Nest.js, Express oder eine andere Back-End-Technologie verwenden, um eine RESTful-API in der Produktion zu erstellen. json-server ist ein nützliches Tool, wenn Sie einen Prototyp erstellen und einen Back-End-Server verspotten müssen.
Sie können entwedernpm oderyarn verwenden, umjson-server auf Ihrem Computer zu installieren. Dies macht es in jedem Verzeichnis Ihres Projekts verfügbar, wann immer Sie es benötigen. Öffnen Sie ein neues Terminalfenster und führen Sie diesen Befehl aus, umjson-server zu installieren, während Sie sich noch im Projektverzeichnis befinden:
yarn global add json-serverAls Nächstes erstellen Sie eine JSON-Datei, die die Daten enthält, die von der REST-API verfügbar gemacht werden. Für die in dieser Datei angegebenen Objekte (die Sie erstellen) wird automatisch ein CRUD-Endpunkt generiert. Erstellen Sie zunächst einen neuen Ordner mit dem Namenserver und verschieben Sie ihn in diesen Ordner:
mkdir server
cd serverVerwenden Sie jetztnano, um eine neue Datei mit dem Namendb.json zu erstellen und zu öffnen:
nano db.jsonFügen Sie der Datei den folgenden Inhalt hinzu:
/server/db.json
{
"customers": [
{
"id": 1,
"first_name": "Customer_1",
"last_name": "Customer_11",
"email": "[email protected]",
"phone": "00000000000",
"address": "Customer_1 Address",
"description": "Customer_1 description"
},
{
"id": 2,
"first_name": "Customer_2",
"last_name": "Customer_2",
"email": "[email protected]",
"phone": "00000000000",
"address": "Customer_2 Adress",
"description": "Customer_2 Description"
}
]
}Die JSON-Struktur besteht aus einem Kundenobjekt, dem zwei Datensätze zugeordnet sind. Jeder Kunde besteht aus sieben Eigenschaften:id,description,first_name,last_name,email,phone undaddress.
Speichern und schließen Sie die Datei.
Standardmäßig wirdjson-server auf Port3000 ausgeführt. Dies ist derselbe Port, auf dem Ihre React-Anwendung ausgeführt wird. Um Konflikte zu vermeiden, können Sie den Standardport fürjson-server ändern. Wechseln Sie dazu in das Stammverzeichnis der Anwendung:
cd ~/typescript-react-appÖffnen Sie die Anwendung mit Ihrem bevorzugten Texteditor und erstellen Sie eine neue Datei mit dem Namenjson-server.json:
nano json-server.jsonFügen Sie nun Folgendes ein, um die Portnummer zu aktualisieren:
/json-server.json
{
"port": 5000
}Dies fungiert als Konfigurationsdatei fürjson-server und stellt sicher, dass der Server jederzeit auf dem darin angegebenen Port ausgeführt wird.
Speichern und schließen Sie die Datei.
Verwenden Sie den folgenden Befehl, um den Server auszuführen:
json-server --watch server/db.jsonDadurch werden diejson-server an Port5000 gestartet. Wenn Sie in Ihrem Browser zuhttp://localhost:5000/customers navigieren, wird auf dem Server Ihre Kundenliste angezeigt.
Um den Prozess der Ausführung vonjson-server zu optimieren, können Siepackage.json mit einer neuen Eigenschaft namensserver auf das Objektscripts aktualisieren, wie hier gezeigt:
/package.json
{
...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "json-server --watch server/db.json"
},
...
}Speichern und schließen Sie die Datei.
Wenn Sie jetztjson-server starten möchten, müssen Sie nur nochyarn server vom Terminal aus ausführen.
Sie haben eine einfache REST-API erstellt, die Sie als Back-End-Server für diese Anwendung verwenden. Sie haben auch ein Kunden-JSON-Objekt erstellt, das als Standarddaten für die REST-API verwendet wird. Zuletzt haben Sie einen alternativen Port für den Back-End-Server konfiguriert, der mitjson-server betrieben wird. Als Nächstes erstellen Sie wiederverwendbare Komponenten für Ihre Anwendung.
[[Schritt-3 - Erstellen wiederverwendbarer Komponenten]] == Schritt 3 - Erstellen wiederverwendbarer Komponenten
In diesem Abschnitt erstellen Sie die erforderlichen React-Komponenten für die Anwendung. Dies umfasst Komponenten zum Erstellen, Anzeigen und Bearbeiten der Details eines bestimmten Kunden in der Datenbank. Sie erstellen auch einige der TypeScript-Schnittstellen für Ihre Anwendung.
Wechseln Sie zunächst zu dem Terminal, auf dem die React-Anwendung ausgeführt wird, und stoppen Sie den Entwicklungsserver mitCTRL + C. Navigieren Sie als Nächstes zum Ordner./src/:
cd ./src/Erstellen Sie dann einen neuen Ordner mit dem Namencomponents und verschieben Sie ihn in den neuen Ordner:
mkdir components
cd componentsErstellen Sie im neu erstellten Ordner einencustomer-Ordner und verschieben Sie ihn in diesen Ordner:
mkdir customer
cd customerErstellen Sie nun zwei neue Dateien mit den NamenCreate.tsx undEdit.tsx:
touch Create.tsx Edit.tsxDiese Dateien sind wiederverwendbare React-Komponenten, die die Formulare rendern und die gesamte Geschäftslogik zum Erstellen und Bearbeiten der Details eines Kunden enthalten.
Öffnen Sie die DateiCreate.tsxin Ihrem Texteditor und fügen Sie den folgenden Code hinzu:
/src/components/customer/Create.tsx
import * as React from 'react';
import axios from 'axios';
import { RouteComponentProps, withRouter } from 'react-router-dom';
export interface IValues {
first_name: string,
last_name: string,
email: string,
phone: string,
address: string,
description: string,
}
export interface IFormState {
[key: string]: any;
values: IValues[];
submitSuccess: boolean;
loading: boolean;
}Hier haben SieReact,axios und andere erforderliche Komponenten importiert, die für das Routing aus dem React Router-Paket erforderlich sind. Danach haben Sie zwei neue Schnittstellen mit den NamenIValues undIFormState erstellt. TypeScript interfaceshelfen dabei, den spezifischen Wertetyp zu definieren, der an ein Objekt übergeben werden soll, und die Konsistenz in einer Anwendung zu erzwingen. Dies stellt sicher, dass Fehler in Ihrem Programm seltener auftreten.
Als Nächstes erstellen Sie eineCreate-Komponente, dieReact.Component erweitert. Fügen Sie derCreate.tsx-Datei unmittelbar nach derIFormState-Schnittstelle den folgenden Code hinzu:
/src/components/customer/Create.tsx
...
class Create extends React.Component {
constructor(props: RouteComponentProps) {
super(props);
this.state = {
first_name: '',
last_name: '',
email: '',
phone: '',
address: '',
description: '',
values: [],
loading: false,
submitSuccess: false,
}
}
}
export default withRouter(Create) Hier haben Sie eine React-Komponente in Typescript definiert. In diesem Fall akzeptiert die KlassenkomponenteCreateprops (kurz für „Eigenschaften“) vom TypRouteComponentProps und verwendet einen Status vom TypIFormState. Anschließend haben Sie im Konstruktor das Objektstateinitialisiert und alle Variablen definiert, die die gerenderten Werte für einen Kunden darstellen.
Fügen Sie als Nächstes diese Methoden innerhalb der KlassenkomponenteCreatedirekt nach dem Konstruktor hinzu. Mit diesen Methoden verarbeiten Sie Kundenformulare und bearbeiten alle Änderungen in den Eingabefeldern:
/src/components/customer/Create.tsx
...
values: [],
loading: false,
submitSuccess: false,
}
}
private processFormSubmission = (e: React.FormEvent): void => {
e.preventDefault();
this.setState({ loading: true });
const formData = {
first_name: this.state.first_name,
last_name: this.state.last_name,
email: this.state.email,
phone: this.state.phone,
address: this.state.address,
description: this.state.description,
}
this.setState({ submitSuccess: true, values: [...this.state.values, formData], loading: false });
axios.post(`http://localhost:5000/customers`, formData).then(data => [
setTimeout(() => {
this.props.history.push('/');
}, 1500)
]);
}
private handleInputChanges = (e: React.FormEvent) => {
e.preventDefault();
this.setState({
[e.currentTarget.name]: e.currentTarget.value,
})
}
...
export default withRouter(Create)
... Die MethodeprocessFormSubmission() empfängt die Details des Kunden aus dem Anwendungsstatus und sendet sie mitaxios an die Datenbank. handleInputChanges() verwendetReact.FormEvent, um die Werte aller Eingabefelder abzurufen, und ruftthis.setState() auf, um den Status der Anwendung zu aktualisieren.
Fügen Sie als Nächstes die Methoderender() innerhalb der KlassenkomponenteCreate unmittelbar nach der MethodehandleInputchanges() hinzu. Dieserender()-Methode zeigt das Formular zum Erstellen eines neuen Kunden in der Anwendung an:
/src/components/customer/Create.tsx
...
public render() {
const { submitSuccess, loading } = this.state;
return (
Create Post
{!submitSuccess && (
Fill the form below to create a new post
)}
{submitSuccess && (
The form was successfully submitted!
)}
)
}
...Hier haben Sie ein Formular mit den Eingabefeldern erstellt, das die Wertefirst_name,last_name,email,phone,address unddescriptionenthält ) s eines Kunden. Jedes der Eingabefelder verfügt über eine MethodehandleInputChanges(), die bei jedem Tastendruck ausgeführt wird und die Reactstate mit dem Wert aktualisiert, den sie aus dem Eingabefeld erhält. Abhängig vom Status der Anwendung steuert eine boolesche Variable mit dem NamensubmitSuccess die Meldung, die die Anwendung vor und nach dem Erstellen eines neuen Kunden anzeigt.
Sie können den vollständigen Code für diese Datei inGitHub repository sehen.
Speichern und beenden SieCreate.tsx.
Nachdem Sie derCreate-Komponentendatei für die Anwendung die entsprechende Logik hinzugefügt haben, fügen Sie den Inhalt für dieEdit-Komponentendatei hinzu.
Öffnen Sie IhreEdit.tsx-Datei im Ordnercustomer und fügen Sie zunächst den folgenden Inhalt hinzu, umReact,axios zu importieren, und definieren Sie außerdem TypeScript-Schnittstellen:
/src/components/customer/Edit.tsx
import * as React from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import axios from 'axios';
export interface IValues {
[key: string]: any;
}
export interface IFormState {
id: number,
customer: any;
values: IValues[];
submitSuccess: boolean;
loading: boolean;
}Ähnlich wie bei der KomponenteCreateimportieren Sie die erforderlichen Module und erstellen die SchnittstellenIValues undIFormState. DieIValues-Schnittstelle definiert den Datentyp für die Werte der Eingabefelder, während SieIFormState verwenden, um den erwarteten Typ für das Statusobjekt der Anwendung zu deklarieren.
Erstellen Sie als Nächstes die KlassenkomponenteEditCustomer direkt nach dem SchnittstellenblockIFormState, wie hier gezeigt:
/src/components/customer/Edit.tsx
...
class EditCustomer extends React.Component, IFormState> {
constructor(props: RouteComponentProps) {
super(props);
this.state = {
id: this.props.match.params.id,
customer: {},
values: [],
loading: false,
submitSuccess: false,
}
}
}
export default withRouter(EditCustomer) Diese Komponente verwendetRouteComponentProps<any> und eine Schnittstelle vonIFormState als Parameter. Sie verwenden die Addition von<any> zuRouteComponentProps, da React Router bei jeder Analyse von Pfadparametern keine Typkonvertierung durchführt, um festzustellen, ob der Datentypnumber oderstring. Da Sie einen Parameter füruniqueId eines Kunden erwarten, ist es sicherer,any zu verwenden.
Fügen Sie nun die folgenden Methoden in die Komponente ein:
/src/components/customer/Edit.tsx
...
public componentDidMount(): void {
axios.get(`http://localhost:5000/customers/${this.state.id}`).then(data => {
this.setState({ customer: data.data });
})
}
private processFormSubmission = async (e: React.FormEvent): Promise => {
e.preventDefault();
this.setState({ loading: true });
axios.patch(`http://localhost:5000/customers/${this.state.id}`, this.state.values).then(data => {
this.setState({ submitSuccess: true, loading: false })
setTimeout(() => {
this.props.history.push('/');
}, 1500)
})
}
private setValues = (values: IValues) => {
this.setState({ values: { ...this.state.values, ...values } });
}
private handleInputChanges = (e: React.FormEvent) => {
e.preventDefault();
this.setValues({ [e.currentTarget.id]: e.currentTarget.value })
}
...
}
export default withRouter(EditCustomer) Zunächst fügen Sie einecomponentDidMount()-Methode hinzu. Hierbei handelt es sich um eine Lebenszyklusmethode, die beim Erstellen der Komponente aufgerufen wird. Die Methode verwendet dieid, die aus dem Routenparameter erhalten wurden, um einen bestimmten Kunden als Parameter zu identifizieren, verwendet ihn, um seine Details aus der Datenbank abzurufen, und füllt dann das Formular damit. Darüber hinaus fügen Sie Methoden hinzu, um die Formularübermittlung zu verarbeiten und Änderungen an den Werten der Eingabefelder vorzunehmen.
Zuletzt fügen Sie dierender()-Methode für dieEdit-Komponente hinzu:
/src/components/customer/Edit.tsx
...
public render() {
const { submitSuccess, loading } = this.state;
return (
{this.state.customer &&
< h1 > Customer List Management App
Built with React.js and TypeScript
Edit Customer
{submitSuccess && (
Customer's details has been edited successfully
)}
}
)
}
...Hier haben Sie ein Formular zum Bearbeiten der Details eines bestimmten Kunden erstellt und anschließend die Eingabefelder in diesem Formular mit den Kundendaten ausgefüllt, die Sie für den Status Ihrer Anwendung erhalten haben. Ähnlich wie bei derCreate-Komponente werden Änderungen, die an allen Eingabefeldern vorgenommen wurden, von derhandleInputChanges()-Methode behandelt.
Sie können den vollständigen Code für diese Datei inGitHub repository sehen.
Speichern und beenden SieEdit.tsx.
Um die vollständige Liste der in der Anwendung erstellten Kunden anzuzeigen, erstellen Sie eine neue Komponente im Ordner./src/components und nennen sieHome.tsx:
cd ./src/components
nano Home.tsxFügen Sie den folgenden Inhalt hinzu:
/src/components/Home.tsx
import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import axios from 'axios';
interface IState {
customers: any[];
}
export default class Home extends React.Component {
constructor(props: RouteComponentProps) {
super(props);
this.state = { customers: [] }
}
public componentDidMount(): void {
axios.get(`http://localhost:5000/customers`).then(data => {
this.setState({ customers: data.data })
})
}
public deleteCustomer(id: number) {
axios.delete(`http://localhost:5000/customers/${id}`).then(data => {
const index = this.state.customers.findIndex(customer => customer.id === id);
this.state.customers.splice(index, 1);
this.props.history.push('/');
})
}
} Hier haben SieReact,axios und andere erforderliche Komponenten von React Router importiert. Sie haben zwei neue Methoden in der KomponenteHomeerstellt:
-
componentDidMount(): Die Anwendung ruft diese Methode unmittelbar nach dem Mounten einer Komponente auf. Es liegt in seiner Verantwortung, die Kundenliste abzurufen und die Homepage damit zu aktualisieren. -
deleteCustomer(): Diese Methode akzeptiertidals Parameter und löscht die Details des Kunden, der mitididentifiziert wurde, aus der Datenbank.
Fügen Sie nun die Methoderender()hinzu, um die Tabelle anzuzeigen, die die Kundenliste für die KomponenteHomeenthält:
/src/components/Home.tsx
...
public render() {
const customers = this.state.customers;
return (
{customers.length === 0 && (
No customer found at the moment
)}
Firstname
Lastname
Email
Phone
Address
Description
Actions
{customers && customers.map(customer =>
{customer.first_name}
{customer.last_name}
{customer.email}
{customer.phone}
{customer.address}
{customer.description}
Edit Customer
)}
)
}
...In diesem Codeblock rufen Sie die Kundenlisten aus dem Anwendungsstatus als Array ab, iterieren darüber und zeigen sie in einer HTML-Tabelle an. Sie fügen auch den Parametercustomer.id hinzu, mit dem die Methode die Details eines bestimmten Kunden identifiziert und aus der Liste löscht.
Speichern und beenden SieHome.tsx.
Sie haben ein statisch typisiertes Prinzip für alle mit dieser Anwendung erstellten Komponenten übernommen, indem Sie mithilfe von Schnittstellen Typen für die Komponenten und Requisiten definiert haben. Dies ist eine der besten Methoden, um TypeScript für eine React-Anwendung zu verwenden.
Damit haben Sie alle erforderlichen wiederverwendbaren Komponenten für die Anwendung erstellt. Sie können jetzt die App-Komponente mit Links zu allen Komponenten aktualisieren, die Sie bisher erstellt haben.
[[Schritt 4 - Einrichten des Routings und Aktualisieren des Einstiegspunkts der Anwendung]] == Schritt 4 - Einrichten des Routings und Aktualisieren des Einstiegspunkts der Anwendung
In diesem Schritt importieren Sie die erforderlichen Komponenten aus dem React Router-Paket und konfigurieren dieApp-Komponente so, dass je nach geladener Route unterschiedliche Komponenten gerendert werden. Auf diese Weise können Sie durch verschiedene Seiten der Anwendung navigieren. Sobald ein Benutzer eine Route besucht, z. B./create, verwendet React Router den angegebenen Pfad, um den Inhalt und die Logik innerhalb der entsprechenden Komponente zu rendern, die für die Verarbeitung dieser Route definiert ist.
Navigieren Sie zu./src/App.tsx:
nano App.tsxErsetzen Sie dann den Inhalt durch Folgendes:
/src/App.tsx
import * as React from 'react';
import './App.css';
import { Switch, Route, withRouter, RouteComponentProps, Link } from 'react-router-dom';
import Home from './components/Home';
import Create from './components/customer/Create';
import EditCustomer from './components/customer/Edit';
class App extends React.Component> {
public render() {
return (
);
}
}
export default withRouter(App); Sie haben alle erforderlichen Komponenten aus dem React Router-Paket importiert und die wiederverwendbaren Komponenten zum Erstellen, Bearbeiten und Anzeigen von Kundendetails importiert.
Speichern und beenden SieApp.tsx.
Die Datei./src/index.tsx ist der Einstiegspunkt für diese Anwendung und rendert die Anwendung. Öffnen Sie diese Datei, importieren Sie den React Router und wickeln Sie dieApp-Komponente in einBrowserRouter:
/src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
, document.getElementById('root')
);
serviceWorker.unregister();React Router verwendet dieBrowserRouter-Komponente, um Ihre Anwendung auf die Navigation aufmerksam zu machen, z. B. Verlauf und aktuellen Pfad.
Speichern und beenden Sie die Bearbeitung vonIndex.tsx.
Zuletzt werden Sie Bootstrap verwenden, um Ihrer Anwendung einen Stil hinzuzufügen. Bootstrap ist ein beliebtes HTML-, CSS- und JavaScript-Framework für die Entwicklung reaktionsschneller Mobile-First-Projekte im Web. Entwickler können so eine ansprechende Benutzeroberfläche erstellen, ohne zu viel CSS schreiben zu müssen. Es wird mit einem reaktionsschnellen Rastersystem geliefert, das einer Webseite ein fertiges Aussehen verleiht, das auf allen Geräten funktioniert.
Ersetzen Sie den Inhalt von./src/App.css durch den folgenden Inhalt, um Bootstrap und das Styling für Ihre Anwendung einzuschließen:
/src/App.css
@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';
.form-wrapper {
width: 500px;
margin: 0 auto;
}
.App {
text-align: center;
margin-top: 30px;
}
nav {
width: 300px;
margin: 0 auto;
background: #282c34;
height: 70px;
line-height: 70px;
}
nav ul li {
display: inline;
list-style-type: none;
text-align: center;
padding: 30px;
}
nav ul li a {
margin: 50px 0;
font-weight: bold;
color: white;
text-decoration: none;
}
nav ul li a:hover {
color: white;
text-decoration: none;
}
table {
margin-top: 50px;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}Sie haben Bootstrap hier verwendet, um das Erscheinungsbild der Anwendung zu verbessern, indem Sie ihr ein Standardlayout, -stile und -farben zuweisen. Sie haben auch einige benutzerdefinierte Stile hinzugefügt, insbesondere zur Navigationsleiste.
Speichern und beenden SieApp.css.
In diesem Abschnitt haben Sie React Router so konfiguriert, dass die entsprechende Komponente in Abhängigkeit von der vom Benutzer besuchten Route gerendert wird. Außerdem haben Sie einige Stile hinzugefügt, um die Anwendung für Benutzer attraktiver zu gestalten. Als Nächstes testen Sie alle für die Anwendung implementierten Funktionen.
[[Schritt-5 - Ausführen Ihrer Anwendung]] == Schritt 5 - Ausführen Ihrer Anwendung
Nachdem Sie das Frontend dieser Anwendung mit React und TypeScript eingerichtet haben, indem Sie mehrere wiederverwendbare Komponenten erstellt und eine REST-API mitjson-servererstellt haben, können Sie Ihre App ausführen.
Navigieren Sie zurück zum Stammverzeichnis des Projekts:
cd ~/typescript-react-appFühren Sie als Nächstes den folgenden Befehl aus, um Ihre App zu starten:
yarn start[.note] #Note: Stellen Sie sicher, dass Ihr Server noch im anderen Terminalfenster ausgeführt wird. Andernfalls beginnen Sie mit:yarn server.
#
Navigieren Sie zuhttp://localhost:3000, um die Anwendung in Ihrem Browser anzuzeigen. Klicken Sie anschließend auf die SchaltflächeCreate und geben Sie die Details eines Kunden ein.
Nachdem Sie die entsprechenden Werte in die Eingabefelder eingegeben haben, klicken Sie auf die SchaltflächeCreate Customer, um das Formular zu senden. Die Anwendung leitet Sie zurück zu Ihrer Startseite, sobald Sie einen neuen Kunden angelegt haben.
Klicken Sie für eine der Zeilen auf die SchaltflächeEdit Customer, und Sie werden zu der Seite weitergeleitet, auf der sich die Bearbeitungsfunktion für den entsprechenden Kunden in dieser Zeile befindet.
Bearbeiten Sie die Details des Kunden und klicken Sie dann aufEdit Customer, um die Details des Kunden zu aktualisieren.
Sie führen Ihre Anwendung aus, um sicherzustellen, dass alle Komponenten funktionieren. Auf den verschiedenen Seiten Ihrer Anwendung haben Sie einen Kundeneintrag erstellt und bearbeitet.
Fazit
In diesem Tutorial haben Sie eine Kundenlisten-Verwaltungs-App mitReact undTypeScript erstellt. Der Prozess in diesem Tutorial ist eine Abweichung von der Verwendung von JavaScript als herkömmliche Methode zum Strukturieren und Erstellen von Anwendungen mit React. Sie haben die Vorteile von TypeScript genutzt, um dieses Front-End-Tutorial zu erstellen.
Um dieses Projekt weiterzuentwickeln, können Sie Ihren nachgebildeten Back-End-Server auf eine produktionsbereite Back-End-Technologie wieExpress oderNest.js verschieben. Darüber hinaus können Sie das, was Sie in diesem Lernprogramm erstellt haben, erweitern, indem Sie weitere Funktionen wie Authentifizierung und Autorisierung mit verschiedenen Tools wie der Authentifizierungsbibliothek vonPassport.jshinzufügen.
Sie finden den vollständigen Quellcode für das Projekton GitHub.