logo

ローカルホスト 3000

Localhost:3000 は、Web サーバーによって使用されるデフォルトのポートです。それは ローカル開発サーバー で実行されます ポート 3000 。これは、経験豊富な開発者だけでなく、初心者および中級レベルの開発者も Web アプリケーションで作業するときに非常に一般的に使用されます。開発者は、localhost:3000 を使用して、開発されたアプリケーションのプレビューを確認し、実稼働環境にデプロイする前に、応答性やその他のパラメーターの要件に従ってテストします。

localhost:3000 を分解して理解してみましょう。



  • ローカルホスト: これは、開発目的で使用しているホスト名または現在のデバイスを指します。
  • 3000: これは、作成された開発サーバーがリッスンするように構成されているポート番号です。

以下の点を 1 つずつ理解して、localhost:3000 の概念をさらに詳しく見てみましょう。

マシン上で localhost:3000 サーバーを起動するにはどうすればよいですか?

localhost:3000 サーバーを起動するには、次のような localhost:3000 ポートで動作するサービスが必要です。 ReactJS NodeJS VueJS AngularJS 、など。 上記のサービスのいずれかを使用している場合は、使用しているサービスに基づいて、IDE またはコマンド プロンプトのターミナル内にコマンドを入力する必要があります。

Linuxでスクリプトを実行する

さまざまなサービスのコマンドを以下に示します。

  • Node.js : マシンにnode.jsがインストールされている場合は、 ノードパッケージマネージャー(npm)。 次のようなツールを使用できます httpサーバー または ライブサーバー 以下のコマンドを使用して、localhost:3000 開発サーバーを起動します。
// 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 : ReactJS の場合、サーバーを外部にインストールする必要はありません。を使用して反応アプリを作成している場合 反応アプリの作成 開発サーバーが自動的に作成されます。以下のコマンドを実行してサーバーを起動するだけです。
// Navigate to your project directory cd pathOfYourProject // Start the server npm start>
  • AngularJS : Angular アプリには開発サーバーも付属しており、Angular CLI を使用して Angular アプリを作成し、以下のコマンドを実行するだけです。
// 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>

開発サーバーを作成する方法 ReactJS ?

ReactJS で開発サーバーを作成して起動するには、次の手順に従います。



  • ステップ1: を使用して反応アプリを作成します npm 作成-反応-アプリ コマンドの後にプロジェクトの名前を指定して実行します。
npm create-react-app projectName>
  • ステップ2: 現在のプロジェクト フォルダーに移動します。
cd pathToYourProject>
  • ステップ 3: 内にファイルを作成します 送信元 フォルダーに移動し、以下のコマンドを使用してサーバーを実行します。
npm start>

例: 以下のコードは、ファイルのテンプレート コードとして使用できます。

JavaScript






// App.js file> import React, { useState } from>'react'>;> const App = ({ prop }) =>{> >const [isHidden, setIsHidden] = useState(>false>)> >function> btnClickHandler() {> >setIsHidden((prev) =>!前);>>' }> >return> (> >'center' }}>techcodeview.com { isHidden && コンピュータ サイエンス ポータルへようこそ。 } style={ {backgroundColor: 'green'、color: '#fff'、padding: '15px'、カーソル: 'pointer'、border: 'none'、borderRadius: ' 10px' }}> クリックしてその他のページ コンテンツを切り替えます { isHidden && このコンテンツは、ボタンのクリック イベントを使用して動的に切り替えられます。 } ); };デフォルトのアプリをエクスポートします。>>

>

>

出力:

ローカルホストGIF