🧗♀️
サバイバルTypescript 試してみた
はじめに
こちらの記事は、プログラミング初学者が書いています。内容の保証は確立していません。
また、サバイバル TypeScript で学習したものを TypeScript 初学者がアウトプットするためのものです。
作って学ぶTypeScript
Reactでいいねボタンを作ろう
参考
冒頭の要約
Reactの3大特徴
- 仮想DOM (Virtual DOM)
-
通常のDOMはHTMLをJavaScriptから操作する仕組みで、リアルタイムで画面表示が更新されますが、複雑なUIを扱うのは難しく、バグやパフォーマンス問題が発生しやすいです。
-
仮想DOMはリアルDOMのプロキシとして機能し、状態管理を簡単にし、パフォーマンスの最適化を行います。仮想DOMを操作することで、変更はリアルDOMに反映されます。
- 宣言的UI
- Reactでは、UIをどのように表示するかではなく、どのようなUIにしたいかを記述します。これにより、実装の詳細を気にせず、目的のUIを簡潔に記述できます。
- コンポーネントベース
-
Reactはコンポーネントという小さな部品を組み合わせて大きなアプリケーションを作る思想です。ボタンやフォームなどのコンポーネントを再利用することで、開発効率が向上します。
-
オープンソースのコンポーネントも多く公開されており、これらを利用することでさらに効率的に開発できます。
このチュートリアルに必要なもの
- Node.js (このチュートリアルではv18.15.0で動作確認しています)
- NPM
- Yarn v1系 (このチュートリアルはv1.22.19で動作確認しています)
- VS CodeやWebStormなどのエディター
Yarnのインストール
ターミナル
npm install -g yarn
エラーが表示されている場合
以下のコードを実行してください。
ターミナル
sudo npm install -g yarn
React ローカルサーバの起動
- Reactプロジェクトの雛形生成 (時間がかかります。)
ターミナル
yarn create react-app like-button --template typescript
上記のコードでReactのインストールも自動で行われます。
※追記 コードの解説
上記のコードは、新しい React アプリケーションを like-button という名前で作成しています。
--template typescript: プロジェクトに オプション(TypeScript のテンプレート)を使用することを指定し、すぐに TypeScript を使用した開発を始めることができます。
- Reactがインストールされていることを確認
ターミナル
yarn list react
これでバージョンが帰ってきたらReactがインストールされている状態になります。
- React動作確認ページの起動
ターミナル
yarn start
下記画面が表示されたらok!
まずはコピー
以下のコードに更新してください。
src > app.tsx
import React, {useState} from 'react';
import logo from './logo.svg';
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(
<span className="likeButton" onClick={handleClick}>
❤️ {count}
</span>
);
}
export default App;
app.cssの一番下に以下のコードをコピペしてください。
src > app.css
.likeButton {
background-color: rgb(231, 76, 60);
color: white;
padding: 0.8rem;
border-radius: 0.4rem;
cursor: pointer;
}
解説
これは参考のサイト先に飛んで確認してください。
Discussion