Chapter 05無料公開

【React】create-react-appで新規プロジェクトを作成

のら
のら
2022.05.14に更新

Reactの新規プロジェクトを作成

今回はcreate-react-appコマンドを使ってReactプロジェクトを作成していこうと思います。

create-react-appとは

  • Facebookが提供しているCLI ツール
  • Reactアプリケーションの雛形を作ってくれる

create-react-appコマンドを使えば難しい設定をせずに、いい感じにReactのプロジェクトの雛形を自動で作成してくれます。

コマンドは下記のように実行します。blog-webの部分はプロジェクト名で、任意の名称をつけることができます。

ターミナル
$ npx create-react-app blog-web

【npxとは?】

  • インストールしなくてもコマンド実行できる。
  • package.jsonにスクリプトを記述する必要がない。

次に下記の二つのコマンドを実行して http://localhost:3000/ にアクセスしてみてください。

ターミナル
# 作成したReactプロジェクトに移動
$ cd blog-web

# ローカルサーバーを立ち上げるコマンドを実行
$ yarn start

下記のような画面が表示されていればOKです!🎉🎉🎉

今回は以上です!お疲れ様でした!