logo

Localhost 3000

Localhost:3000 är en standardport som används av webbservrarna. Det är en lokal utvecklingsserver som kör på hamn 3000 . Det används mycket ofta av erfarna såväl som nybörjare och medelnivåutvecklare när de arbetar med en webbapplikation. Utvecklare använder localhost:3000 för att se förhandsvisningen av den utvecklade applikationen och testa den enligt kraven för lyhördhet och andra parametrar innan de distribueras till produktion.

Låt oss förstå localhost:3000 genom att dela upp det:



  • lokal värd: Det hänvisar till värdnamnet eller den aktuella enheten du använder för utvecklingsändamål.
  • 3000: Det är portnumret som den skapade utvecklingsservern är konfigurerad att lyssna på.

Låt oss dyka djupare in i konceptet localhost:3000 genom att förstå punkterna nedan en efter en:

Hur startar man localhost:3000-servern på din maskin?

För att starta localhost:3000-servern måste du ha en tjänst som fungerar på localhost:3000-porten som ReactJS , NodeJS , VueJS , AngularJS , etc. Om du arbetar med någon av de nämnda tjänsterna måste du skriva ett kommando i terminalen på din IDE eller kommandotolken baserat på den tjänst du använder.

hej världen med java

Kommandon för olika tjänster listas nedan:

  • Node.js : Om du har node.js installerat på din maskin med Nod Package Manager (npm). Du kan använda verktyg som http-server eller live-server för att starta utvecklingsservern localhost:3000 med hjälp av nedanstående kommandon:
// 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>
  • ReactJS : I fallet med ReactJS behöver du inte installera servern externt. Om du skapar en reager app med hjälp av skapa-reagera-app den skapar automatiskt en utvecklingsserver. Du behöver bara köra kommandona nedan för att starta servern.
// Navigate to your project directory cd pathOfYourProject // Start the server npm start>
  • AngularJS : Den vinkelliga appen kommer också med utvecklingsserver, du behöver bara skapa vinkelapp med Angular CLI och köra kommandona nedan.
// 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>

Hur man skapar utvecklingsserver i ReactJS ?

Följ stegen nedan för att skapa och starta utvecklingsserver i ReactJS:



  • Steg 1: Skapa React-app med hjälp av npm create-react-app kommandot genom att ange namnet på projektet efter det.
npm create-react-app projectName>
  • Steg 2: Navigera till din nuvarande projektmapp.
cd pathToYourProject>
  • Steg 3: Skapa filer inuti src mapp och kör servern med kommandot nedan.
npm start>

Exempel: Koden nedan kan användas som en mallkod för din fil.

Javascript






// App.js file> import React, { useState } from>'react'>;> const App = ({ prop }) =>{> >const [isHidden, setIsHidden] = useState(>false>)> >function> btnClickHandler() {> >setIsHidden((prev) =>!prev);> >}> >return> (> >'center' }}>Välkommen till techcodeview.com { isHidden && A Computer Science Portal. } style={ { bakgrundsfärg: 'grön', färg: '#fff', stoppning: '15px', markör: 'pekare', gräns: 'ingen', gränsradius: ' 10px' }}> Klicka för att växla mer sidinnehåll { isHidden && Detta innehåll växlas dynamiskt med klickhändelse med knapp. } ); }; exportera standardapp;>

>

>

Produktion:

localhostGIF