Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
ReactコンポーネントのKey(キー)の付け方 - 無気力エンジニア
はじめに 最近Reactを勉強し始めて、map()などのループでコンポーネントを作成するときに、Keyはどのように付けるべきなのか疑問に思い、調査したことをまとめて紹介します。 はじめに 参考文献 インデックスをReactコンポーネントのKeyとして使用しない Keyの役割 インデックスをKeyとして使用する際の問題 Keyのシンプルなルール 参考文献 この記事は以下の情報を参考に執筆しました。 React Best Practices & Tips Every React Developer Should Know Pt.2 インデックスをReactコンポーネントのKeyとして使用しない 配列のインデックスを、ReactコンポーネントのKeyとして使用しないでください。map()やイテレータやループを使用したときに、Keyとしてインデックスを利用するパターンはよく見られます。または、Ma
Electron + Reactでデスクトップアプリを作ろう！ - Qiita
useStateで配列要素を追加・削除・変更する方法 - Qiita
はじめに 今回はuseStateで配列を更新する方法について紹介していきます。（個人開発の備忘録も兼ねているので、何か気づいたことがあれば教えていただけると嬉しいです。） useStateで配列要素の更新を行う場合、pushなどを使用すると再描画が走りません。理由についてはこちらに詳しく解説がありました。 Reactではstateの値が変化した時にコンポーネントが再描画されます。 stateの値の変化を、Object.is() で判定しているとのことです。なので、pushやspliceでは前回と同じ値と判定されるそうです。 そのため、pushなどは使用せずに、新たに配列を作成して保存する必要があります。
Electron + React + TypeScript の開発環境構築
% tree -a -I 'node_modules' . ├── dist ├── package-lock.json ├── package.json ├── src │ ├── main.ts │ ├── preload.ts │ └── web │ ├── App.css │ ├── App.tsx │ ├── index.html │ └── index.tsx ├── tsconfig.json ├── tsconfig.node.json └── webpack.config.ts 3 directories, 11 files dist/: webpack の出力先フォルダ src/main.ts: メインプロセスのエントリファイル src/preload.ts: プリロードスクリプト src/web/: レンダラープロセス (= React アプリケーション) ソースコー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - mohammed-io/frappe-gantt-react: A Wrapper for the awesome Frappe Gantt library
