ReactでWebアプリの開発を始めるには、 create-react-app を使用します。

create-react-appのインストール

create-react-app はnpmでインストールできます。

% npm install -g create-react-app

インストールできたら早速プロジェクトを作成してみましょう。任意のフォルダで次のコマンドを実行します。

% create-react-app demoapp

成功するとdemoappフォルダに必要なファイルが作成されます。

注意点として、プロジェクト名は全部小文字である必要があります。次のように大文字が含まれているとエラーになります。

% create-react-app demoApp
Could not create a project called "demoApp" because of npm naming restrictions:
  *  name can no longer contain capital letters

TypeScriptで開発する

create-react-app にはTypeScriptで開発するためのオプションも用意されています。

% create-react-app demoapp --template typescript

これで作成したプロジェクトには、 .js の代わりに .tsx が作成されます。本Tech sheetsでは基本的にTypeScript版で説明を行います。