create-react-appで簡単にReactアプリの環境構築してみる

こんにちは、スミリオンの川口です。

今回はfacebook公式が出しているcreate-react-appというレポジトリを使ってReactの開発環境をハンズオンで作ってみたいと思います。

create-react-appとは？

facebook/create-react-app

https://github.com/facebook/create-react-app

簡単に言うとReactの開発環境の雛形

想定読者

・React を学習中の方

・Reactの環境構築に苦労しててとりあえずReact触ってみたい方

・Reactで新しいシングルページアプリケーションを作成したい方

構築手順

1.Node.jsをインストール

---

1.1 Node.js公式にアクセスしLTS推奨版をダウンロード

パッケージ管理システムのnpmを使うためにNode.jsをインストール

https://nodejs.org/ja/

1.2コマンドプロンプトで確認

インストールが完了したらコマンドプロンプトに下記のコマンドを入力してnodeのバージョンを確認

$ node -v
v14.17.4

2.create-react-appをインポート

---

2.1 プロジェクトフォルダーを作成

せっかくなのでコマンドプロンプトでやってみる

$ md react-app

2.2 npxでcreate-react-appをインポート

作成したフォルダー直下で以下のコマンドを実行してプロジェクトを作成

$ cd react-app
$ npx create-react-app my-app
$ npx create-react-app my-app --template typescript //TypeScriptを使う場合はこっち

2.3 ローカルサーバー立ち上げ

プロジェクトを作成したら、プロジェクトのルートディレクトリに移動しローカルサーバー立ち上げ

$ cd my-app
$ npm start

以下の画面が表示されたら成功！

まとめ

本来Reactの環境構築はそこそこ大量のパッケージと設定ファイルを用意してやらないと行けないが、create-react-appはコマンド一発でその環境を用意する事のできる初学者にも優しいツールでした。学生時代はJavaScriptを使ってボードゲームをよく作ってたりしたので、create-react-appを使ってReactでも何かボードゲームを作ってみたいです。

参考ページ

https://ja.reactjs.org/docs/create-a-new-react-app.html