はじめてつくるReactアプリ with TypeScript: たった2.5時間で「わかる！できる！」　（三好アキ　著）

Kindleでみつけたこの本を参考にはじめてのReactアプリを作成していきます。

作業メモ

React開発ツールReact + Viteをインストール
React + Typesctiptでアプリを開発
WeatherAPI をつかって気象データを取得
create-react-app の使用は現時点で、推奨されていないので、React + Viteで開発をおこなう
- 違いは、Javascriptファイルをまとめるバンドラーの違い
- create-react-app ではWebpackが使われる
- React + Virte ではViteが使われる
開発でつかっていくのは srcフォルダ
ReactではHTMLタグ以外にもコンポーネントをimportでき、自分で名前をつけて<Title/>のように使うことができる
- 自分で作ったタグの最初の文字は大文字にすることが一般
- ReactコンポーネントであることをReactに伝えていることとなる
components フォルダを作成して各コンポーネントのファイルを格納するのが一般的
APIにデータを送るために、入力されたデータを一時的にアプリ内に保管する必要がある。この保管場所をReactではstateと呼ぶ
- stateに保管することでコンポーネント内でそのデータを利用できるようになる
import { useState} from "react" でデータの保管場所であるstateを作成する
const [city, setCity] = useState("")
- cityがstateとなり、ユーザーが入力した都市名が保管される
- setCityがstateにデータを書き込んだり操作したりする仕組みとなる
- 慣例的に２つ目の名称は「set + state名」とするのが一般的
useState("")のカッコ内の値がstateの初期データとなる
<input/>で入力されたデータをsetCityに渡す仕組みとしてonChangeを使う
onChange={e => setCity(e.target.value)}の解説
- eはevent parameter の略称で頭文字をとっている
  - eのかわりにevewntやeveと書く人もいるが働きは同じ
  - eには<input/>に関係する情報が格納されているので、ユーザーが入力した都市名の情報もそのひとつ
  - eの中のtargetにアクセスしてその中のvalueを取得している
returnのカッコ内ではJavascriptのコードを{}で挟むことで使える！
Reactの重要な設計コンセプトに「One-way Data Flow」がある
- Appから気象データをResultsにわたす
- FormからResultsにデータを渡すのはReactの設計コンセプトと異なる
  - データは上位のコンポーネントから下位のコンポーネントに渡しましょう！
- 最上位のコンポーネントをだけがデータを持ち、そのデータを必要としている配下のコンポーネントに渡す、という設計
  - これによってデータを一元管理できる
  - データの数が増えても管理が容易になる
コンポーネント間の受け渡しにはpropsを使用する
JavaScriptのテンプレートリテラル
- 文字列の中にJavaScriptのコードを入れるときにつかう
- バッククオートと$を使う

npm create vite@latest で環境作成

疑問点

export default xxxのdefaultの意味はなんだろう。著書では細かい説明はなかった。ビギナーが現時点では深く理解する必要はないと記載されている