はじめに
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を実行します。1
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;
- ブラウザ上に下記のように表示されていることを確認できます。2
おわりに
Happy hacking!