はじめました。
はじめに
Reactの技術ブログをはじめました。
これから日記的に学習したことを残していこうと思います。
React 開発環境構築
ここでは、まずReactの開発環境の構築について説明します。
全体の流れとしては
- Node.js のインストール
- create-react-app で新規アプリの立ち上げ
- ローカルホストで初期画面を表示させる
なので、今回はここまでを説明していこうと思います。
1. Node.js のインストール
下記のURLからNode.jsのダウンロードサイトに飛びます。
開くとLTS版と最新版の二つがあります。
LTS版とは、Long Time Support の略で、長期のサポートが受けられるものです。
今回はLTS版をダウンロードします。
ダウンロードが出来て、インストールまで済んだら、ターミナルを開いてNodeがインストールできているか確認します。
$ node -v
v16.16.0
という風にバージョンが表示されていれば成功です。
2. create-react-appで新規アプリの立ち上げ
Nodeがインストール出来たら、新規アプリを立ち上げてみましょう。
ターミナルでアプリを作るディレクトリに移動して、下記のコマンドを入力します。
・windowsの場合
$ npx create-react-app <アプリ名>
・Macの場合
$ create-react-app <アプリ名>
実行すると、<アプリ名>というフォルダが出来てその中にガガガッと色んなファイルが入っていきます。
ちなみに上記の立ち上げコマンドはJavaScriptで立ち上げる用のコマンドで、TypeScriptを使う場合は
・windows
$ npx create-react-app <アプリ名> --template typescript
・Mac
$ create-react-app <アプリ名> --template typescript
というようにアプリ名の後に --template typescript と入力すればTypeScriptでのアプリの立ち上げが可能です。
3. ローカルホストで初期画面を表示させる
正常にアプリが立ち上がると、ターミナルにこのように表示されます
Success! Created <アプリ名> at \XXXX\YYYY\ZZZZ\<アプリ名> Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner. npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd testapp
npm start
Happy hacking!
上記の npm XXXX コマンドは、アプリを操作するためのコマンドで、
- npm start
ローカルホストを用いてアプリを実行します。ブラウザで動作確認できます。 - npm run build
アプリのビルドを行います。実際にWebにアップロードするファイルを生成します。 - npm test
テストプログラムを実行して、アプリのテストを行います。 - npm run eject
アプリの依存関係をアプリ内に移動させ、完全に独立させた形で扱えるようにします。
それでは、ローカルホストでアプリを実行してみましょう。
ターミナルで先ほど作成された<アプリ名>ディレクトリに移動して、以下のコマンドを入力します。
$ npm start
ブラウザに
が表示されれば成功です！
まとめ
今回は、Reactの開発環境の構築と、新規アプリの立ち上げまでの手順をまとめました。今後もインプットしたことをブログにアウトプットしていこうと思います！
