【VSCode】Reactを環境構築してHello Worldする方法

Progateなどのブラウザ上で動かす段階から、自分の端末で環境を整える段階に進むのに一つの壁がありますよね。

この記事では、備忘録も兼ねてReactを環境構築してHello Worldを表示させる手順をスクショ付きでまとめました。

学習記録も兼ねた記事一覧をこちらの記事にまとめています。

事前準備

VSCodeとNode.jsはインストール済みです。

必要に応じて下記からインストールしてください。

インストールされたか以下のコマンドをターミナルで実行して確認します。

Zsh

node -v
npm -v

以下のように表示されればインストール完了です。（数字は違うかもしれません）

【ミニコラム：ターミナルのカスタマイズ】
ターミナルに表示されるユーザ名とPC名を非表示にする方法は以下を参考にしました。
https://qiita.com/kaito_program/items/e6a6013b1f614eed1960

任意のディレクトリに作業ディレクトリを作成します。

VSCodeで作成した作業フォルダを開きます。

VSCodeでターミナルを表示します。

表示したターミナルに以下を実行して、Reactプロジェクトを作成します。
これ以降基本的にVSCode内のターミナルを使用します。

Zsh

# npx create-react-app プロジェクト名
npx create-react-app react-practice

成功すると以下のような表示が出ます。

先ほどのプロジェクト作成成功時の出力のうち、以下の赤枠の部分に従います。

ターミナルで以下を実行します。

Zsh

cd react-practice
npm start

実行が成功すると以下のように表示されます。

また「http://localhost:3000/」にアクセスされて以下のような画面が出ます。

プロジェクトを実行させたままApp.jsを書き換えます。

App.js

import './App.css';

const App = () => {
  return (
    <div className="App">
      <p>Hello World</p>
    </div>
  );
}

export default App;

「http://localhost:3000/」にアクセスすると以下のように表示されます。

以上が、Reactを環境構築してHello Worldを表示する方法でした。