Visual Studio Code + Reactをベースに開発環境を構築するプロセス

Visual Studio Code + Reactをベースに開発環境を構築するプロセス

開発環境ウィンドウ

開発ツール Visual Studio Code

ノードのインストールとnpm

Windows に Node をインストールするには、Node の公式 Web サイトから直接ダウンロードし、通常のソフトウェアとしてインストールします。
インストールが完了したら、コンソールで node を実行して、インストールが成功したかどうかをテストできます。Win + r でcmdと入力し、ターミナルでnode -vを直接入力すると、バージョン番号とインストールが正常に行われたかどうかが出力されます。
現在、新しいバージョンの node には npm が付属しています ( npm は node とともにインストールされるパッケージ管理ツールです)。ここで node をインストールし、インストールが正常にテストされたら、コンソールでnpm -vと入力して、正常にインストールされたかどうかを確認できます。成功するとバージョン番号が出力されます。

Visual Studio Codeをインストールする

VSコードの通常のソフトウェアのインストールについては何も注意する必要はありません。ダウンロードしてインストールするだけです。

Reactをインストールする

VS Code での React JavaScript チュートリアルのドキュメントを参照してください。このドキュメントは非常に詳細なので、基本的にそれに従うだけで問題はありません。

  • ローカル フォルダー、つまりプロジェクトが保存されているフォルダーを作成し、フォルダー内のコンソールを開きます。ここでは git bash を使用します。フォルダー内で右クリックして git bash を見つけて起動します。
  • コンソールにnpm install -g create-react-appと入力して、npmを使用してcreate-react-appをインストールします。
  • create-react-app をインストールしたら、続けてcreate-react-app my-appと入力してプロジェクトを作成します。my my-appが作成された React プロジェクトです。しばらく待つと (ここでいくつかの依存パッケージをダウンロードする必要があります)、作成されたファイル構造全体を確認できます。

画像.png

  • コンソールディレクトリをプロジェクトディレクトリに切り替え、 npm startを実行して、現在のプロジェクトが正常に作成されたかどうかを確認します。通常、コマンドを入力すると、デフォルトのブラウザが直接開かれ、http://localhost:3000/ がプレビューされます。このとき、反応ページが表示されます。

画像.png

この時点で、新しく作成されたReactプロジェクトは正常に実行できます。
5. VS Codeでプロジェクトフォルダを開き、ファイル構造全体を確認します。

画像.png

すべてのファイルは VS Code を使用して直接変更できます。

Chrome用デバッガーをインストールする

1.VS Code は、Chrome カーネル デバッグの使用をサポートする Chrome 用デバッガー プラグインを提供します。

画像.png

直接検索してインストールし、VS Codeをリロードします
2. デバッグにChrome用デバッガーを使用するには、プロジェクトの追加設定が必要です。

画像.png

ここで起動構成を設定します。元のドキュメントでは、新しいlaunch.jsonが作成されると述べています。ここにはlaunch.jsonファイルがすでにあるので、構成を直接追加できます。ここには構成ノードを直接追加するための [構成の追加] ボタンがあります。ここには Chrome 関連のノードが 2 つあり、1 つは Launch、もう 1 つは Attach であることに注意してください。

画像.png

