React+TypeScript環境の構築

# React + TypeScript で開発環境構築

React ＋ TypeScript 環境で開発できるよう環境の構築等を行います

* node.js のインストール
* React + TypeScript の環境構築
* ページ追加（ルーティング）
* AWS S3 へのアップロード

開発始められそうな所までやります、Windows10 + WSL（ubuntu）上で作業を行っています

## voltaをインストールします

>curl https://get.volta.sh | bash

volta がインストールされた事を確認します

>volta -v
>1.0.4

バージョン番号が表示されればインストール成功です
voltaコマンドが機能しない時はシェルの再読み込みを行います

>source ~/.bashrc



## volataを使ってnode.jsの最新版をインストールします

>volta install node

voltaにはバージョンを指定したりディレクトリ毎にバージョンを固定する機能等があります

## React + TypeScript 環境構築

React + TypeScriptの環境を構築します

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

作業ディレクトリの下に my-app ディレクトリが作成され環境が構築されます

## Could not find a declaration file for module 'react' への対処

このままアプリケーションを実行するとエラーが出るため事前に対処します
参考：[https://qiita.com/waniwaninowani/items/7ea8b4eacab296758c19](https://qiita.com/waniwaninowani/items/7ea8b4eacab296758c19)


> yarn add -D @types/react


## npm start で起動確認

作業ディレクトリを変更します

> cd my-app

アプリケーションを起動します、

>npm start

ブラウザで

> localhost:3000/

にアクセスします（または自動的にブラウザが起動されます）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104691/cae79604-725b-98fd-2263-aa97949e0ba5.png)

このような画面が表示されれば成功です。


## ページファイルの追加
my-app/
　├ src/
　　　├ Home.tsx
　　　├ Hoge.tsx
　　　├ Piyo.tsx
　　　├ Fuga.tsx

## 各ファイルの編集

### Home.tsx

``` tsx
// Home.tsx
import React from 'react';
export const Home = () => <h1>Home</h1>;
```

### Hoge.tsx

``` react
// Hoge.tsx
import React from 'react';
export const Hoge = () => <h1>Hoge</h1>;
```

### Piyo.tsx
``` tsx
// Piyo.tsx
import React from 'react';
export const Piyo = () => <h1>Piyo</h1>;
```

### Fuga.tsx
``` tsx
// Fuga
import React from 'react';
export const Fuga = () => <h1>Fuga</h1>;
```

## ルーターのインストール

作業ディレクトリは my-app

> npm install --save react-router-dom
> npm install --save-dev @types/react-router-dom


## ルーティング等（App.tsxの編集）

ルーターはhashモードとします（ #xxx のタグでページ遷移する）
ルータにはhashモードとhistoryモードがあります、[こちら](https://qiita.com/kozzzz/items/af9ad63fa70d4724cc2a)が詳しいです


### App.tsx

``` tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';

import { HashRouter, Route, Link, Switch } from 'react-router-dom'
import {Home} from './Home'
import {Hoge} from './Hoge'
import {Piyo} from './Piyo'
import {Fuga} from './Fuga'

function App() {
  return (
      <HashRouter>
        <div>
          <nav>
            <Link to="/">Home</Link>
            <Link to="/hoge">Hoge</Link>
            <Link to="/piyo">Piyo</Link>
            <Link to="/fuga">Fuga</Link>
          </nav>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/hoge" component={Hoge} />
            <Route exact path="/piyo" component={Piyo} />
            <Route exact path="/fuga" component={Fuga} />
          </Switch>
        </div>
      </HashRouter>
  );
}

export default App;

```


## 実行

ソースを更新すれば画面は自動的に更新されます、画面が更新されない場合はブラウザの更新ボタンで画面を更新します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104691/1a1bb22b-7bfe-d3ea-af5e-c19eb1ab0cc5.png)

このような画面が出てクリックで表示が変更されれば成功です

## buildしてS3にアップロードする
AWSのS3にファイルを設置します、AWSアカウント作成済みとして話を進めます
## ビルドする
ビルドコマンドを入力します

> yarn build

my-app の下に build ディレクトリが作成されその下には index.html を含む JavaScript や css ファイル等が作成されます

my-app/
　├ build/
　　　├ index.html
　　　├ ...


## S3へアップロード
S3のアップロード画面を開きます
AWS → サービス → S3 →バケット選択 と辿ります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104691/3f888862-caa6-02a3-31a8-86ca3cf94b5e.png)

アップロードボタンを押しアップロード画面を開きます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104691/bc6fa48b-738a-fb49-7ac6-18ccc488ca2d.png)

build直下のファイルを全て選択しS3のアップロード画面へドラッグアンドドロップで持っていきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104691/bdc852ea-07d9-0296-df3f-d5cc7509af2f.png)

## S3のアクセス許可をパブリック公開にする
バケットを選択 → アクセス許可タブ と辿ります
「ブロックパブリックアクセス (バケット設定)」の「編集」ボタンを押します
「パブリックアクセスを全てブロック」からチェックを外します
「変更の保存」を押して終了

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104691/ad899992-c6ca-7006-d34d-6ce56fcff61a.png)

## アップロードしたファイルを公開する

バケット内ファイル一覧の左側のチェックボックス全てにチェックを入れます
「アクション」ボタンを押して「公開する」をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104691/121fa97c-d437-729c-85da-0e7eca13e19a.png)

## アップロードしたコンテンツを確認する
バケット内の「index.html」 をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104691/d29bacb2-3412-9e79-d06e-2245f1b34f80.png)

リンクをクリックすれば作成したコンテンツが確認できます

## 相対パス設置に対応する
S3 内にフォルダを作成しその中に設置する場合の対応についてです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104691/625ef966-dfca-cc91-6b3b-eef8e685fa12.png)

my-app/package.json を編集します

> "homepage": "./",

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104691/34069fc9-0195-f034-c44f-1b6158fcb4b6.png)

アップロード後はコンテンツの入ったフォルダに対して「アクション」→「公開する」の設定を行います


以上です