kamiの日記

Webサービスをつくって生きています

メモ

Create React App: Reactのプロジェクトをはじめるためのツール。 yarn create react-app でプロジェクトを生成する

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

TypeScriptを指定してはじめることもできる。 その場合 --scripts-version=react-scripts-ts をオプションとして渡す

ref: https://github.com/wmonk/create-react-app-typescript

-

Create React Appで生成したプロジェクトでどう開発していくかが書いてあるUser Guideがある。 コード整形の自動化についてなどが書いてあるので、全体に軽く目をとおすとよさそう

-

Create React Appの例では yarn create コマンドでプロジェクトを生成している。

yarn create: スターターキットから新しいプロジェクトを生成する。 たとえば yarn create react-app foo は次と同様:

$ yarn global add create-react-app
$ create-react-app foo

ref: https://yarnpkg.com/lang/ja/docs/cli/create/

-

Create React Appの依存として reactreact-dom の他に react-scripts というのがある。 これはBabelやESLint、Webpackの設定だったり yarn start のようなコマンドが入ったりしている

ref: https://github.com/facebook/create-react-app/tree/5fecfee2373ebd1eda0c405b82a1c2d24afae6a1/packages/react-scripts

ちなみにReact Nativeで同様のものとしてMetroというものがあるようす

-

Create React AppでTypeScriptを指定してプロジェクトを生成すると images.d.ts というファイルができ、中身は次のようになっている:

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

そもそも .d.ts は型定義ファイルで、TypeScriptに必要な型情報を与えるもの。 images.d.ts は画像をインポートするために必要な型情報となる

ref: https://github.com/wmonk/create-react-app-typescript/blob/2cb3de96e8d0d897b25d6773b835eeaf88ce0f34/template/README.md#adding-images-fonts-and-files

-

Create React AppでTypeScriptを指定してプロジェクトを生成すると、あわせて tsconfig.json というファイルができる。 これはプロジェクトのルートであることを示し、またプロジェクトをコンパイルするために必要な設定などを書いていく

ref: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html