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 をインストールするための完全なチュートリアル

推薦する

docker view container log コマンドの実装

なぜログを読む必要があるのでしょうか?たとえば、コンテナの起動に失敗したがプロンプトが表示されない場...

HTML テーブル マークアップ チュートリアル (15): テーブル タイトル

<br />このタグを使用すると、表のタイトルを直接追加し、タイトル テキストの配置プロ...

CSSアニメーションに基づくSVGボタンのサンプルコード

具体的なコードは次のとおりです。 <a href="#"> <...

純粋な CSS でマークダウンの自動番号付けを実装するサンプル コード

問題の起源私がタイトルの番号付けの問題に初めて注目したのは、学部の論文を書いていた頃まで遡ります。当...

MySQL サーバー 5.5 の接続失敗の解決策

mysqlに接続できない問題の解決方法を参考までに紹介します。具体的な内容は以下のとおりです。昨日は...

Ubuntu 16.04 で PostgreSQL の起動を設定する方法

PostgreSQL はコンパイルされインストールされるため、起動時に起動するように設定する必要があ...

JS でクリップボード API を使用する方法

目次1. Document.execCommand() メソッド(1)コピー操作(2)貼り付け操作(...

Docker /var/lib/docker/aufs/mnt ディレクトリのクリーニング方法

会社のサービスはdockerを使用しており、ディスクマンが見つかりました。その後、次のコマンドを実行...

Vueコンポーネントドキュメント生成ツールライブラリのメソッド

目次.vue ファイルの解析文書情報を抽出するコンポーネント名、説明、プロパティ、メソッド、モデルを...

MySQL 5.1 のパスワードを変更し、MySQL データベースにリモートでログインする方法

mysql ユーザーを作成し、承認します。形式: 「ユーザー パスワード」で識別されるユーザー@ログ...

nginx を使用して特定のインターフェース (URL) をブロックする方法

1. はじめに場合によっては、Web プラットフォームがオンラインになった後、サービス インターフェ...

CenOS6.7 mysql 8.0.22 のインストールと設定方法のグラフィックチュートリアル

CenOS6.7 は MySQL8.0.22 (推奨コレクション) をインストールします1. MyS...