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

はじめに

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

プロジェクト作成

• Create New Projectをクリックします。
  

• 下記を選択します。

  • 「React App」 を選択します。
  • テキトウにプロジェクト名を付けます。
  • 「Create TypeScript project」にチェックします。
    

• 「Happy hacking!」って言われるまで、しばし待ちます。

• 「package.json」を右クリックして、「Show npm Scripts」を表示します。
  

React動作確認

• npmパネルのstartをダブルクリックすると、ブラウザが起動します。
  

• 試しにsrc/App.tsxに何か追記してみましょう。

• Ctrl+SするとCompileされブラウザに即時反映されます。
  

styled-componentsインストール

• Settingsを開きます。
  

• 「Node.js and NPM」を選択し、「＋」をクリックします。
  

• 「styled-components」を選択し、「Install Package」をクリックします。
  

• Package 'styled-components' Installed successfullyと表示されたら、Settingsをすべて閉じます。

• terminalでnpm install @types/styled-componentsを実行します。¹
  

styled-componentsでApp.tsxを書き直す

• 下記のようにsrc/App.tsxを書き直します。

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;

• ブラウザ上に下記のように表示されていることを確認できます。²
  

おわりに

Happy hacking!

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

2. npm startを実行中の場合 ↩