JavaScript Patterns Workshop | JavaScript Patterns
The content is based on Patterns.dev - a free online resource on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React. The patterns covered on this website and in the workshop can guide you when facing a problem other developers have encountered many times before, but are not a blunt tool for jamming into every scenario. The goal is to raise aware
React Query のレンダリング最適化を目指した話 - Techtouch Developers Blog
エンジニアの macchii です。この記事はテックタッチアドベントカレンダー 14 日目の記事です。 テックタッチでは React を利用して WEB フロントエンドを開発しています。あわせて、リモートデータの取得、更新、キャッシングには React Query を導入しています。本記事では、簡単なタスク管理アプリを題材に、「React Query の再レンダリングを最適化するテクニック」紹介します。 ja.reactjs.org react-query.tanstack.com TL;DR はじめに React Query は取得データを厳密に比較（deep compare）する 参照していないプロパティの変更でも再レンダリングが発生する notifyOnChangeProps オプション select オプション まとめ TL;DR React Query は取得データを厳密に比較（
Next.js 11
As we announced at Next.js Conf, our mission to create the best developer experience continues with Next.js 11, featuring: Conformance: A system that provides carefully crafted solutions to support optimal UX. Improved Performance: Further optimizations to improve cold startup time so you can start coding faster. next/script: Automatically prioritize loading of third-party scripts to improve perfo
React界隈で話題になっている「React Server Components」についてまとめました！ | DevelopersIO
React界隈で話題になっている「React Server Components」についてまとめました！ どうもReact大好きCX事業部の片岡です！ 今回はReact界隈で話題になっている「React Server Components」についての内容を意訳してみました。 元ネタ 話題になっているこちらの記事が元ネタです。 https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html 概要 Fetch APIでデータをやり取りすると、バケツリレーが発生します。例えば、Spotifyのアーティストページにはアーティストの情報と人気の曲とアルバム一覧が並びます。この時、人気の曲とアルバム一覧を取得するには、アーティスト情報を取ってこないといけません。そうすると、アーティスト情報を取得して
組織戦略としての React Native | DevelopersIO
この記事は React Native Advent Calendar 2020 の 13 番目の記事です。私の視点や感覚をもとに、 React Native を採用する際の現状を記述したものです。 次の方を対象としています。 技術をビジネスの競争力へ転換する責任を負う方 採用の責任を負う方 技術的な詳細については拙著を参照してください。 書いているひと エンジニアリングマネージャーの januswel です。現在は育成をメインに、採用を少し手伝ったり、メンバーのキャリアと組織の方向性をすり合わせるなど、主にピープルマネジメントを担当しています。また、チームでの採用技術の軸足を揃えたり、実案件も少し関わらせていただいてます。 React Native とはなにか React を用いて様々なプラットフォーム上でアプリケーションを構築可能なオープンソースソフトウェアです。開発は Facebook
React + Material-UIで管理画面を作成してみた | DevelopersIO
Reactアプリを作成 Material-UIで管理画面を作るためのベースとなるReactアプリを作成します。 Create React App Create React Appで新しいReactアプリを作成します。 npx create-react-app react-material-ui-sample --typescript プロジェクトのディレクトリへ移動して実行します。 cd react-material-ui-sample npm start ブラウザにReactアプリが表示されます。 ディレクトリ構成 ディレクトリはあまりネストさせすぎずシンプルな構造にしました。コンポーネントの分け方はAtomic Designを参考にしています。 src/ ├ components/ │ └ atoms/ # 原子（個々のパーツ） │ └ molecules/ # 分子（原子の集合体）
Node.js プロジェクトの依存パッケージ更新戦略 | DevelopersIO
また、チルダ ~ U+007E を付与することも可能で、その場合は「マイナーバージョンが同じである現在の最新バージョンをインストールしなさい」という指定です。マイナーバージョンの指定がない場合、つまり ~1 などはメジャーバージョンが同じである最新バージョンを指します。 その他にもバージョン指定の方法はありますが、この 2 種類を知っていれば問題ありません。 バージョン固定の必要性 特に気にしない場合、インストールされるパッケージのバージョンに幅が出てきてしまうわけです。これではチームメンバー間で異なるバージョンがインストールされる可能性があり、メンバーによって挙動が異なってしまうかもしれません。 これを防ぐ仕組みとして、 npm では package-lock.json が、 yarn では yarn.lock が提供されています。 それぞれ、 npm install もしくは yarn
GraphQLの入門書を翻訳しました
ソフトウェアエンジニアの尾崎です、最近は新規事業を立ち上げるべく色々やっています。この度、弊社2名（私とあんどう）が翻訳したGraphQLの入門書『初めてのGraphQL』がO’Reilly Japanから出版されます。（2019年11月13日（水）発売予定です。）今回はこの書籍について紹介します。 表紙の鳥はタカ目タカ科のボネリークマタカです GraphQLとは GraphQLは公式ドキュメントに “A query language for your API” とある通りAPIのためのクエリ言語です。GraphQLは2015年にFacebookによってOSSとして公開されました。2017年にGitHubの公開APIがGraphQLに移行されたことを契機に採用事例が増えてきています。 GraphQLのAPIはこれまでのAPIとはパラダイムが大きく異なります。現在主流のWeb APIはRoy
Data Visualization Libraries for React Developers in 2019
For the second year in a row React stays among the top three most loved and acknowledged libraries by professional developers all around the world. And not without reason. Let me outline its main benefits for building user interfaces: The system components are highly reusable and writing custom components is a mostly painless process.Easy learning curve.Due to the presence of virtual DOM, it’s sui
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - plasmicapp/plasmic: Visual builder for React. Build apps, websites, and content. Integrate with your codebase.
GitHub - antonioru/beautiful-react-diagrams: 💎 A collection of lightweight React components and hooks to build diagrams with ease 💎
GitHub - BuilderIO/mitosis: Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.
GitHub - bytedance/IconPark: 🍎Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons
GitHub - flareact/flareact: Edge-rendered React framework built for Cloudflare Workers
GitHub - appleple/smartblock: intuitive block based wysiwyg editor built with React and ProseMirror
GitHub - maxchehab/phelia: ⚡ A reactive Slack application framework.
GitHub - react-native-jp/react-native-at-airbnb-jp-translation