2 つのノードを作成したら、 "request": "launch"というノードを見つけて、React プロジェクトを起動するために使用される URL ( http://localhost:3000/に設定します。他の構成ノードはデフォルトのままにしておき、疑問がある場合は変更します。変更後の構成は次のとおりです。

{
    // IntelliSense を使用して関連するプロパティについて学習します。 
    // マウスをホバーすると、既存のプロパティの説明が表示されます。
    // 詳細については、https://go.microsoft.com/fwlink/?linkid=830387 をご覧ください。
    "バージョン": "0.2.0",
    「構成」: [
        {
            "タイプ": "クロム",
            「リクエスト」: 「添付」、
            "name": "Chrome に添付",
            「ポート」: 9222,
            "webRoot": "${workspaceFolder}"
        },
        {
            "タイプ": "クロム",
            「リクエスト」: 「起動」、
            "名前": "クロム",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "タイプ": "ノード",
            「リクエスト」: 「起動」、
            "名前": "ノード",
            "プログラム": "${workspaceFolder}\\start"
        }
    ]
}

プロジェクトnpm startを開始し、デバッグツールバーを開きます。

画像.png

開始するには、以前に追加したChromeノードを選択すると、新しいChromeページが開きます。

プロジェクトのソースコードでindex.jsファイルを見つけ、ブレークポイントを設定し、行番号の前の左ボタンをクリックしてページを更新し、エンドポイントに入ります。

画像.png

この時点で、デバッグは簡単になりました。

eslintをインストールする

eslint は、構成可能な JavaScript および JSX リンターです。構文エラーのチェックに使用できます。

  • コンソールにnpm install -g eslintと入力してeslintをインストールします。
  • VS Codeからeslintプラグインをインストールする

画像.png

3. VS Code のコマンド パネルを開いてビュー内で直接探すか、 Ctrl+Shift+Pを押して ESLint と入力し、 .eslintrc.jsonファイルを作成するオプションを見つけます。この時点で、プロジェクトのルート ディレクトリに構成ファイルが作成されます。この時点で、プロジェクト内のいくつかの構文エラーが自動的に検出されます。

画像.png

参照ドキュメントにはセミコロンを構成するためのルールもあり、必要に応じて追加できます。

これで、Visual Studio Code + React 開発環境の設定に関するこの記事は終了です。vscode react 環境の設定の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React でカレンダー コンポーネントを構築するためのステップ バイ ステップ ガイド
  • React における ref の一般的な使用法の概要
  • ReactはExcelファイルのインポートとエクスポートを実装します
  • Vue3.0 における Ref と Reactive の違いの詳細な分析
  • vscodeを使用してReact Native開発環境を構築する方法を教えます
  • HTMLからReactを実装する方法を教えます
  • React 並行関数エクスペリエンス (フロントエンド並行モード)
  • React+TypeScriptプロジェクト構築事例解説

<<:  MySQL 8.0.15 winx64 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

>>:  Ubuntu 18.04 に Apache、MySQL、PHP、LAMP をインストールするための完全なチュートリアル

推薦する

NexusはAPIを使用して操作します

Nexus は RestApi を提供していますが、一部の API はまだ Groovy と組み合わ...

停止したすべてのDockerコンテナを1つのコマンドで再起動する

停止したすべてのDockerコンテナを1つのコマンドで再起動するdocker ps -a | gre...

Apache をインストールした後、サービスを開始できません (サービスを開始するとエラー コード 1 が表示されます)

目次1. エラーメッセージ2. エラーの原因3. 解決策1. エラーメッセージ1. インストール後、...

vue3 カスタムディレクティブの詳細

目次1. カスタム指示の登録1.1. グローバルカスタム指示1.2. ローカルカスタム指示2. カス...

写真のプレビューとアップロード機能を実現するhtml+css+js

はじめに: Web ページを作成するときに、画像をアップロードする必要がある場合がよくあります。画像...

Vueのdiffアルゴリズムについての簡単な説明

目次概要バーチャルドム原理実装プロセスパッチ方式sameVnode関数patchVnode関数upd...

IE、Firefox、Chromeブラウザではスペースの表示が異なります

&nbsp;&nbsp;IE、Firefox、Chrome ブラウザでの表示効果は、...

MySQL INT型の完全な分析

序文: Integer は MySQL で最もよく使用されるフィールド型の 1 つで、通常は整数を格...

Linux でのマルチスレッドプログラミング例の分析

1 はじめにスレッド技術は 1960 年代にすでに提案されていましたが、マルチスレッドがオペレーティ...

Vue プロジェクトを使用して複数のプロキシを構成する際の注意事項

Vue プロジェクトの開発プロセスでは、ローカル デバッグの利便性のため、通常、vue.config...

HTML フォームを送信するいくつかの方法_PowerNode Java Academy

方法1: 送信ボタンから送信する <!DOCTYPE html> <html>...

Docker コンテナは実行後に終了します (実行を継続する方法)

現象Dockerコンテナを起動する docker run –name [コンテナ名] [コンテナID...

MySQL で複数のテーブルにビューを作成する方法

MySQLでは、2つ以上のベーステーブルにビューを作成します。学生テーブルとstu_infoテーブル...

Vueはタブ切り替えの虫眼鏡効果を実装します

この記事では、タブ切り替えの虫眼鏡効果を実現するためのVueの具体的なコードを例として紹介します。具...