Localhost:3000 est un port par défaut utilisé par les serveurs Web. C'est un serveur de développement local qui continue port 3000 . Il est très couramment utilisé par les développeurs expérimentés ainsi que par les développeurs débutants et intermédiaires lorsqu'ils travaillent sur une application Web. Les développeurs utilisent localhost:3000 pour voir l'aperçu de l'application développée et la tester en fonction des exigences de réactivité et d'autres paramètres avant de la déployer en production.
Comprenons localhost:3000 en le décomposant :
- hôte local : Il fait référence au nom d'hôte ou au périphérique actuel que vous utilisez à des fins de développement.
- 3000 : Il s'agit du numéro de port sur lequel le serveur de développement créé est configuré pour écouter.
Plongeons plus profondément dans le concept de localhost:3000 en comprenant les points ci-dessous un par un :
Comment démarrer le serveur localhost:3000 sur votre machine ?
Pour démarrer le serveur localhost:3000, vous devez disposer d'un service qui fonctionne sur le port localhost:3000 comme RéagirJS , NoeudJS , VueJS , AngulaireJS , etc. Si vous travaillez avec l'un des services mentionnés, vous devez alors taper une commande dans le terminal de votre IDE ou une invite de commande en fonction du service que vous utilisez.
où puis-je trouver les paramètres de mon navigateur
Les commandes pour différents services sont répertoriées ci-dessous :
- Noeud.js : Si node.js est installé sur votre machine avec Gestionnaire de packages de nœuds (npm). Vous pouvez utiliser des outils comme serveur http ou serveur en direct pour démarrer le serveur de développement localhost:3000 à l'aide des commandes ci-dessous :
// Install tools globally npm install -g http-server/liver-server // Navigate to your project cd pathOfYourProject // Start the server at port:3000 http-server/live-server -p 3000>
- RéagirJS : Dans le cas de ReactJS, vous n'avez pas besoin d'installer le serveur en externe. Si vous créez une application de réaction en utilisant créer-réagir-application il crée automatiquement un serveur de développement. Il vous suffit d'exécuter les commandes ci-dessous pour démarrer le serveur.
// Navigate to your project directory cd pathOfYourProject // Start the server npm start>
- AngulaireJS : L'application angulaire est également livrée avec un serveur de développement, il vous suffit de créer une application angulaire à l'aide de la CLI angulaire et d'exécuter les commandes ci-dessous.
// Navigate to your project directory cd pathOfYourProject // Start the server ng serve //By default, angular app run on port 4200 use below command to change it ng serve --port 3000>
Comment créer un serveur de développement dans RéagirJS ?
Suivez les étapes ci-dessous pour créer et démarrer le serveur de développement dans ReactJS :
- Étape 1: Créez une application de réaction à l'aide du npm créer-réagir-application commande en spécifiant le nom du projet après.
npm create-react-app projectName>
- Étape 2: Accédez au dossier de votre projet actuel.
cd pathToYourProject>
- Étape 3: Créez des fichiers à l'intérieur du src dossier et exécutez le serveur à l’aide de la commande ci-dessous.
npm start>
Exemple: Le code ci-dessous peut être utilisé comme code de modèle pour votre fichier.
Javascript
// App.js file> import React, { useState } from>'react'>;> const App = ({ prop }) =>{> >const [isHidden, setIsHidden] = useState(>false>)> >function> btnClickHandler() {> >setIsHidden((prev) =>!prev);> >}> >return> (> >'center' }}>Bienvenue sur techcodeview.com {isHidden && Un portail informatique. } style={ { backgroundColor : 'vert', couleur : '#fff', remplissage : '15px', curseur : 'pointeur', bordure : 'aucun', borderRadius : ' 10px' }}> Cliquez pour basculer vers plus de contenu de la page { isHidden && Ce contenu est basculé dynamiquement à l'aide d'un événement de clic avec un bouton. } ); } ; exporter l'application par défaut ;> |
>
>
Sortir:
