GraphQL入門 - Qiita
はじめに 対象読者 GraphQLについてざっくり学びたい人 公式ドキュメント読むのがしんどい人 Apollo/Relayどっちを使うか迷っている人 GraphQL概論編 RESTful API 代表的なWeb APIである、REST APIについて、簡単にまとめつつ、 GraphQLでできることについて、書いていこうと思います。 RESTful API(REST API)とは、Webシステムを外部から利用するためのプログラムの呼び出し規約(API)の種類の一つで、RESTと呼ばれる設計原則に従って策定されたものです。RESTそのものは適用範囲の広い抽象的なモデルだが、一般的にはRESTの考え方をWeb APIに適用したものをRESTful APIと呼んでいます。 RESTful APIでは、URL/URIですべてのリソースを一意に識別し、クライアントがHTTP（あるいはHTTPS）で要求
エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 約2分程度で読めるので最後まで読んでもらえると幸いです。 対象 Reactのインプットが完了してお手頃なアプリを開発したい方 フロントのみで実装したときの『データの流れ』を理解したい方 サイトのURL アプリのご紹介 こんなアプリが開発できます。 何が学べるか？ CRUDの開発 登録（Create）・参照(Read)・更新(Update)・削除(Delete)に加えて、参照後のtodoリストへの絞り込みの開発について学べます。 コンポーネントの使い方 メインページを一通り開発した後、コンポーネント化できる箇所をピックアップします。 具体的には『Todo』『FilterButton』『Form』コンポーネントとしてファイルの切り出しをします。切り出す時の開発手順が学べます。 propsの使
GitHub - eBay/nice-modal-react: A modal state manager for React.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Reactにおける「副作用」とは？ - Qiita
背景 ReactやReduxの記事やドキュメントを呼んでいると、度々「副作用」という単語を目にします。医薬品における副作用しか連想できなかったので、ちゃんと調べてみました。 プログラミングにおける副作用とは 副作用は「プログラミング」という大きな枠で用いる単語であり、ここでは触れませんが、主に関数型プログラミングや並行処理の議論で活躍する概念です。 何がプログラミングにおける副作用なのか、明確な定義はありません（言語ごとの定義はあるのかもしれませんが）。しかし、以下２つの関数による処理のことを「副作用」と呼ぶことが多いです。。 1. 引数以外の要因で結果が変わってしまう関数 2. 関数の外に影響を与えてしまう関数 「引数以外の要因で結果が変わってしまう関数」についてですが、例えば、関数f(1)と関数f(2)のように引数が違う場合に別の結果が返ってくるのは全く問題ありません。しかし、グローバ
GitHub - petyosi/react-virtuoso: The most powerful virtual list component for React
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
React Hooks 入門: フックの基礎や使い所をしっかり理解して使いこなす 作者:soarflat発売日: 2020/09/22メディア: Kindle版 React hooksの基礎中の基礎は勉強したけど、その他の機能も知らないといけないと思ったので勉強しています useEffectとは useEffectの例 初期表示のuseEffectの例 特定のstate(変数）が変更された時のuseEffectの例 useEffectの副作用のクリーンアップ Windowの幅が変更時に処理を実行したい場合 動かして確認したい人は・・・ 参考URL useEffectとは useEffectはアンマウント(初期読み込み）、状態を変更するなど、 取り付けによる副作用（DOMの書き換え、変数代入、API通信など）を処理するのに最適です クラスコンポーネントでのライフサイクルメソッドに当たります。
Examples of large production-grade, open-source React apps - Max Rozen
Examples of large production-grade, open-source React apps It's bloody hard to find a good example of a large production-grade, open-source React app. There are a few reasons for this: No one writes amazing code the first time they write itExperienced product engineers know there's a trade-off between quality and getting features in the hands of customers. You're more likely to find ugly tech debt
https://jsx-mail.org/
Update to remove the "setState on unmounted component" warning · reactwg/react-18 · Discussion #82
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Kimia-UI — UI Components for React built with Tailwind CSS
A collection of UI Components for React built with Tailwind CSS 3 Provides fully customizable UI Components compatible with Next.js, Remix, Gatsby, and others React meta frameworks.No installation needed, Just copy and paste a component you want to use Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Il allows you writing your style without leaving your HT
ReactのuseEffectを利用したときに無限ループが発生してしまうことがあります。 特に注意したいのが、ESLintのreact-hooks/exhaustive-depsで表示された警告をUpdate the dependencies array to be :[...のコマンドで修正するケースです。 以下は初期表示時にユーザーの一覧をAPIなどで取得して、stateに設定しています。 コンポーネントの処理が実行された後、useEffectの第２引数が変更されている場合のみ、第１引数のファンクションが実行されますが、ここで指定しているsetUsersは変更されることがないため、結果的に初期表示時のみ処理が行われます。（無限ループは発生しない） import { VFC } from 'react'; import { getUsers } from './api'; const M
For comments, please find the RFC link in the blog post: https://reactjs.org/server-components 2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero bundle size React Server Components. The demo is available now whether you want to play with it during the holiday, or when work picks back up in the new year. Happy holidays from the
以前、Webページでスクロール位置に応じて要素のスタイルを変えたいようなケースがありました。 上の例では、最初は60pxですが、現在の位置より上にスクロールされると少しずつサイズが小さくなり、ビューポート上部に達したときに20pxになるように実装されています。 これをReactで雑に実装したので備忘録として残しておきます。 1. 要素の位置を取得するカスタムフックを作る まずビューポート内の要素の位置を取得する必要があります。複数の要素に対して同じことをやりたくなったときのために、要素の位置を取得する処理はカスタムフックに切り出しておきます。 import React, { useEffect, useState, useCallback } from "react"; export function useOffsetTop(ref?: React.RefObject<HTMLEleme
【Next】Next.js のルーティング（React Router ではなかった。。。） - 7839
最近、Next.js をよく使っている私だが、先日の案件で SPA で S3 などを用いた静的ウェブサイトとしてホスティングしたいという話になった。よし！今回も Next.js でいくぞ！と意気込んだが、検討した結果、通常の React で React Router を使って実装することになった。 今回は、その経緯に関して、整理しておく。 今回のアプリケーションの概略 Next.js のルーティング (余談) React Router (余談) Nuxt.js まとめ 今回のアプリケーションの概略 page 構成を Next.js のフォルダ構成で記載する。 pages |-- companies/ | |-- index.tsx | |-- [companyId]/ | |-- index.tsx | |-- groups/ | |-- [groupId].tsx | |-- index
はじめに 前回は、「Error Boudary」を使用したエラー処理方法について調べました。 React: アプリ内のエラーを処理する（Error Boundary） このError Boudaryコンポーネントは、クラスコンポーネントで定義する必要があり、関数コンポーネントとして作成できません。 また、イベントハンドラでのエラーや、非同期処理でのエラーが処理できません。 そこで、コンポーネントでのエラーやイベントハンドラでのエラー、非同期処理でのエラー、全部まとめて簡単に処理できるError Boudaryのラッパー「react-error-boundary」について調べてみました。 環境 Windows11 vite: v2.7.2 node: v16.13.2 react: v17.0.2 typescript: v4.4.4 react-error-boundary: v3.1.4
JestでReactアプリのUIテストを自動化してみた（スナップショットテスト） | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、JavaScriptのテストフレームワークJestを使用して、ReactアプリケーションのUIテストの自動化をしてみました。 ReactアプリのUIテストをするためには Reactアプリケーションのユーザーインターフェース（UI）のテストを自動化する場合、次のような観点が考えられます。 DOM要素の出力が期待通りであるかのテスト コードの変更前後でDOM要素の出力に差分が発生していないか（又はしているか）のテスト 特に後者のテストは、ある時点の画面のスナップショットを用意したテストとなるため、スナップショットテストと呼びます。 そして、これらいずれのUIテストもJestを使用して自動化が可能です。 やってみた テスト環境の作成 テスト対象となるReactアプリケーションを新規作成します。 $ npx create-react-ap
はじめに アイディオットDX開発部の岩澤です。 とあるプロジェクトで、現在パフォーマンスチューニングを行っています。 いろいろ見ていく中で、フロントエンド側でReactのuseEffectの中でデータフェッチをしてしまうことで起こる問題を発見しました。 せっかくなので、それがなぜ問題を引き起こすのかと、その対策について、今回は記事にしたいと思います。 useEffectの良くない使い方 以下のサンプルコードは、React初級者がよくやりがちな記述です。 useEffectの中で、コンポーネントの初回レンダリング後にデータを取得しています。 また、useStateでローディング状態を管理しています。 そして、Parentsコンポーネントの子コンポーネントとしてChildコンポーネントがあり、Childコンポーネントでも必要なデータをuseEffectの中で取得しています。 export fu
React 向けヘッドレスUIライブラリの紹介
昨今様々なヘッドレスUIライブラリ登場しています。ヘッドレスUIは特定のスタイルがなく、UIコンポーネントの基礎となるロジックと機能のみを提供することに焦点を当てたものです。 この記事ではRadixUIをはじめとするいくつかのヘッドレスUIライブラリを紹介していきます。 RadixUI ヘッドレスUIの代表格で、効率的な実装、容易なメンテナンス、アクセシビリティを優先しているUIライブラリです。開発者が完全にスタイルを制御できるプリミティブを提供し、複雑なアクセシビリティのロジックや状態管理を抽象化しています。32のコンポーネントが利用可能で、設定を排除することで開発を効率化しプロジェクトにコンポーネントを迅速に組み込めるようになっています。 GitHub stars: ~13.5k Npm weekly downloads: ~1,345,900 コンポーネント数: 32 Headles
GitHub - unlayer/react-email-editor: Drag-n-Drop Email Editor Component for React.js
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
【Next】getInitialProps・getStaticProps・getStaticPaths・getServerSideProps の使い方まとめ - 7839
Next.js で開発しているときに、getInitialProps・getStaticProps・getStaticPaths・getServerSideProps について、いつ、どのように使うべきか、きちんと整理できておらず、自分なりの整理をしてみた。 今回整理する API は、どれもページコンポーネントで、プリレンダリングをしてデータを取得（フェッチ）する際に使用するものである。getInitialProps は「リクエスト時」にデータを取得する。そして、v9.3 から用途に応じて、より宣言的に書くことができるよう、以下の3つが追加された。 SSG用のAPI getStaticProps（「ビルド時」にデータを取得する） getStaticPaths（データに基づいて動的ルーティングを指定する） SSR用のAPI getServerSideProps（「リクエスト時」にデータを取得
React製のSPAのパフォーマンスチューニング実例を読んでいて、react-virtualizedというライブラリを試してみたくなりました。 結果としては、初回アクセスのレンダリング速度が4倍ほど速くなりました。 react-virtualizedの概要 Reactコンポーネントがたくさん組み込まれたページをレンダリングしようとすると、コンポーネントの数に比例してレンダリングに時間がかかってしまいます。コンポーネントが少なければ問題はないのですが、スクロールを駆使するようなWebサイトではレンダリングがボトルネックになります。react-virtualizedを使うと、 ブラウザの画面に表示されている領域に存在するコンポーネントのみをレンダリング してくれます。 GitHub https://github.com/bvaughn/react-virtualized 検証のため作ったアプリ
RFC: React Server Components by josephsavona · Pull Request #188 · reactjs/rfcs
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
React入門~環境構築から簡単なSPAの作成~ - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは、Engawaです。 ここ最近業務でReactについて触れる機会があり、Reactの学習を行ったので、 環境構築からreact-router-domを使用した簡単なSPAの作成方法についてザックリ紹介していこうと思います。 はじめに Reactとは 環境構築 起動 SPAの作成 react-router-domのインストール サンプルコード 実行 おわりに 参考資料 Reactとは React はFaceBook社が開発した、UIを作るためのJavaScript用ライブラリです。 アプリに特化したReactNativeもあります。 そちらについてはこちらで紹介していますのでご覧いただけれと思います。 環境構築 私が学習をした際の環境は以下になります。 node： v10.19.0 OS ： macOS Catalina 使用したエディタ：VSCode こちらで記載する環
I am currently migrating a React application to TypeScript. So far, this works pretty well, but I have a problem with the return types of my render functions, specifically in my functional components. I have always used JSX.Element as the return type, now this doesn't work any more if a component decides to not render anything, i.e. returns null, since null is not a valid value for JSX.Element. Th
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
Facebook(Meta)製のエディタライブラリのLexicalについて、もうちょっと調べる時間がもらえたので第２弾です！ 前回の記事で書いた通り、やっぱり公式のプレイグラウンドのようなツールバーのUIは無いっぽいです。 ライブラリにはエディタの機能だけがあって、必要なUIは各自で作ってもらうという方針なのかなと思いました。 sandboxからツールバーのコードを拝借してきて設置したところ、無事にプレイグラウンドと同じものが動きました！ Nodeについて Lexicalエディタの中ではすべての要素がNodeという単位で管理されているようです。 プラグインを使ってh1とかリンクとか色々な要素を使うためには、まず使いたい種類のノードを初期設定で指定する必要があるみたい。 ノードの指定を外すと、処理は通るけど機能はしませんでした。 import { HeadingNode, QuoteNode
この記事は React Advent Calendar 2019 の 9日目の記事です。 パンくずリストを ContextAPI で実装したら、使い方の勉強になったので実装方法をまとめました。 Next.js でデモを実装しているので、他の環境で利用する場合は少し置き換えが必要ですが、基本部分は変更せずに再利用可能です。 t-yng/react-breadcrumb-example デモ 目次 パンくずリストコンポーネントの作成 Contextの作成 Providerの作成 Hooks関数の作成 使い方 パンくずリストコンポーネントの作成 コンポーネントの描画イメージです reduce() で渡されたパンくずリストの要素の一覧を セパレーター（>） で結合をしています。 Linkコンポーネントは Next.js 依存なので、ここだけ自分の環境で適宜置き換えてください。 import Rea
How to Fetch and Update Data From Ethereum with React and SWR | Consensys
How to Fetch and Update Data From Ethereum with React and SWR Here's how to configure your dapp's frontend so token balances and fund transfers update in your users' Ethereum wallets. Ethereum allows us to build decentralized applications (dapps). The main difference between a typical application and a dapp is that you don't need to deploy a backend—at least as long as you take advantage of the ot
Used in a webinar at the Auth0 Online Meetup
GitHub - MrBlenny/react-flow-chart: 🌊 A flexible, stateless, declarative flow chart library for react.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Creating a new React application is not a simple task. Not just because you’ll have to work hard, but mainly because you have some key decisions to make that will affect your ability to scale, collaborate, and make this app work with the tools and needs you use today — and in the future. The decision on how to create a new React application need to be made in light of your end goal — are you build
Redux to Apollo: Data Access Patterns | Apollo GraphQL Blog
January 29, 2021Redux to Apollo: Data Access Patterns As part of NerdWallet’s migration from our React-Redux code base to client state management using Apollo, we’ve been exploring how to effectively implement data access patterns, side-effects handling, and other aspects of client state management using GraphQL and Apollo Client. This first post examines how we accomplish effective data access, f
まえおき やりたいことはタイトル通り。まっさらな状態からやっていく。調べてみると意外とまとめてある記事がなかったので、書き留めておく。 正直微妙だなと思う点もあるけど、誰かの参考になれば幸いです。 環境 Docker: 3.3.3 前提条件 Docker のインストール & セットアップ済み プロジェクト・ディレクトリの作成 手順 Dockerfile作成 docker-compose.yml 作成 docker-compose run --rm app sh -c 'npx create-react-app 任意のプロジェクト名 --template typescript && cp -RT 任意のプロジェクト名/. ./ && rm -rf 任意のプロジェクト名' Dockerfile, docker-compose.yml 修正 port の変更 (任意) docker-compos
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React｜todoアプリが開発できて、開発の理解が深まるサイト - Qiita
React hooksの入門(useEffect) - masalibの日記
React useEffectで無限ループが発生するときに確認すること
Data Fetching with React Server Components
Reactでスクロール位置によって要素のスタイルを変える
React: アプリ内のエラーを全部まとめて処理する（react-error-boundary）
useEffectでデータフェッチすると起こる問題
React-Virtualizedでレンダリングを効率化する - Qiita
When to use JSX.Element vs ReactNode vs ReactElement?
React ToDoリストをはじめる - ウェブ開発を学ぶ | MDN
Facebook製エディタLexicalを試してみたよ！（２） 機能追加してみた！
ReactとパンくずリストとContextAPI - Qiita
Chat app with React, Auth0, and Pusher Chatkit
7 Best Ways to Create a New React Application
Docker を使って 0 からReact(TypeScript)の開発環境を構築する
muragoe-makoto.blog.jp
kekkaishi-ichirinka-anime.com
piro-ek0324.hatenablog.com
www.tokyo-zoo.net
forest.watch.impress.co.jp
note.com/witty_orchid105