React初学者のつまづきポイント、勉強法

概要

phpは書き慣れていたのですが、reactを学ぶにあたってつまづいたポイントまとめ。
言い換えると、下記については、それぞれちょ～～～っと腰を据えて学習する必要があった。
※ほんとのプログラミング初学者がreactから入るのは本当につらい

つまづきポイント

Javascript特有の記法

• アロー関数
• スプレッド構文（配列名の前に...をつけるやつ）
• if else を ? で書くやつ
• map関数、filter関数（要素を繰り返し表示したり、特定の要素の削除）

◆React特有のもの

　ざっくり理解

• App.jsがレンダリング（もろもろ変換）されて丸々クライアント（ブラウザ）に渡される

• （↑を細かくいうと）最近pcもスマホも高機能なので、バックエンドでやってたようなな処理をでかいファイル（App.js）でまるまるクライアント側に渡してやってしまおうという思想

• そのためバックエンドとは基本非同期処理

• 一つの関数の塊をコンポーネントとして扱う。その中に処理（javascript）とhtmlとかまとめちゃう

• コンポーネントのreturnの中にhtml（画面）を書く

• returnの{}の中にjavascriptを書く（jsx）

　つまづきポイント

• 変数、関数のcomponent間の受け渡し
• hooks（React特有のライブラリみたいなもの。これを使わないと始まらないが、必須のはそう多くない）

　JSXにおける記法

• htmlなのかjsなのかわからなくなる（タグの関数を"submithanndle"でいいのか{submithandler}でいいのかとか）

対策、勉強法

1. youtubeのTODOアプリなどをとりあえずいわれるがままにクローン、全体感を理解。わかる個所とわかんない箇所を出して、理解
   ※sandboxで十分。環境構築でごみファイルをローカルに増やしたくない...

2. 基本的な機能について、chatGDPで例を出力→sandboxで実行してみる
   　 ※chatGDPで（react input）など打つと、コードの例を作ってくれる

3. Javascriptが全然慣れていないなら、paizaのスキルチェック問題集も参考になる

4. アプリ作る。

簡単な機能の例：

• cookieの操作
• ナビゲーション
• 画面遷移
• formタグ、inputの操作
• 表示非表示
• 配列による要素の動的CRUD