はじめてつくる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の意味はなんだろう。著書では細かい説明はなかった。ビギナーが現時点では深く理解する必要はないと記載されている