PC & Mobile

Comment afficher votre application React sur un appareil mobile – JavaScript en clair, anglais

Comment afficher votre application React sur un appareil mobile - JavaScript en clair, anglais


Si vous avez déjà travaillé sur un projet React, l’affichage de votre site Web à l’intention des utilisateurs mobiles est un problème important que vous devrez probablement aborder. Vous pouvez bien sûr accomplir cela en utilisant des requêtes multimédia et en affichant dans le navigateur, mais si vous voulez voir votre projet sur votre propre appareil pour voir comment il vraiment regards? Aujourd'hui, nous allons parler de la façon de faire cela.

Avant de vous expliquer comment afficher votre application React sur votre appareil mobile, nous devrions d'abord parler de Google Chrome et de l'option de barre d'outils de l'appareil qu'ils fournissent. Si vous cliquez avec le bouton droit sur votre application (ou n’importe quel site Web) et cliquez sur Inspecter (Ctrl + Maj + I), un écran ressemblant à ceci:

Dans la section avec tout le code, vous verrez une icône en haut à gauche qui ressemble à deux cases. C’est l’option de la barre d’outils de basculement des périphériques.

Basculer l'option de la barre d'outils du périphérique

Une fois que vous avez cliqué dessus, vous accédez à un écran qui vous permet de modifier la taille d'affichage dans le navigateur, qui contient également une liste des périphériques communs prédéfinis et leurs tailles. Alors maintenant, vous vous demandez peut-être pourquoi vous n’utiliseriez pas simplement cela sur votre appareil mobile actuel? Eh bien, la raison en est que j'ai trouvé la barre d'outils de périphérique quelque peu buggy et peu fiable. Parfois, cette fonctionnalité n’affiche pas l’apparence réelle de votre application sur un autre appareil. C’est pourquoi il est toujours bon de revérifier car les résultats réels peuvent être dramatiques.

Voir votre application React sur un appareil mobile est en fait extrêmement facile à faire et ne peut être divisé en trois étapes.

Étape 1: démarrez votre application React sur votre ordinateur

Avant de pouvoir afficher votre application React sur un autre appareil, vous devez la démarrer dans votre navigateur via localhost. Une fois que vous avez fait cela, regardez l’URL et notez les numéros qui apparaissent après localhost (le numéro de port) comme nous en aurons besoin dans une minute.

Étape 2: Trouvez votre adresse IP locale

Une fois que vous avez démarré votre application React normalement, vous devez saisir votre adresse IP locale. C'est ce qui vous permettra de connecter votre appareil mobile à votre ordinateur. Pour ce faire, ouvrez simplement un nouveau terminal et tapez ipconfig. Une fois que vous avez appuyé sur Entrée, vous devriez voir un écran comme celui-ci:

De là, vous voudrez regarder Adresse IPv4 et notez l'adresse indiquée à droite.

Étape 3: Affichage de votre application React sur un autre appareil

Une fois que vous avez le numéro après localhost de votre URL et votre adresse IP locale, vous êtes prêt à accéder à votre autre appareil. Il suffit de tirer le navigateur de votre appareil et tapez dans le Adresse IPv4 vous avez copié plus tôt suivi d'un colon et puis le numéro de port. Le format devrait ressembler à ceci: 555.55.55.555:1234 Une fois que vous avez appuyé sur Entrée, vous devriez voir votre application React en direct sur votre appareil mobile!

Une autre chose qui pourrait vous être utile est que vous pouvez utiliser cette méthode non seulement pour les appareils mobiles, mais également pour tout autre appareil de votre choix! Suivez simplement les 3 étapes ci-dessus sur l'appareil de votre choix. De plus, pour les utilisateurs de Mac qui ne savent pas comment trouver votre adresse IP locale, vous pouvez en savoir plus sur la procédure à suivre ci-dessous. J'espère que cela vous a tous aidé!

Afficher plus

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.

Articles similaires

Laisser un commentaire

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

Bouton retour en haut de la page
Fermer