概要
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}でいいのかとか）
対策、勉強法
-
youtubeのTODOアプリなどをとりあえずいわれるがままにクローン、全体感を理解。わかる個所とわかんない箇所を出して、理解
※sandboxで十分。環境構築でごみファイルをローカルに増やしたくない... -
基本的な機能について、chatGDPで例を出力→sandboxで実行してみる
※chatGDPで（react input）など打つと、コードの例を作ってくれる -
Javascriptが全然慣れていないなら、paizaのスキルチェック問題集も参考になる
-
アプリ作る。
簡単な機能の例：
- cookieの操作
- ナビゲーション
- 画面遷移
- formタグ、inputの操作
- 表示非表示
- 配列による要素の動的CRUD