JavaScript中級編 React開発のための環境構築のやり方をわかりやすく解説！

前回の記事では、npmとNodeを使用した開発についての重要性と、npmを実際に使用して、ライブラリをインストールする方法を解説しました。

Web開発に必須のJavaScriptですが、今では素のJavaScriptではなくフレームワークであるReactやVueなどを用いてフロントエンドを作る企業が増えております。Reactを開発したFaceBook(現Meta)を始めとして、フレームワークは今では普及しております。

なので、今後の流れはよりフレームワークを使用した開発が主流になってきます。よって、今回はJavaScript中級編、Reactを使用した開発のための、環境構築についてわかりやすく、初学者向けに解説していきます。

ぜひ、最後までご覧ください。

本記事のペルソナ

Reactの開発環境の準備

ではまずは環境の説明からです。
今回、環境を作るための、PCは下記になります。

前提

上記が今回説明する上での前提条件です。Linuxの方も同様にできる部分はあります。Windowsはweb開発には向きません。

まずは、ご自身のPCにNodeJSがインストールされていることを確認してください。確認するには、ターミナルで次のようなコマンドを実行し、バージョンが表示されたら問題ありません。

$ node -v
v16.14.0
$ npm -v
8.3.1

npmはNodeがインストールされていれば、自動的にインストールされています。もし、インストールできていないのならば、先にインストールする必要があります。下記記事を参考にしてください。

上記を満たしたら、次に行きましょう。

実はnpmをインストールするだけで、あとは基本インストールする必要がありません。
React開発を始めるには、下記コマンドを実行するだけで、Reactのプロジェクトが生成されます。

$ npx create-react-app sample-app

このコマンドを実行すると、ターミナルに文字がどんどん浮かび上がって、プロジェクトが生成されていきます。プロジェクトが完成すると、Happy hacking!というワードが表示されます。

ここまで行くと、プロジェクト作成完了です！

ターミナルで実行したコマンドはおまじないみたいなもので、React開発する際はほぼ必ず使います。

Reactプロジェクトのおまじない

$ npx create-react-app <アプリ名>

アプリ名は任意

アプリ名の部分は好きな文字で結構です。

先ほどの節で、Reactプロジェクトを作成出来たら、実行して確認してみましょう。

$ cd sample-app
//ディレクトリを移動
$ npm start

作成したアプリのディレクトリに行き、そこで、ターミナルでコマンドを実行しましょう。
そして、表示されるURLにアクセスしましょう。

Reactでは、基本的にはhttp://localhost:3000　になっていますので、ここにアクセスすると、作成したReactプロジェクトの初期画面が表示されます。

ここまでで、Reactのプロジェクトを作ることができました。

では、今回のまとめに入ります。
今回は下記のようなことを解説しました。

今回のまとめ

今回はここまでとなります。

お疲れ様でした。

http://TypeScript icon by Icons8