Localhost:3000 is een standaardpoort die door de webservers wordt gebruikt. Het is een lokale ontwikkelingsserver dat loopt door haven 3000 . Het wordt zeer vaak gebruikt door ervaren, beginnende en middelmatige ontwikkelaars wanneer ze aan een webapplicatie werken. Ontwikkelaars gebruiken localhost:3000 om de preview van de ontwikkelde applicatie te bekijken en deze te testen op basis van de vereisten voor responsiviteit en andere parameters voordat deze in productie wordt genomen.
Laten we localhost:3000 begrijpen door het op te splitsen:
- lokalehost: Het verwijst naar de hostnaam of het huidige apparaat dat u gebruikt voor ontwikkelingsdoeleinden.
- 3000: Het is het poortnummer waarop de gemaakte ontwikkelingsserver is geconfigureerd om te luisteren.
Laten we dieper ingaan op het concept van localhost:3000 door de onderstaande punten één voor één te begrijpen:
Hoe start u de localhost:3000-server op uw machine?
Om de localhost:3000-server te starten, hebt u een service nodig die op de localhost:3000-poort werkt, zoals ReageerJS , KnooppuntJS , VueJS , AngularJS , enz. Als u met een van de genoemde services werkt, moet u een opdracht typen in de terminal van uw IDE of opdrachtprompt op basis van de service die u gebruikt.
wachtrij in Java
Commando's voor verschillende services worden hieronder vermeld:
- Knooppunt.js : Als node.js op uw computer is geïnstalleerd met Knooppuntpakketbeheer (npm). Je kunt de tools gebruiken zoals http-server of live-server om de localhost:3000 ontwikkelingsserver te starten met behulp van onderstaande opdrachten:
// 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>
- ReageerJS : In het geval van ReactJS hoeft u de server niet extern te installeren. Als u een reactie-app maakt met behulp van maak-reageer-app het creëert automatisch een ontwikkelingsserver. U hoeft alleen maar de onderstaande opdrachten uit te voeren om de server te starten.
// Navigate to your project directory cd pathOfYourProject // Start the server npm start>
- AngularJS : De hoekige app wordt ook geleverd met een ontwikkelingsserver. U hoeft alleen maar een hoekige app te maken met behulp van de Angular CLI en de onderstaande opdrachten uit te voeren.
// 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>
Hoe maak je een ontwikkelserver aan? ReageerJS ?
Volg de onderstaande stappen om de ontwikkelingsserver in ReactJS te maken en te starten:
- Stap 1: Maak een reactie-app met behulp van de npm create-react-app opdracht door de naam van het project erna op te geven.
npm create-react-app projectName>
- Stap 2: Navigeer naar uw huidige projectmap.
cd pathToYourProject>
- Stap 3: Maak bestanden in de src map en voer de server uit met behulp van onderstaande opdracht.
npm start>
Voorbeeld: De onderstaande code kan worden gebruikt als sjablooncode voor uw bestand.
Javascript
// App.js file> import React, { useState } from>'react'>;> const App = ({ prop }) =>{> >const [isHidden, setIsHidden] = useState(>false>)> >function> btnClickHandler() {> >setIsHidden((prev) =>!vorige);> >}> >return> (> >'center' }}>Welkom bij techcodeview.com { isHidden && Een computerwetenschappelijk portaal. } style={ { backgroundColor: 'groen', kleur: '#fff', vulling: '15px', cursor: 'pointer', rand: 'none', borderRadius: ' 10px' }}> Klik om meer pagina-inhoud te schakelen { isHidden && Deze inhoud wordt dynamisch geschakeld met behulp van de klikgebeurtenis met knop. }); }; standaardapp exporteren;> |
>
>
Uitgang:
