10
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Reactプロジェクトの始め方

Posted at

新規でReactを使ったプロジェクトを始める時の最新版のメモを残しておきます。
Nodeはインストール済みである前提になります。

プロジェクトの作成

ちょっと前までcreate-react-appをグローバルにインストールして、それを実行する。と言った流れで行っていましたが、現在は最新版にアップロードされた上で作成することが推奨されています。

npx/yarnのどちらを使っても同様にプロジェクトが自動作成されますので、以下のうち好み・普段使っている方を実行してください。

npxを使う場合
npx create-react-app my-app
yarnを使う場合
yarn create react-app my-app

現在のディレクトリに作成

上記のコマンドで作成すると、カレントディレクトリに新しいディレクトリが作成されて、雛形が生成されますが、以下のようにすることでカレントディレクトリ自体に雛形が生成されるようになります。

npxを使う場合
yarn create react-app .
npxを使う場合
npx create-react-app .

TypeScriptでプロジェクトを作成

デフォルトだとJavaScriptでプロジェクトが作成されますが、昨今ではTypeScriptで始めたいという場合もあります。その場合typescriptオプションをつけるだけで、TypeScriptのReactプロジェクトが作成されます。

npxを使う場合
npx create-react-app my-app --typescript
yarnを使う場合
yarn create react-app my-app --typescript
10
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?