React学習シリーズ｜"The Road to React"2 環境構築

2024年9月9日 22:07

前回に引き続き、Robin Wieruch著の"Road to React"を読み進めてみましょう。

動作環境

Road to Reactを読み進める上では統合開発環境 (IDE)の使用が推奨されていました。本書の例にもあるように、以下ではVisual Studio Codeを使用します。

もしIDEを使用したくない場合にはCodeSandboxというオンラインエディタも代替手段らしいです。

他にも使用するものを以下に列挙しておきます（ただし私の環境なので微妙にことなることでしょう）：

下記でViteを導入する方法を述べますが、実は私はここで初めてViteの存在を知りました。Road to Reactの説明によりますと、Viteは

といったものです（より詳細のことが本文には書かれていますが割愛しています）。

本の書いてある通りに進めていきましょう。まずはVS Codeを立ち上げディレクトリをワークスペースとして選択します。そこでターミナルを立ち上げます（ショートカットは「ctrl + shift + `」です）。

ここまできたら次をターミナルに入力してください。

npm create vite@latest hacker-stories -- --template react

"hacker-stories"の部分は好きな名前でもよいですが、私は本の通りに進めます。

この後に

cd hacker-stories
npm install
npm run dev

を順々に入力してみましょう。すると

となります。表示されたhttp://localhost:XXXX（上記の例ではhttp:localhost:5173）にアクセスしてみましょう。そのリンクにカーソルを重ねてcmd+clickすれば、すぐにWebに移ることができます。

ここまでできればひとまずReactを動かせるようになります！！

よく使うUnixコマンドをいくつかまとめておきます：

cd <directory path>：change directoryの意。<directory path>にターミナルを移動します。cd+spaceのあとtabを何回か押せば、今のディレクトリ階層から移れる候補が表示されます（cdだけではなく他のコマンド全般に言えます）。移りたいディレクトリ名を1、2文字打って再びtabを押せば、そのディレクトリ名を全部入力してくれるので便利です。またcd ..で一つ上の階層に移ることができます。
ls：リスト (list)の意味。今のディレクトリのすぐ下の階層のディレクトリやファイルを表示してくれます。
pwd：print working directoryの意で、今いるディレクトリパスを表示します。
mkdir <directory path>：make directoryの意で、ディレクトリを作成します。
touch <file path>：ファイルがない場合はファイルを作成します。これに関してはもっと深い使い方がありそうなのですが、私はまだまだ使いこなせていません。

今回はキリがいいのでここまで。次回は、今のディレクトリ構造やコードを実際に書き換えなどを行います☺️

この記事が気に入ったらサポートをしてみませんか？