PC & Mobile

Comment convertir une page Web en ReactJS

Comment convertir une page Web en ReactJS


Comment convertir une page Web en ReactJS - Comment convertir une page Web en ReactJS

Voici 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 ne connaissant que 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:

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 en place, comme indiqué lorsque vous cliquez sur «Télécharger», ou prêts à 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 create-react-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.

Remplacer my-reactapp avec 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 le logo React en rotation avec un arrière-plan. Toutes vos ressources seront situées dans le my-reactapp / public dossier.

3. Déplacez tous les dossiers (css /, fonts /, img /, js /) de votre modèle de création vers le projet React. Publique dossier. Vous devrez ajouter ces références à la public / index.html déposer dans 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 à partir du modèle index.html fichier à celui 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. Toute votre page Web sera intégrée à la

noeud ci-dessus. Maintenant pour la partie amusante.

4. Il est maintenant temps de convertir la mise en page en composant. Ouvrez le /src/App.js fichier dans votre application où se trouve votre composant principal. Dans ce fichier, vous remarquerez la App () fonction et un revenir déclaration 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 application. classe. Si vous ne comprenez pas cela, passez en revue Fonctions et classes dans la documentation. Longue histoire courte, nous:

  • Changement fonction App () à classe App étend React.Component
  • Donner une classe App rendre() une fonction
  • 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 pouvons donner à l'application Etat ce qui peut être une caractéristique critique si vous voulez rendre votre site plus dynamique. Nous serons également autorisés à accéder aux Méthodes de cycle de vie 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, retirez le entête noeud et leurs enfants pour effacer la page Web

Une fois que nous avons effacé le composant, nous allons revenir à la index.html depuis le modèle de création. Nous allons copier tout dans le élément et 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:
  • Assurez-vous de ne pas copier sur le Mots clés. Ceux-ci ne seront pas nécessaires dans votre composant React
  • Assurez-vous de supprimer tous les commentaires “”Depuis le composant, ceux-ci pouvant provoquer des erreurs
  • Assurez-vous que tous - Comment convertir une page Web en ReactJS et les balises ont un “/” en eux
  • Chaque instance de style = <chaîne>, doit être converti en style = {}. Chaque attribut de style doit être une propriété d'un objet. Voici comment vous convertissez des styles en ligne. L'exemple ci-dessous représente l'attribut «image d'arrière-plan» en tant que format chamelé «backgroundImage».
// style de résultat: '10% '
<div style = {{backgroundImage: "url ('./ img / background3.jpg')"}}>
  
  • Autre que l'instance “application de classe ", vous devrez mettre à jour toutes les instances de "classe" dans le fichier à "nom du cours"

Si cela est fait correctement, cela devrait supprimer toutes les erreurs. Une fois enregistrés, nous aurons converti notre site Web de modèles en un très grand composant ReactJS. Voici le résultat final pour référence.

Dans un autre article, nous verrons comment diviser ce gros composant en composants recyclables beaucoup plus petits. Nous verrons également comment gérer les modèles avec plus d’un fichier html impliqué (Ex: about.html, contact.html, etc.) et les séparons également. Cependant, si vous suivez ces étapes avec soin, toute page Web ordinaire sera convertie en une application ReactJS.

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close