Comment convertir une page Web en une page Web React

Vous trouverez ci-après un exercice qui convertira une page Web HTML en une application Web ou un site Web à base de composants ReactJS. Si vous construisez une toute nouvelle application d'une page et avez besoin d'un point de départ, cet article est pour vous.

Bien qu'il soit satisfaisant de créer un site Web en utilisant uniquement le HTML, les CSS et le Javascript, il convient de mentionner que les sociétés suivantes ont décidé de passer à un site Web de React:

  • Airbnb
  • Dropbox
  • Rapport du blanchisseur
  • Facebook (quelle surprise!)
  • Netflix

et plusieurs autres entreprises de leur pedigree… C’est une tendance très importante à prendre en compte, car la majorité des offres d’emploi intitulées «Website Developer Needed» voudront que vous sachiez comment créer rapidement un site Web ou une application semblable à ceux mentionnés ci-dessus. .

Cet article va vous montrer comment arriver à ce point. Nous utiliserons des modèles de ColorLib pour effectuer cet exercice. Clause de non-responsabilité: pour des raisons de droits d'auteur, ces modèles sont uniquement destinés à la pratique et ne sont pas censés être votre nouveau site Web, à moins que vous ne souhaitiez conserver les crédits de pied de page comme indiqué lorsque vous cliquez sur «Télécharger», ou que vous soyez prêt à payer pour le modèle. .

  1. Téléchargez le modèle de création suivant, car ce sera le site Web standard que nous convertirons en React.
  2. Créez une nouvelle application React exécutant les commandes suivantes dans votre terminal ou votre console:
npx créer-réagir-app my-reactapp
cd my-reactapp
npm start

REMARQUE: vous devez disposer d'une version de Node supérieure à 6.0 et d'une version de NPM supérieure ou égale à 5.2.

Remplacez my-reactapp par un nom d'application de votre choix. Une fois que vous avez exécuté la commande ci-dessus, votre serveur doit être en cours d’exécution et lancer une page Web avec un logo React en rotation et un arrière-plan. Toutes vos ressources seront situées dans le dossier my-reactapp / public.

3. Déplacez tous les dossiers (css /, fonts /, img /, js /) de votre modèle de création dans le dossier public de votre projet React. Vous devrez ajouter ces références au fichier public / index.html de votre application React.

Après avoir déplacé les ressources de votre modèle de création vers votre application, ouvrons leurs deux fichiers index.html respectifs. Copiez les références de style et de police du fichier index.html du modèle dans celles de l’application.

N’oubliez pas de copier également les références situées au bas du fichier.

Le résultat final devrait ressembler à ceci:

Une fois cette étape terminée, toutes les fonctionnalités du modèle ont été transférées vers votre nouvelle application ReactJS. Votre page Web entière sera intégrée au nœud

ci-dessus. Maintenant pour la partie amusante.

4. Il est maintenant temps de convertir la mise en page en composant. Ouvrez le fichier /src/App.js dans votre application où se trouve votre composant principal. Dans ce fichier, vous remarquerez la fonction App () et une instruction return contenant UN nœud avec HTML, y compris le logo React affiché au démarrage de votre serveur.

Ce que nous sommes sur le point de faire ensuite est tout à fait facultatif, mais je préférerais que cette fonction de conversion soit convertie en une classe d’application. Si vous ne comprenez pas cela, passez en revue Fonctions et classes dans la documentation. Longue histoire courte, nous:

  • Changer la fonction App () en classe App étend React.Component
  • Donner à la classe App une fonction render ()
  • Copiez l'instruction de retour de la fonction App () dans la classe App Render ()

Le résultat final devrait ressembler à:

En conséquence, nous devrions avoir la même disposition qu'auparavant, avec le logo en rotation de React toujours au centre de l'écran. En convertissant ce composant en classe, nous sommes en mesure d'indiquer l'état de l'application, ce qui peut être une fonction essentielle si vous souhaitez dynamiser votre site Web. Nous aurons également accès aux méthodes de cycle de vie de React, ce qui nous permettra d’intégrer la logique entre les événements de montage et de démontage de composants.

5. Ensuite, nous allons commencer à ajouter le contenu à ce composant. Tout d'abord, supprimez le nœud d'en-tête et leurs enfants pour effacer la page Web

Une fois le composant effacé, nous nous référons au fichier index.html situé dans le modèle de création. Nous allons tout copier dans l'élément et le coller dans le noeud

ci-dessus dans votre projet React. C’est là que le plaisir commence et que nous constatons les innombrables erreurs. Parce que nous avons choisi un gabarit plutôt grand (meilleur pour la pratique), cela prendra un peu de patience. Pour effacer les erreurs, procédez comme suit: