今日はJavaScriptのライブラリーとして人気の高いReactで、Webサイト・Webアプリを立ち上げるための初動について解説したいと思います。localhostにHello Worldと表示させることが目的です。
Reactのロードマップ
具体的な手順に入る前に、Reactの入門から中級辺りまでのロードマップをお示ししたいと思います。今日こちらの記事でご紹介するのは1のステップです。
- npx create-react-app my-appが実行できる
- functionコーポントの構造を理解する
- JSXを書ける
- propsを使える
- 基礎のHooks(useStateとuseEffect)の仕組みを理解して使える
- ライフサイクルを理解する
- routerを使える
- Recoil, context, Reduxなどのglobal stateが使える
- その他Hooks(useRef、カスタムフック)が使える
Node.jsのインストール
Reactを使うには、PCにNode.jsがインストールされている必要があります。これは、Node.jsそのものを使うわけではなく、パッケージのインストール・管理にnpmが必要だからです。
Node.jsはホームページからインストールできます。Current版ではなく、LTS版(Latest Stable Version)をインストールすることをおすすめいたします。

Reactを立ち上げる
Node.jsがインストールできたら、次はWebサイト又はWebアプリを立ち上げるフォルダ(ディレクトリー)を作成します。ディレクトリーの名前はなんでもよいです。ディレクトリーを作成した後、ターミナルのcdコマンドで同ディレクトリーに移動します。Windowsの場合は、下記のように目的のディレクトリーのアドレスバーにpowershellと入力すると、そのディレクトリーでターミナル(powershell)を開くことができます。macでも同じような方法があると思います。

対象ディレクトリーでターミナルが開けたら、下記のコマンドを打ちEnterを打ちます。「my-app」の部分はWebサイト又はアプリの名称ですので任意です。なお、reduxを使用する場合は、下段のように「–template redux」を追加します。
npx create-react-app my-app
npx create-react-app my-app --template redux
下記スクリーンショットでは、second-appというアプリ名で作成しています。

100M弱のファイル群のインストールで、さほど重くはないのですが、ファイルが非常に多いので数分程度時間がかかります。インストールが終わると、先ほど作ったディレクトリーとば別に、その下に、新たな子ディレクトリーができていることが確認できるはずです。

続いて、作成された子ディレクトリー(上記ではmy-app)に、ターミナル上のcdコマンドを使って移動します。
cd my-app
下記のようなフォルダ構成が見られれば、Reactのアプリの作成に必要な準備が整っています。

次に下記コマンドを打って、このディレクトリーでVSCodeを開きます。codeとドットの間には半角スペースが入っています。なお、ここまでの作業をVSCode内のターミナルで実施している場合はこのコマンドは不要です。VSCodeについては、私の以前のこちら記事でご紹介してます。
code .
VSCodeが起動したら、Ctrl + JでVSCode内にターミナルを開きます。ここで次のコマンドを打ち、Reactのアプリを起動させます。
npm start
ブラウザで、localhost:3000に移動した後、次のようなReactのロゴが回転していればここまでは順調です。

React内の不要なファイルの削除
VSCodeの左側のサイドバーでmy-app(下記ではsecond-app)内のsrcディレクトリーがメインに作業をする場所です。他のディレクトリーはいったん忘れてもらっても大丈夫です。
さてsrcディレクトリーの中を見ると、下記のようなReactのフォルダ構成になっていると思います。こちらはある程度大規模なReactのWebアプリを動かす場合でも、必要なパッケージが全て揃った状態になっていますが、個人開発のレベルでは幾つか不要なファイルもあります。まず、App.test.js、setupTests.jsの2つは削除して問題ありません。先ほどの回転ロゴも不要ですので、logo.svgも削除できます。

続いて、App.jsを開き、前述の回転するReactロゴを表現していた<div>の内側を全て削除します。上部にあるimport logo from ‘./logo.svg’も削除します。私は、CSSのルールをBEMに従っているので、ここでいつもクラス名の”App”は小文字の”app”としますが、こちらは任意です。

Hello Worldの作成
削除したdiv内に、仮の<h1>タグを作ってHello Worldとでも入れておきます。

localhost:3000で、無事にHello Worldと表記されていれば、Reactを使ったWebサイトの原型が完成しています。

CSSファイルの整理
最後に、App.cssの内容を全て消します。元々のapp.cssは回転するロゴ用に書かれていたので全て消した上で、全体にmargin:0を適用し、上記のHello Worldの上部にある余計なmarginを消します。進んで、margin:0を定めるだけのApp.cssファイルは不要であるとしてApp.cssをファイルごと削除し、対応するApp.jsのインポート文を消す人もいますし、App.cssに限らずindex.cssの内容もいったん全て消す人もいます(index.cssファイルは削除しない方がよい)。この辺りは人によって分かれますが、私はApp.cssにmargin:0を適用してファイルは残し、index.cssの内容もそのまま残します。index.cssの内容は必要になった時点で変更します。

以上で余計なマージンがなくなり、Reactを使った最小構成のWebサイトの完成しました。今回は実質何も作っていませんが、大規模なアプリを作る場合でも必ず今回ご紹介したステップが初動になります。

Reactについて基礎から学びたい方は、下記のReactが学べるスクール・講座についてまとめた私の別の記事も参考になさってみてください。今回も最後まで読んで頂きありがとうございした。