PhpStormでReact+TypeScript+styled-componentsをはじめる

# はじめに
Reactとstyled-componentsが美味しいのかどうかも知りませんが、とりあえず試食コーナーの構築手順です。

# プロジェクト作成

- Create New Projectをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68254/43cf68ca-ce7e-cf12-9b72-1c252a80bb25.png)

- 下記を選択します。
  - 「React App」 を選択します。
  - テキトウにプロジェクト名を付けます。
  - 「Create TypeScript project」にチェックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68254/27c27584-1c43-6c14-2276-1c483fa3e3f8.png)

- 「Happy hacking!」って言われるまで、しばし待ちます。
- 「package.json」を右クリックして、「Show npm Scripts」を表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68254/c3e09d01-7aec-a3aa-7b98-95594d9f5705.png)

# React動作確認
- npmパネルのstartをダブルクリックすると、ブラウザが起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68254/ad64a54e-2d90-0a08-6be4-41fdd7986965.png)


- 試しにsrc/App.tsxに何か追記してみましょう。
- Ctrl+SするとCompileされブラウザに即時反映されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68254/c9e623c8-6a95-5872-33f1-3f2e52e89790.png)

# styled-componentsインストール

- Settingsを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68254/ba0e5cd8-a0db-d06d-6c75-4cacb7438c21.png)

- 「Node.js and NPM」を選択し、「＋」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68254/e51dff45-d07f-e640-63de-a510c6ce36de.png)

- 「styled-components」を選択し、「Install Package」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68254/8ab6ca53-7309-795a-e177-f596703a1ea0.png)
- Package 'styled-components' Installed successfullyと表示されたら、Settingsをすべて閉じます。

- terminalで`npm install @types/styled-components`を実行します。[^1]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68254/6e31c33b-dac5-f3f5-31cc-a44939f6aede.png)

[^1]: 「Node.js and NPM」ダイアログで@types/..をインストールする方法ご存じのかた教えてくださいmm

# styled-componentsでApp.tsxを書き直す
- 下記のように`src/App.tsx`を書き直します。

```react:src/App.tsx
import React, { Component } from 'react';
import logo from './logo.svg';
import styled, { keyframes } from 'styled-components';

const ReactApp = styled.div`
    text-align: center;
`;
const AppHeader = styled.header`
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
    & code {
        color: #aaeeff;
    }
`;
const AppLogoSpin = keyframes`
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
`;
const AppLogo = styled.img`
    animation: ${AppLogoSpin} infinite 20s linear;
    height: 40vmin;
`;
const AppLink = styled.a`
    color: #61dafb;
    &:hover {
        color: #00ffff;
    }
`;

class App extends Component {
    render() {
        return (
            <ReactApp>
                <AppHeader>
                    <AppLogo src={logo} alt="logo" />
                    <p>
                        Edit <code>src/App.js</code> and save to reload.
                    </p>
                    <AppLink
                        href="https://reactjs.org"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        Learn React
                    </AppLink>
                    <h2>React+styled-componentsはじめました</h2>
                </AppHeader>
            </ReactApp>
        );
    }
}

export default App;
```

- ブラウザ上に下記のように表示されていることを確認できます。[^2]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68254/b2a2da83-ce4b-f909-b4d6-cc959cc67699.png)

[^2]: npm startを実行中の場合

# おわりに
Happy hacking!