React
@types/react導入済みのプロジェクトで、後から@types/react-responsiveを追加した時に下記のようなエラーが100件近く発生したので、その原因と対処法をメモしておきます Duplicate identifier 'LibraryManagedAttributes'. 結論 どうやら,yarnがreactの複数…
useCallbackとは？ 以前に紹介したuseMemoと同じ感じで、関数をメモ化します。 yamato8010.hatenablog.com つまり、初回時のレンダリングまたは、依存する値が変わらない限りは、前回と同じ関数インスタンスを再利用するようになるので、パフォーマンスが向…
useMemoとは？ useMemoは初回時に実行された関数の値を保持して、次回以降はその保持した値を再利用することでパフォーマンスを向上させる仕組みです。(Swiftでいうところのlazy varとかに近いかな) 使い方 下記のように使うことができます。 const isSoccer…
結論 下記のようにして、全体の要素のmousedownイベントを監視して、そのイベントの中のtargetRefに関するイベントのみ除外することで、特定の要素以外の場所がタップされたことを検知することができます👀 const targetRef: React.RefObject<HTMLDivElement> = React.createRe</htmldivelement>…
useEffectとは？ useEffectは、Reactのコンポーネントがレンダリングされた後にフックされる特別な関数です。 毎回呼ばれるの？ 公式ドキュメントにも載っているような、下記のシンプルな例の場合では、毎回レンダリング後にuseEffectが呼ばれます。 import …
結論 Functional Componentを実装する際に、下記のように定義するのではなく、 const Ex = (props: Props) => { return ( <div> hoge </div> ) } React.FCを使って実装すれば、呼び出しからchildrenプロパティを参照できるようになります。 const Section: React.FC<SectionProps> = p</sectionprops>…
ボタンタップ時などに、動的にフォームを追加する方法がわからなかったので簡単にメモ。 結論 JSXでは{ }で囲んだコードは、JavaScriptとして認識されるので、動的にコンテンツを追加したい場合は下記のように記述することができます。 public render() { re…
React勉強中なので、簡単にClass ComponentとFunctional Componentの違いをメモしておきます♀️ Class Component Class ComponentはStateやライフサイクルを持つことができます。実装クラスはReact.Componentを継承する必要があります。 class Summary exten…
最近React入門したので、Webフロント周りも記事にしていこうと思います👷♀️ 結論 JSXで下記のようなものを書いてたら、エラーに出くわした。 public render() { return ( <div> hoge </div> <div> hoge </div> ) } Parsing error: JSX expressions must have one parent element ど…
