create-react-appをデフォルトとTypeScriptで比較してみた

# 内容
create-react-appでReactアプリを作成した時のデフォルトで作成した場合と、テンプレートにTypeScriptを指定した場合でフォルダ構成やファイルを比較してみる。

# 環境
create-react-appをするためにはNode >= 14.0.0 及び npm >= 5.6 が必要となります。

# 構成
#### 【単純にcreate-react-appを行った場合】

```
> npx create-react-app my-app001
```

構成は以下になる。

```
my-app001                    
├─ node_modules       ※node_modules配下は非表示
├─ public                 
│  ├─ favicon.ico         
│  ├─ index.html          
│  ├─ logo192.png         
│  ├─ logo512.png         
│  ├─ manifest.json       
│  └─ robots.txt          
├─ src                    
│  ├─ App.css             
│  ├─ App.js              
│  ├─ App.test.js         
│  ├─ index.css           
│  ├─ index.js            
│  ├─ logo.svg            
│  ├─ reportWebVitals.js  
│  └─ setupTests.js       
├─ package-lock.json      
├─ package.json           
└─ README.md              
```


#### 【テンプレートにTypeScriptを指定してcreate-react-appを行った場合（TypeScriptベース）】


```
> npx create-react-app my-app002 --template typescript
```

```
my-app002     
├─ node_modules       ※node_modules配下は非表示
├─ public                 
│  ├─ favicon.ico         
│  ├─ index.html          
│  ├─ logo192.png         
│  ├─ logo512.png         
│  ├─ manifest.json       
│  └─ robots.txt          
├─ src                    
│  ├─ App.css             
│  ├─ App.test.tsx        
│  ├─ App.tsx             
│  ├─ index.css           
│  ├─ index.tsx           
│  ├─ logo.svg            
│  ├─ react-app-env.d.ts  
│  ├─ reportWebVitals.ts  
│  └─ setupTests.ts       
├─ package-lock.json      
├─ package.json           
├─ README.md              
└─ tsconfig.json     
```

# 比較

両者ともほぼ同じ構成となっていて、以下の違いがある。

#### TypeScriptベースにしかないファイル

```App.test.tsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});
```

```react-app-env.d.ts  
/// <reference types="react-scripts" />
```

```tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}
```

#### 拡張子が異なるファイルの比較
左側：オリジナル <-> 右側：TypeScriptベースで比較してみた

###### App.js <-> App.tsx
TypeScript側だけに「import React from 'react';」の記載があるが使われていない？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359451/f3e11c06-65c1-af24-f967-1fe563d01b7c.png)


###### index.js <-> index.tsx
全く同一
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359451/02134ed1-0555-8ab4-f076-44375b590902.png)


###### reportWebVitals.js <-> reportWebVitals.ts
Web VitalsといってWebサイトを評価するためのコードです。
TypeScript側ではReportHandlerを使っています。
参考：https://qiita.com/ozaki25/items/6139cbc70cf988d1c870
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359451/307fd9d2-b48d-7233-c3e5-e232b88c02bf.png)

###### setupTests.js <-> setupTests.ts
全く同一（テスト用のファイル？）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359451/640b0fe1-60d7-4983-a2a8-38ced0838c75.png)

###### package.json <-> package.json
packageはTypeScript側は@types/のものが4つ多いだけでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359451/64dcbce8-b726-45f0-666c-a20969c62cc9.png)


・public内はすべて同一
・cssは同一


以上、create-react-appした際に作られたファイルの比較でした。