前回の記事では、npmとNodeを使用した開発についての重要性と、npmを実際に使用して、ライブラリをインストールする方法を解説しました。
Web開発に必須のJavaScriptですが、今では素のJavaScriptではなくフレームワークであるReactやVueなどを用いてフロントエンドを作る企業が増えております。Reactを開発したFaceBook(現Meta)を始めとして、フレームワークは今では普及しております。
なので、今後の流れはよりフレームワークを使用した開発が主流になってきます。よって、今回はJavaScript中級編、Reactを使用した開発のための、環境構築についてわかりやすく、初学者向けに解説していきます。
ぜひ、最後までご覧ください。
Reactの開発環境の準備
NodeJSの確認
ではまずは環境の説明からです。
今回、環境を作るための、PCは下記になります。
上記が今回説明する上での前提条件です。Linuxの方も同様にできる部分はあります。Windowsはweb開発には向きません。
まずは、ご自身のPCにNodeJSがインストールされていることを確認してください。確認するには、ターミナルで次のようなコマンドを実行し、バージョンが表示されたら問題ありません。
$ node -v
v16.14.0
$ npm -v
8.3.1
npmはNodeがインストールされていれば、自動的にインストールされています。もし、インストールできていないのならば、先にインストールする必要があります。下記記事を参考にしてください。
上記を満たしたら、次に行きましょう。
Reactプロジェクトの作成
実はnpmをインストールするだけで、あとは基本インストールする必要がありません。
React開発を始めるには、下記コマンドを実行するだけで、Reactのプロジェクトが生成されます。
$ npx create-react-app sample-app
このコマンドを実行すると、ターミナルに文字がどんどん浮かび上がって、プロジェクトが生成されていきます。プロジェクトが完成すると、Happy hacking!というワードが表示されます。
ここまで行くと、プロジェクト作成完了です!
ターミナルで実行したコマンドはおまじないみたいなもので、React開発する際はほぼ必ず使います。
アプリ名の部分は好きな文字で結構です。
アプリを実行してみる
先ほどの節で、Reactプロジェクトを作成出来たら、実行して確認してみましょう。
$ cd sample-app
//ディレクトリを移動
$ npm start
作成したアプリのディレクトリに行き、そこで、ターミナルでコマンドを実行しましょう。
そして、表示されるURLにアクセスしましょう。
Reactでは、基本的にはhttp://localhost:3000 になっていますので、ここにアクセスすると、作成したReactプロジェクトの初期画面が表示されます。
ここまでで、Reactのプロジェクトを作ることができました。
まとめ
では、今回のまとめに入ります。
今回は下記のようなことを解説しました。
今回はここまでとなります。
お疲れ様でした。