バックエンドエンジニアがReactに触った時につまずいた事
どうも、バックエンドとIacをメインで戦おうと思っておりましたが、やっぱりフリーランスになるとReactとかも触らないとダメなシーンがあります。
ですので躓いた点を何点かピックアップします。
無名関数
まず通常の関数との違いを知る為に、通常の関数の記載を説明します。
関数は通常は「function 関数名」を記載します。計算実行する関数をdoCalcとしa+bを戻す関数を作成しています。
function doCalc(a,b){
return a + b;
}そして呼び出して変数に入れる場合下記のように書きます。
const c = doCalc(a,b);これを無名関数では次のように書きます。
変数に関数を設定する形になります。
const doCals = function(a,b){
return a + b;
}この変数に関数を設定する形式がjavascript独特で他に無い形なので最初すごい違和感があります。
呼び出し方は次のような形になります。
const c = doCals(a,b);アロー関数
上記の無名関数とにてます。無名関数と違うのはfunctionが削除されアロー演算子(=>)が追加されている所です。
この形まで一発で覚えると分かりづらくなるので、無名関数と紐づけて覚えるのが良いと思います。
const doCalc = (a,b) => {
return a + b;
}またアロー関数を予備出す場合は下記のようになります。
doCalc(a,b)アロー関数と通常関数の違い
簡略化すると下記の2つの書き方の違いになるのですが、書き方の違いだけでなく振る舞いも異なります。
function myFunc() {}
const myArrow = () => {}UIフレームワーク
phpでlaravelやrubyでrailsみたいな感じで
javascriptでReact,Vueみたいな感じですが、
さらに見た目はUIフレームワークがあったりCSSフレームワークがあったりと結構煩雑です。
reactでのUIフレームワークは、material uiが一番人気みたいです。
stateの概念と非同期処理
useStateとかstate管理とか何？constで宣言した関数と何が違うの？
って初心者丸出しでなっていました・・・
useStateでstate管理する変数状態が変わった場合に、再度画面の再描画を非同期でおこなってくれる仕組みがあるみたいです。
ですので値が変わった段階で画面を再描画したい場合の変数にstateを使うとよいです。
コンポーネントと言う単位
見た目の機能をワンセットにしたコンポーネントと言う単位で部品を作っていくみたいなのですが、見た目と機能とセットにした単位で部品課するみたいです。
Reactのバージョンによりコンポーネントの書き方が変わる
クラスコンポーネントから関数コンポーネントで作成するのが主流になっているようです。