L'auteur a sélectionné lesTech Education Fund pour recevoir un don dans le cadre du programmeWrite for DOnations.
introduction
TypeScript a beaucoup amélioré la manière dont les développeurs deJavaScript structurent et écrivent le code pour les applications, en particulier les applications Web. Défini comme un sur-ensemble de JavaScript, TypeScript se comporte de manière identique à JavaScript, mais avec des fonctionnalités supplémentaires conçues pour aider les développeurs à créer des programmes plus volumineux et plus complexes, avec peu ou pas de bugs. TypeScript gagne de plus en plus en popularité; adopté par de grandes entreprises telles que Google pour le framework web angulaire. Le framework back-end deNest.js a également été construit avec TypeScript.
L'un des moyens d'améliorer la productivité en tant que développeur est la possibilité d'implémenter de nouvelles fonctionnalités le plus rapidement possible, sans aucun souci de casser l'application existante en production. Pour y parvenir, l’écriture de code statiquement typé est un style adopté par de nombreux développeurs chevronnés. Les langages de programmation à typage statique tels que TypeScript imposent une association pour chaque variable avec un type de données; comme une chaîne, un entier, un booléen, etc. L'un des principaux avantages de l'utilisation d'un langage de programmation de type statique est que la vérification du type est terminée au moment de la compilation. Les développeurs peuvent ainsi détecter très tôt les erreurs dans leur code.
React est une bibliothèque JavaScript open source, que les développeurs utilisent pour créer des interfaces utilisateur haut de gamme pour des applications Web évolutives. Les performances exceptionnelles et les interfaces utilisateur dynamiques construites avec React pour les applications d'une page en font un choix populaire parmi les développeurs.
Dans ce didacticiel, vous allez créer une application de gestion de liste de clients avec un serveur d’API REST distinct et une interface client construite avec React et TypeScript. Vous construirez le backend en utilisant une fausse API REST nomméejson-server. Vous l’utiliserez pour configurer rapidement un backend CRUD (Créer, Lire, Mettre à jour et Supprimer). Par conséquent, vous pouvez vous concentrer sur la gestion de la logique frontale d'une application à l'aide de React et TypeScript.
Conditions préalables
Pour compléter ce tutoriel, vous aurez besoin de:
-
Une installation locale deNode.js (au moins v6) et
npm(au moins v5.2). Node.js is a JavaScript run-time environment that allows you to run your code outside of the browser. Il est livré avec un gestionnaire de packages pré-installé appelénpm, qui vous permet d'installer et de mettre à jour des packages. Pour les installer sur macOS ou Ubuntu 18.04, suivez les étapes deHow to Install Node.js and Create a Local Development Environment on macOS ou de la section «Installation à l'aide d'un PPA» deHow To Install Node.js on Ubuntu 18.04. -
Une installation locale de Yarn; follow these steps pour installer Yarn sur votre système d'exploitation.
-
Une compréhension de base de TypeScript et deJavaScript.
-
Un éditeur de texte installé; tels queVisual Studio Code,Atom ouSublime Text.
[[step-1 -—- installation-typescript-et-création-de-l'application-react]] == Étape 1 - Installation de TypeScript et création de l'application React
Dans cette étape, vous installerez le package TypeScript globalement sur votre ordinateur à l'aide du gestionnaire de packages de nœuds (npm). Après cela, vous installerez également React et ses dépendances et vérifiez que votre application React fonctionne en exécutant le serveur de développement.
Pour commencer, ouvrez un terminal et exécutez la commande suivante pour installer TypeScript:
npm install -g typescriptUne fois le processus d'installation terminé, exécutez la commande suivante pour vérifier votre installation de TypeScript:
tsc -vVous verrez la version actuelle installée sur votre ordinateur:
OutputVersion 3.4.5Ensuite, vous installerez l'application React en utilisant l'outilcreate-react-app pour configurer l'application avec une seule commande. Vous utiliserez la commandenpx, qui est un outil d'exécution de package fourni avecnpm 5.2+. L'outilcreate-react-app a un support intégré pour travailler avec TypeScript sans aucune configuration supplémentaire requise. Exécutez la commande suivante pour créer et installer une nouvelle application React nomméetypescript-react-app:
npx create-react-app typescript-react-app --typescriptLa commande précédente créera une nouvelle application React avec le nomtypescript-react-app. L'indicateur--typescript définira le type de fichier par défaut pour les composants React sur.tsx.
Avant de remplir cette section, l'application nécessite de passer d'un port à un autre. Pour ce faire, vous devrez installer une bibliothèque de routage pour votre application React nomméeReact Router et ses définitions TypeScript correspondantes. Vous utiliserezyarn pour installer la bibliothèque et d'autres packages pour ce projet. En effet,yarn est plus rapide, en particulier pour l'installation de dépendances pour une application React. Déplacez-vous dans le dossier du projet nouvellement créé, puis installez React Router à l'aide de la commande suivante:
cd typescript-react-app
yarn add react-router-domVous disposez maintenant du package React Router, qui fournira la fonctionnalité de routage au sein de votre projet. Ensuite, exécutez la commande suivante pour installer les définitions TypeScript pour React Router:
yarn add @types/react-router-domVous allez maintenant installeraxios, qui est un client HTTP promis pour les navigateurs, pour vous aider à exécuter les requêtes HTTP à partir des différents composants que vous allez créer dans l'application:
yarn add axiosUne fois le processus d'installation terminé, démarrez le serveur de développement avec:
yarn startVotre application fonctionnera surhttp://localhost:3000.
Vous avez correctement installé TypeScript, créé une nouvelle application React et installé React Router afin de vous aider à naviguer d'une page à une autre de l'application. Dans la section suivante, vous allez configurer le serveur principal pour l'application.
[[step-2 -—- creating-a-json-server]] == Étape 2 - Création d'un serveur JSON
Au cours de cette étape, vous créerez un serveur fictif auquel votre application React pourra se connecter rapidement, tout en utilisant ses ressources. Il est important de noter que ce service d'arrière-plan n'est pas adapté à une application en production. Vous pouvez utiliser Nest.js, Express ou toute autre technologie dorsale pour créer une API RESTful en production. json-server est un outil utile chaque fois que vous avez besoin de créer un prototype et de simuler un serveur back-end.
Vous pouvez utilisernpm ouyarn pour installerjson-server sur votre ordinateur. Cela le rendra disponible à partir de n'importe quel répertoire de votre projet chaque fois que vous en aurez besoin pour l'utiliser. Ouvrez une nouvelle fenêtre de terminal et exécutez cette commande pour installerjson-server alors que vous êtes toujours dans le répertoire du projet:
yarn global add json-serverEnsuite, vous allez créer un fichier JSON qui contiendra les données qui seront exposées par l'API REST. Pour les objets spécifiés dans ce fichier (que vous allez créer), un point de terminaison CRUD sera généré automatiquement. Pour commencer, créez un nouveau dossier nomméserver puis déplacez-vous dedans:
mkdir server
cd serverMaintenant, utiliseznano pour créer et ouvrir un nouveau fichier nommédb.json:
nano db.jsonAjoutez le contenu suivant au fichier:
/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"
}
]
}La structure JSON consiste en un objet client, auquel sont affectés deux jeux de données. Chaque client se compose de sept propriétés:id,description,first_name,last_name,email,phone etaddress.
Enregistrez et quittez le fichier.
Par défaut,json-server s'exécute sur le port3000 - c'est le même port sur lequel s'exécute votre application React. Pour éviter les conflits, vous pouvez modifier le port par défaut desjson-server. Pour ce faire, déplacez-vous dans le répertoire racine de l'application:
cd ~/typescript-react-appOuvrez l'application avec votre éditeur de texte préféré et créez un nouveau fichier nomméjson-server.json:
nano json-server.jsonMaintenant, insérez ce qui suit pour mettre à jour le numéro de port:
/json-server.json
{
"port": 5000
}Cela servira de fichier de configuration pour lesjson-server et garantira que le serveur s'exécute sur le port spécifié à tout moment.
Enregistrez et quittez le fichier.
Pour exécuter le serveur, utilisez la commande suivante:
json-server --watch server/db.jsonCela démarrera lesjson-server sur le port5000. Si vous accédez àhttp://localhost:5000/customers dans votre navigateur, vous verrez le serveur affichant votre liste de clients.
Pour rationaliser le processus d'exécution desjson-server, vous pouvez mettre à jourpackage.json avec une nouvelle propriété nomméeserver vers l'objetscripts comme indiqué ici:
/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"
},
...
}Enregistrez et quittez le fichier.
Désormais, à chaque fois que vous souhaitez démarrer lesjson-server, tout ce que vous avez à faire est d'exécuteryarn server depuis le terminal.
Vous avez créé une simple API REST que vous utiliserez comme serveur principal pour cette application. Vous avez également créé un objet JSON client qui sera utilisé comme données par défaut pour l'API REST. Enfin, vous avez configuré un autre port pour le serveur principal alimenté parjson-server. Ensuite, vous allez créer des composants réutilisables pour votre application.
[[step-3 -—- creating-reusable-components]] == Étape 3 - Création de composants réutilisables
Dans cette section, vous allez créer les composants React requis pour l'application. Cela inclura des composants pour créer, afficher et éditer les détails d'un client particulier dans la base de données respectivement. Vous construirez également certaines des interfaces TypeScript pour votre application.
Pour commencer, revenez au terminal sur lequel l'application React est en cours d'exécution et arrêtez le serveur de développement avecCTRL + C. Ensuite, accédez au dossier./src/:
cd ./src/Ensuite, créez un nouveau dossier nommécomponents à l'intérieur de celui-ci et déplacez-vous dans le nouveau dossier:
mkdir components
cd componentsDans le dossier nouvellement créé, créez un dossiercustomer puis déplacez-vous dedans:
mkdir customer
cd customerCréez maintenant deux nouveaux fichiers nommésCreate.tsx etEdit.tsx:
touch Create.tsx Edit.tsxCes fichiers sont des composants réutilisables de React qui rendent les formulaires et contiennent toute la logique métier permettant de créer et d'éditer les détails d'un client.
Ouvrez le fichierCreate.tsx dans votre éditeur de texte et ajoutez le code suivant:
/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;
}Ici, vous avez importéReact,axios et les autres composants requis pour le routage à partir du package React Router. Après cela, vous avez créé deux nouvelles interfaces nomméesIValues etIFormState. TypeScript interfaces aide à définir le type spécifique de valeurs à transmettre à un objet et à appliquer la cohérence dans toute une application. Cela garantit que les bogues sont moins susceptibles d'apparaître dans votre programme.
Ensuite, vous construirez un composantCreate qui étendReact.Component. Ajoutez le code suivant au fichierCreate.tsx immédiatement après l'interfaceIFormState:
/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) Ici, vous avez défini un composant React dans Typescript. Dans ce cas, le composant de classeCreate accepteprops (abréviation de «propriétés») de typeRouteComponentProps et utilise un état de typeIFormState. Ensuite, à l'intérieur du constructeur, vous avez initialisé l'objetstate et défini toutes les variables qui représenteront les valeurs rendues pour un client.
Ensuite, ajoutez ces méthodes dans le composant de classeCreate, juste après le constructeur. Vous utiliserez ces méthodes pour traiter les formulaires client et gérer toutes les modifications dans les champs de saisie:
/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)
... La méthodeprocessFormSubmission() reçoit les détails du client de l'état de l'application et les publie dans la base de données à l'aide deaxios. LehandleInputChanges() utiliseReact.FormEvent pour obtenir les valeurs de tous les champs d'entrée et appellethis.setState() pour mettre à jour l'état de l'application.
Ensuite, ajoutez la méthoderender() dans le composant de classeCreate immédiatement après la méthodehandleInputchanges(). Cette méthoderender() affichera le formulaire pour créer un nouveau client dans l'application:
/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!
)}
)
}
...Ici, vous avez créé un formulaire avec les champs d'entrée pour contenir les valeurs desfirst_name,last_name,email,phone,address etdescription) s d'un client. Chacun des champs d'entrée a une méthodehandleInputChanges() qui s'exécute à chaque frappe, mettant à jour le Reactstate avec la valeur qu'il obtient du champ d'entrée. De plus, en fonction de l'état de l'application, une variable booléenne nomméesubmitSuccess contrôlera le message que l'application affichera avant et après la création d'un nouveau client.
Vous pouvez voir le code complet de ce fichier dans ceGitHub repository.
Enregistrez et quittezCreate.tsx.
Maintenant que vous avez ajouté la logique appropriée au fichier de composantCreate pour l’application, vous allez continuer à ajouter le contenu du fichier de composantEdit.
Ouvrez votre fichierEdit.tsx dans le dossiercustomer et commencez par ajouter le contenu suivant pour importerReact,axios et définir également les interfaces TypeScript:
/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;
}Comme pour le composantCreate, vous importez les modules requis et créez respectivement les interfacesIValues etIFormState. L'interfaceIValues définit le type de données pour les valeurs des champs d'entrée, tandis que vous utiliserezIFormState pour déclarer le type attendu pour l'objet d'état de l'application.
Ensuite, créez le composant de classeEditCustomer directement après le bloc d'interfaceIFormState comme indiqué ici:
/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) Ce composant prend leRouteComponentProps<any> et une interface deIFormState comme paramètre. Vous utilisez l'ajout de<any> auxRouteComponentProps car chaque fois que React Router analyse les paramètres de chemin, il ne fait aucune conversion de type pour vérifier si le type des données estnumber oustring. Puisque vous attendez un paramètre pouruniqueId d'un client, il est plus sûr d'utiliserany.
Ajoutez maintenant les méthodes suivantes dans le composant:
/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) Tout d'abord, vous ajoutez une méthodecomponentDidMount(), qui est une méthode de cycle de vie appelée lors de la création du composant. La méthode prend lesid obtenus à partir du paramètre route pour identifier un client particulier en tant que paramètre, l'utilise pour récupérer ses détails dans la base de données, puis remplit le formulaire avec. En outre, vous ajoutez des méthodes pour traiter la soumission de formulaire et gérer les modifications apportées aux valeurs des champs de saisie.
Enfin, ajoutez la méthoderender() pour le composantEdit:
/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
)}
}
)
}
...Ici, vous avez créé un formulaire pour modifier les détails d’un client particulier, puis vous avez renseigné les champs de saisie de ce formulaire avec les détails du client obtenus par votre application. Comme pour le composantCreate, les modifications apportées à tous les champs d'entrée seront gérées par la méthodehandleInputChanges().
Vous pouvez voir le code complet de ce fichier dans ceGitHub repository.
Enregistrez et quittezEdit.tsx.
Pour afficher la liste complète des clients créés dans l'application, vous allez créer un nouveau composant dans le dossier./src/components et le nommerHome.tsx:
cd ./src/components
nano Home.tsxAjoutez le contenu suivant:
/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('/');
})
}
} Ici, vous avez importéReact,axios et d'autres composants requis depuis React Router. Vous avez créé deux nouvelles méthodes dans le composantHome:
-
componentDidMount(): l'application appelle cette méthode immédiatement après le montage d'un composant. Sa responsabilité ici est de récupérer la liste des clients et de mettre à jour la page d'accueil avec celle-ci. -
deleteCustomer(): Cette méthode acceptera unidcomme paramètre et supprimera les détails du client identifié avec ceidde la base de données.
Ajoutez maintenant la méthoderender() pour afficher la table qui contient la liste des clients pour le composantHome:
/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
)}
)
}
...Dans ce bloc de code, vous extrayez les listes de clients de l’état de l’application sous forme de tableau, vous les parcourez et vous les affichez dans un tableau HTML. Vous ajoutez également le paramètrecustomer.id, que la méthode utilise pour identifier et supprimer les détails d'un client particulier de la liste.
Enregistrez et quittezHome.tsx.
Vous avez adopté un principe de type statique pour tous les composants créés avec cette application en définissant des types pour les composants et les accessoires via l’utilisation d’interfaces. C'est l'une des meilleures approches pour utiliser TypeScript pour une application React.
Avec cela, vous avez fini de créer tous les composants réutilisables requis pour l'application. Vous pouvez maintenant mettre à jour le composant d'application avec des liens vers tous les composants que vous avez créés jusqu'à présent.
[[step-4 -—- setting-up-routing-and-update-the-entry-point-of-the-application]] == Étape 4 - Configuration du routage et mise à jour du point d'entrée de l'application
Dans cette étape, vous allez importer les composants nécessaires à partir du package React Router et configurer le composantApp pour rendre différents composants en fonction de l'itinéraire chargé. Cela vous permettra de naviguer à travers différentes pages de l'application. Une fois qu'un utilisateur visite une route, par exemple/create, React Router utilisera le chemin spécifié pour rendre le contenu et la logique dans le composant approprié défini pour gérer cette route.
Accédez à./src/App.tsx:
nano App.tsxPuis remplacez son contenu par ce qui suit:
/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); Vous avez importé tous les composants nécessaires du package React Router et les composants réutilisables pour la création, l’édition et la consultation des détails des clients.
Enregistrez et quittezApp.tsx.
Le fichier./src/index.tsx est le point d'entrée de cette application et rend l'application. Ouvrez ce fichier et importez-y React Router, puis enveloppez le composantApp dans unBrowserRouter:
/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 utilise le composantBrowserRouter pour rendre votre application consciente de la navigation, telle que l'historique et le chemin actuel.
Une fois que vous avez terminé de modifierIndex.tsx, enregistrez et quittez.
Enfin, vous utiliserez Bootstrap pour ajouter du style à votre application. Bootstrap est un framework HTML, CSS et JavaScript populaire pour développer des projets réactifs et mobiles sur le Web. Il permet aux développeurs de créer une interface utilisateur attrayante sans avoir à écrire trop de CSS. Il est livré avec un système de grille réactif qui donne à une page Web un aspect fini qui fonctionne sur tous les appareils.
Pour inclure Bootstrap et le style de votre application, remplacez le contenu de./src/App.css par ce qui suit:
/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);
}
}Vous avez utilisé Bootstrap ici pour améliorer l’apparence de l’application en lui attribuant une présentation, des styles et des couleurs par défaut. Vous avez également ajouté des styles personnalisés, notamment à la barre de navigation.
Enregistrez et quittezApp.css.
Dans cette section, vous avez configuré React Router pour le rendu du composant approprié en fonction de l'itinéraire visité par l'utilisateur et ajouté un certain style pour rendre l'application plus attrayante pour les utilisateurs. Ensuite, vous testerez toutes les fonctionnalités implémentées pour l'application.
[[step-5 -—- running-your-application]] == Étape 5 - Exécution de votre application
Maintenant que vous avez configuré l'interface de cette application avec React et TypeScript en créant plusieurs composants réutilisables, et également construit une API REST avec lesjson-server, vous pouvez exécuter votre application.
Revenez au dossier racine du projet:
cd ~/typescript-react-appEnsuite, exécutez la commande suivante pour démarrer votre application:
yarn start[.note] #Note: Assurez-vous que votre serveur fonctionne toujours dans l'autre fenêtre de terminal. Sinon, démarrez-le avec:yarn server.
#
Accédez àhttp://localhost:3000 pour afficher l'application à partir de votre navigateur. Cliquez ensuite sur le boutonCreate et renseignez les coordonnées d'un client.
Après avoir entré les valeurs appropriées dans les champs de saisie, cliquez sur le boutonCreate Customer pour soumettre le formulaire. L'application vous redirigera vers votre page d'accueil une fois la création d'un nouveau client terminée.
Cliquez sur le boutonEdit Customer pour l'une des lignes et vous serez dirigé vers la page qui héberge la fonctionnalité d'édition pour le client correspondant sur cette ligne.
Modifiez les détails du client, puis cliquez surEdit Customer pour mettre à jour les détails du client.
Vous avez exécuté votre application pour vous assurer que tous les composants fonctionnent. En utilisant les différentes pages de votre application, vous avez créé et édité une entrée de client.
Conclusion
Dans ce didacticiel, vous avez créé une application de gestion de liste de clients avecReact etTypeScript. Le processus décrit dans ce didacticiel constitue un écart par rapport à l'utilisation de JavaScript comme méthode classique de structuration et de création d'applications avec React. Vous avez tiré parti des avantages de l’utilisation de TypeScript pour mener à bien ce didacticiel axé sur le frontal.
Pour continuer à développer ce projet, vous pouvez déplacer votre serveur back-end fictif vers une technologie back-end prête pour la production commeExpress ouNest.js. De plus, vous pouvez étendre ce que vous avez intégré dans ce didacticiel en ajoutant plus de fonctionnalités telles que l'authentification et l'autorisation avec différents outils comme la bibliothèque d'authentification dePassport.js.
Vous pouvez trouver le code source complet du projeton GitHub.