React初心者が環境構築から始めてみた

Reactを少しずつ勉強していくことにしたので、その記録をシリーズで残していきます。自分用のメモがメインなので、間違っているところや遠回りしているところもそのまま書きます。

1回目は環境構築です。Viteでプロジェクトを作って、画面に「Hello, React!」を出すところまでやってみました。

用意したもの

Reactを動かす開発環境(Vite)がNode.jsで動くので、先に入っているか確認します。VSCodeのターミナルでこれを打ちます。
※Nodeのインストール方法については省略します。

node -v
npm -v

バージョンが表示されればOKです。ViteはNode.jsのバージョンに条件があるので、エラーが出たらViteの公式ドキュメントを見て確認してください。

以前はよく使われていましたが、現在は公式でも新しいアプリを作る場合はまずフレームワーク(Next.jsなど)を勧めています。
現在はNext.jsやViteなどがよく選ばれているようなのですが使用したことのあるViteを使うことにします。

作業したいフォルダでターミナルを開いて、次のコマンドを実行します。

npm create vite@latest

オプションを付けずに実行すると、質問に答えながら進める形式になります。
git bashだと対話形式が対応していなく、エラーが発生することがあります。そのため、コマンドプロンプトやターミナルを使用することをおすすめします。

variantにはTypeScriptやSWCといった選択肢も並んでいますが、今回はReact自体を覚えるのが目的なので、いちばんシンプルな JavaScript にしました。TypeScriptは、Reactに慣れてから改めて触るつもりです。

コマンドを実行し終わると下記のように作成したフォルダに移動して必要なパッケージをインストールするよう促されるので実行します

cd react-blog
npm install

npm run dev

ターミナルに http://localhost:5173/ のようなURLが出るので、ブラウザで開きます。Viteのロゴとカウンターが表示されれば環境構築は完了です。止めるときはターミナルで Ctrl + C です。

※すでに5173番が使われていると別のポート番号になるので、ブラウザで開くURLはターミナルに出たものを使います。

VSCodeでフォルダを開いて中身を見てみます。

仕組みはよくわかっていないのですが、App.jsxを編集しなさいと書いてあったので編集してみます。
App.jsxを編集するとリアルタイムでhttp://localhost:5173/にも反映されます。

src/App.jsxの中身を全部消して、これだけにしてみました。

function App() {
  return <h1>Hello, React!</h1>;
}

export default App;