【React】開発環境の構築から実行手順を解説！わかりやすさ重視の解説記事

この記事では、最近トレンドのReactの開発環境の構築手順から実行方法までの手順を解説しています。

開発環境の構築と実行手順に絞って解説していますので、シンプルな内容となっています。

時間をかけずにReactの開発環境を構築できる内容となっていますので、ぜひ最後までご覧ください。

開発環境の構築

Reactで一番メジャーなVSCodeを使った環境構築方法を解説していきます。

VSCodeのインストール

VSCodeのインストーラを実行します。

インストーラはVisualStudioCodeの公式サイトからダウンロードしてください。

インストーラ起動後、全てデフォルトのまま指示に従ってインストールしてください。

React開発用のプラグインの導入

VSCodeをReact用の開発環境にするためにプラグインを導入します。

Node.jsのインストール

Reactアプリケーションの起動はnpmコマンドを使います。

npmコマンドを利用するためにNode.jsをインストールします。

インストーラはNode.jSの公式サイトから入手してください。

インストーラ起動後、全てデフォルトのまま指示に従ってインストールしてください。

Reactアプリケーションの実行方法

Reactアプリケーションの実行方法を解説します。

しサンプルのプロジェクトを作成し、実行ながら手順を解説していきます。

プロジェクトの作成

こちらの手順でプロジェクトを作成していきます。

アプリケーションの起動

Reactアプリケーションを起動します。

作業ディレクトリまで移動し、こちらのコマンドを実行してください。

npm start

ブラウザで「http://localhost:3000」にアクセスし、こちらの画面が表示されれば成功です。

これで、プロジェクトの雛形が作成されました。

Reactアプリケーションの開発は、このプロジェクトをベースに作成したいアプリケーションに変更していきます。

まとめ

Reactは、最近トレンドの技術で需要があるスキルです。

AWSなどのクラウドサービスとの相性もよく、今後需要が増えていく開発手法となります。

開発環境の構築も簡単であるため、この機会にぜひReactの習得をしてみてください。

本記事が皆様の参考になれば幸いです。

関連記事：ReactとMUIでモーダルウインドウを簡単に作成する！