「モダンJavaScriptの基本から始めるReact実践の教科書」の感想・備忘録1

スポンサーリンク

点数

92点

感想

前半はJavaScriptやReactの基礎についての説明が多く、やや物足りない内容だった。
後半はCSS問題・コンテキスト・メモ化・TypeScript・カスタムフックなど重要なものがきっちりと解説されていた。
全体的に丁寧でわかりやすく、素晴らしい書籍だと思う。

JavaScript

es2015の復習

分割代入

const name = user.name
const age = user.age
// が以下で書けるようになった。
const { name, age } = user

オブジェクトの省略記法

const user {
    name: name
}
// が以下で書けるようになった。
const user {
    name
}

スプレッド構文

myFunc(arr[0], arr[1]) // が以下で書けるようになった。 myFunc(…arr) // 配列・オブジェクトのコピー・結合はスプレッド構文を使うべき。 const arr2 = […arr] const arr5 = […arr3, …arr4]

配列のmapメソッドとfilterメソッド

  • map: returnされた値を要素とする配列を生成
  • filter: trueがreturnされた要素だけの配列を生成

Reactの基本

環境構築

  1. npx create-react-app my-app
  2. cd my-app
  3. mkdir components
  4. npm start

propsの書き方

  1. デフォルト
    const Sample = (porps) => {
      console.log(porps.msg)
  2. 分割代入で変数に格納する
    const Sample = (porps) => {
      const { msg, color } = props
  3. 仮引数自体を分割代入にする
    const Sample = ({ msg, color }) => {

useEffect

useEffectはレンダリングの際に処理を実行するためのものである。
第2引数の依存配列によって、実行されるタイミングが異なる。

  • なし: mounted, updated
  • 空配列: mounted
  • 配列: 変数が更新された時
    useEffect(()=>{
      console.log('useEffect')
    }, [num]);

コメント