対象読者
Reactを初めて触る人
TypeScriptがまだよくわかっていない人
完成品
仕様ツール
- React(cretae-react-app)
- TypeScript
- styled-component
Reactのインストール
create-react-app でReactのインストールをしていきます。
template オプションで、TypeScriptを指定します。
npx create-react-app [任意のプロジェクト名] --template typescript
インストールに2分ほど時間がかかる
cd [任意のプロジェクト名]
でプロジェクトフォルダーに移動する。
Reactの起動
ターミナルでnpm start とコマンドを打つと、
http://localhost:3000/ で、ブラウザが起動する
こんな画面が表示されれば成功です！
Reactの編集
src > App.tsx <header>タブ内を全て削除します。
代わりに、ダミーで「いいねボタン」のテキストを入れておきます。
function App() {
return (
<div className="App">
<header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.tsx</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
+ いいねボタン
</header>
</div>
);
}
途中経過
LikeButtonコンポーネントの作成
Appコンポーネントの下に、LikeButtonコンポーネントを追加します。
ダミーテキストとして「いいねボタン」を書いておきます。
function App() {
return (
省略
);
}
function LikeButton() {
return (
<span>いいねボタン</span>
);
}
JavaScript内にHTMLを書けるJSXという記法です。
(TypeScriptのjsxなので、tsxという拡張子がつけられています。)
classの追加
JSX/TSX内では、HTMLで使っていたclass属性は「className」で指定します。
これは、classがJavaScriptの予約語のため、名前が衝突しないようにするためです。
function App() {
return (
省略
);
}
function LikeButton() {
return (
- <span>いいねボタン</span>
+ <span className='likeButton'>いいねボタン</span>
);
}
stateの追加
Reactでは、変化するデータは、ステート(状態)として扱います。
React HooksのuseStateを使います。
useStateの定式
const [ステートの名前, set+ステートの名前] = setState(初期値)
ex)
const [name, setName] = setState("")
ダミーテキストの「いいねボタン」の代わりに、ハートマークとcountの数字を代入してみましょう！
(省略)
function LikeButton() {
const [count, setCount] = useState(0);
return (
<LinkButton className='likeButton'>💛 {count}</LinkButton>
);
}
clickイベントの追加
ReactでのクリックイベントはonClick属性にコールバック関数を渡せばOK！
クリックイベントの定式
onClick={コールバック関数}
慣例的に、onClick属性のコールバック関数は、handleClick(クリックを操作するの意味)で定義されることが多いです。
handleClick関数をアロー関数で定義して、countを１ずつ増やしてみましょう！
(省略)
function LikeButton() {
const [count, setCount] = useState(0);
+ const handleClick = () => {
+ setCount(count + 1);
+ }
return (
- <LinkButton className='likeButton'>💛 {count}</LinkButton>
+ <LinkButton className='likeButton' onClick={handleClick}>💛 {count}</LinkButton>
);
}
LikeButtonの完成
以上で、LikeButtonコンポーネントの完成です。
完成コードを再掲します。
(省略)
function LikeButton() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
}
return (
<LinkButton className='likeButton' onClick={handleClick}>💛 {count}</LinkButton>
);
}
styled-componentの追加
JavaScriptの中にCSSを書く、 CSS in JS の代表格であるstyled-componentでボタンのスタイリングをしていきます。
まずは、インストールから
npm install --save styled-components @types/styled-components
styled-components本体と、typeScript用にstyled-componentsの型定義をインストールしています。
styled-componentsのモジュールから、styledをimportする。
import React, { useState } from 'react';
+import styled from 'styled-components';
import './App.css';
styled-componentsの書き方
const コンポーネント名 = styled.タグ名`
CSSの記述
`
今回は、LinkButtonコンポーネントをタグとしてスタイリングしていきます。
const LinkButton = styled.span`
background-color: rgb(231, 76, 60);
color: white;
padding: 0.8rem;
border-radius: 0.4rem;
cursor: pointer;
user-select: none;
`
これでスタイリングの完成です！
完成コード
お疲れさまでした！
こちら全体の完成コードになるので、エラーが出れば、間違いがないかもう一度見返してみ下さい。
import React, { useState } from 'react';
import styled from 'styled-components';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<LikeButton />
</header>
</div>
);
}
function LikeButton() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
}
return (
<LinkButton className='likeButton' onClick={handleClick}>💛 {count}</LinkButton>
);
}
const LinkButton = styled.span`
background-color: rgb(231, 76, 60);
color: white;
padding: 0.8rem;
border-radius: 0.4rem;
cursor: pointer;
user-select: none;
`
export default App;