はじめて触った感想はたのしい。
ただTODOアプリを作っただけですが。
フロントを自分の武器にしていきたいな。
深いとこまで勉強して更新します。
基本的内容
これまでのJavaScript
- レンダリングコストが高い、コードの複雑化
→モダンJSでは仮想DOMを操作し、差分を出してからDOMに反映 - １つのJSファイルにすべての処理を記載していた
→ファイルを分けるようになったが、どこの変数を使っているのかなどわかりにくい
→npm/yarnなどのパッケージマネージャーを使用 - ES2015が機能追加が多くあり、近代JSの転換期と呼べる
モジュールバンドラーとは
複数のjs(css/image)ファイルを1つにまとめたもの
JSファイルは細かく分けたほうが効率はいいが、本番用にビルドする際に1つのファイルにまとめる
トランスパイラとは（BABEL）
新しいJavaScriptの記法を古い記法に変換してくれる
開発は新しい方でやって、実行するときに古い記法に変換してくれる
SPAとは（Single Page Application）
- モダンJSはSPAが基本
- HTMLは1つのみでJSで画面を書き換える
- メリットは画面遷移がスムーズにできる
- コンポーネント分割が容易になることで開発効率がアップする
基本メモ
- コンポーネント名の頭は大文字
- reactのコンポーネントはわかりやすいようにjsxファイルにしてあげる。jsファイルでもエラーにはならない。
- HTMLのタグ内ではキャメルケースで記載
- JSXではclassではclassNameとなる
- mapなどでループしてレンダリングする場合は、keyを指定してあげる
- 一つのタグですべてをかっこてあげる必要がある→フラグメントで囲む必要があったりする
Propsとは？？
コンポーネントにわたす引数のようなもの
Stateとは？？
各コンポーネントが持つ状態。Stateが変更されると再レンダリングされる。
HTMLを再描画ではなく、コンポーネントの再レンダリングがポイント。
stateの共通化をする方法は、stateのリフトアップ（一番基本）、Redux、recoilなどがある
useEffect()とは？？
第2引数を取ることができる、その引数が変わったときだけを見る事ができる
useEffect(() => {
一回目に動く処理
}, []);
useContextとは？？
stateのバケツリレーを回避できる。
stateでわたさなくても。データレイヤーから取得できる
Reactが再レンダリングする条件
①stateが更新されてコンポーネント
②propsが更新されてコンポーネント
③再レンダリングされたコンポーネント配下の子要素は再レンダリング
※ステートが再レンダリングされたときのみ、再レンダリングされるような仕組みを作れるのがmemo、useCallback、useMemo
カスタムフック
- 共通化できる、共通化するときはカスタムフックもしくはコンポーネント化する
- 名前は先頭にuseをつける
CSSのあてかた
-
InlineStyle注意点
①ーで書かず、キャメルケースに変換する -
CSSモジュール
①書き方はCSSで書く
手順はCSSファイルをかく→モジュールファイルでインポートする→classNameでクラスを当てる -
StyledJsx
JSの中にCSSをかいていくようなイメージ
CSSのような書き方ができる -
StyledComponents(人気上位みたい)
-
Emotion