初めて Apollo Client を使うことになったらキャッシュについて知るべきこと - WASD TECH BLOG
この記事は GraphQL Advent Calendar 2020 2日目の記事です。 前回は mtsmfm さんの記事でした。 GraphQL は REST などと同じく、DB のテーブルをそのまま露出するとは限らない - Qiita はじめに こんにちは、 shinnoki です。 フロントエンドで用いる GraphQL のクライアントは複数の選択肢が存在しますが、 React + TypeScript なプロジェクトでは Apollo Client が採用されることが多いのではないでしょうか。 Apollo Client の特徴のひとつに強力なキャッシュ機構がありますが、逆に理解しないと意図しない挙動になることもあったりと、初学者にとってはなかなかイメージを掴みづらいものになっています。 まず最初に結論として、「初めて Apollo Client を使うことになったけど、とにかく早
15+ React Native Component Libraries You Should Know in 2024
15+ React Native Component Libraries You Should Know in 2024by PriyaSeptember 11, 2024Front-End Development React Native component libraries can be a huge time-saver when you’re working on an app project. How? Well, let’s start with React itself. You probably know that React is an open-source JavaScript library that helps in building user interfaces for both web-based and mobile apps. It includes
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
すべてのウェブ開発者へ。人気GitHubリポジトリ9選 - Qiita
本記事は、Simon Holdorf氏による「9 Popular GitHub Repos For Every Web Developer」（2021年4月4日公開）の和訳を、著者の許可を得て掲載しているものです。 こちらもどうぞ すべてのウェブ開発者へ。人気GitHubリポジトリ10選 便利なツール、参考になる例など はじめに GitHubは、最近の（ウェブ）開発に関連するすべてのワンストップショップです。フレームワーク、デモ、あらゆる種類のコレクションなど、GitHubで見つけられないものはないでしょう。しかし、この膨大な量が問題です。あまりにも多くのレポジトリがあるので、おそらく聞いたことのないクールなものがあります。 そこで今回も、知っておくべき最も人気のGitHubリポジトリを紹介することにします。各リポジトリには少なくとも30,000個の星が付いています。 1. Realwor
すごいReactフック8選 - Qiita
はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取
Service Workerがもつ圧倒的な力。SEO担当者は変化に適応が必要 | Moz - SEOとインバウンドマーケティングの実践情報
PWA、SPA、Service Workerとは？（前編で解説）SPAを可能にするApp Shellアーキテクチャ（中編で解説）Service Workerがもつ圧倒的な力まとめ3. Service Workerがもつ圧倒的な力最初にはっきりさせておきたいことがある。それは、ここまでで解説してきた「SPA」と、ここから取り上げる「Service Worker（サービス・ワーカー）」は、互いに排他的なものではないということだ。 つまりこの2つは共存するものだということだ。どちらもPWAと呼ばれるものの基盤となっているが、SPAではないPWAをつくることも可能だし、従来の静的なウェブサイト（クライアントサイドでレンダリングする処理がないサイト）にService Workerを統合することもできる（近い将来、そのようなサイトが増える僕は思っている）。 さらに、Service Workerはウェブ
「SEO」と「SPA/PWAによるUX向上」を両立させるハイブリッドレンダリングの基礎知識と実現手法 | Moz - SEOとインバウンドマーケティングの実践情報
前編を読んで最新ウェブ技術の入り口に立ったら、次はUXやパフォーマンスを実現するSPAの基本と、SEOのためのハイブリッドレンダリングの基本を理解しよう。 ここでは、ユーザーにとって快適なSPAを実現しながら、検索エンジンがコンテンツをクロール・インデックスできるようにするための基本的な知識として、 ディープURLインデックスサーバーサイドレンダリングハイブリッドレンダリングアイソモーフィックアプリプリレンダリングJSフレームワークによる完璧なハイブリッドレンダリング／静的サイトジェネレータといった具体的な手法を理解していこう。 URLが一意であるか、それがSEOのポイントしかし冒頭で述べたように、クライアントサイドのJavaScriptへの依存度が高い状況は、SEOにとって問題だ。 歴史的に見ると、このような問題の多くは、次のようなギャップに起因する。 検索エンジンのクローラーは、コンテ
【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog
id:daido1976 です。入社してからあっという間に1年が経っていました。 直近3ヶ月ほどプライベートでフロントエンド開発の勉強をしていたのですが、ここ数年で CSS の Grid や React の Hooks が新しく導入されたことなどもあり、少し古いコンテンツだと教材として役立たない1 と感じることが多かったので、本記事では私が実際にやってみた中で 2019年時点で オススメできると判断した教材や学び方を皆さんにご紹介したいと思います。 はじめに やったこと JavaScript MDN の JavaScript の部分を読む & 手を動かす JavaScript Primer を読む YouTube 動画で Promise を学ぶ デバッグ方法を学ぶ React React 公式のチュートリアルを2周する egghead.io の動画で Redux を学ぶ ヘルシンキ大学の
9 React Static Site Generators for 2019 – Bits and Pieces
Static sites are a relic of the past originally introduced before CMSs took over the web. Today, they enjoy a successful reincarnation with static-site generators and modern frameworks such as React, Vue and Angular. Leveraging the power of modern frameworks with toolings like Webpack and advanced CSS techniques, static site generators (SSGs) let you create and deliver beautiful websites with cust
State of React State Management for 2019 (Updated 2021)
State management has always been a vital yet somewhat dreadful aspect for working with React. Recently I’ve had the pleasure of talking to a few R&D teams, each of whom had an entirely different opinion about this topic. From complaints about Redux making it hard to keep components self-contained to experimenting with the new Context API, most are constantly evaluating for the right solution to pi
ざっくり React with Redux チュートリアル - Qiita
!!!Caution!!! (2019/8/15追加） ここに書いてあるやり方には、今は推奨されていない古い書き方があります（Class Component、propTypes、Redux における Action と Reducer の扱い方など）。 近年、推奨されているやり方でまとめたものが見たい場合はこちらを御覧ください。 https://qiita.com/pullphone/items/fdb0f36d8b4e5c0ae893 前回までのまとめ React Tutorial 編 http://qiita.com/pullphone/items/efcaee59cf2a5725c61d 今回のテーマ そもそも Redux とは？ Redux で実装するにあたってのテンプレ・お約束 React と Redux をつなぐ そもそも Redux とは何者なのか？ React State の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Native support · Issue #183 · chakra-ui/chakra-ui
SEO担当者向け PWA・SPA・Service Worker 超入門。もう「JavaScript苦手」なんて言ってられない | Moz - SEOとインバウンドマーケティングの実践情報