Get started with Apollo Client
Hello! 👋 This short tutorial gets you up and running with Apollo Client. Step 1: SetupTo start this tutorial, do one of the following: Create a new React project locally with Vite, orCreate a new React sandbox on CodeSandbox.Step 2: Install dependenciesApplications that use Apollo Client require two top-level dependencies: @apollo/client: This single package contains virtually everything you need
React hooksを基礎から理解する (useState編) - Qiita
React hooksとは React 16.8 で追加された新機能です。 クラスを書かなくても、 stateなどのReactの機能を、関数コンポーネントでシンプルに扱えるようになりました。 React hooksを基礎から理解する (useState編) 今ここ React hooksを基礎から理解する (useEffect編) React hooksを基礎から理解する (useContext編) React hooksを基礎から理解する (useReducer編) React hooksを基礎から理解する (useCallback編) React hooksを基礎から理解する (useMemo編) React hooksを基礎から理解する (useRef編) useStateとは useState()は、関数コンポーネントでstateを管理（stateの保持と更新）するためのReac
Reactで複数のプロジェクトで共通のコンポーネントを扱う方法[create-react-app] - Qiita
TL;DR ReactでAtomicDesignなどを採用していて、コンポーネントを再利用性を加味しながら作成していて、複数のプロジェクトで共通のコンポーネントを使いたい場合がある。（e.g. User用とAdmin用を別のプロジェクトとして作成し、共通のコンポーネントを扱う、等） create-react-appでプロジェクトを始めた場合はデフォルトの設定では難しいため、不可逆な操作であるyarn eject (or npm run eject)を行い、手動で設定を行うことで実現した。 Pros & Cons Pros create-react-appの恩恵を受けれる(簡単に構築できる) ホットリロードしてくれるので、共通コンポーネントの修正などが爆速でできる Cons monorepoな構成になるため、はじめてコードを見た人にとっては威圧的になる 複数プロジェクトを同一のpackage
![Reactで複数のプロジェクトで共通のコンポーネントを扱う方法[create-react-app] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7dabbe112dae759f342f56aacbd38286ab15847d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9UmVhY3QlRTMlODElQTclRTglQTQlODclRTYlOTUlQjAlRTMlODElQUUlRTMlODMlOTclRTMlODMlQUQlRTMlODIlQjglRTMlODIlQTclRTMlODIlQUYlRTMlODMlODglRTMlODElQTclRTUlODUlQjElRTklODAlOUElRTMlODElQUUlRTMlODIlQjMlRTMlODMlQjMlRTMlODMlOUQlRTMlODMlQkMlRTMlODMlOEQlRTMlODMlQjMlRTMlODMlODglRTMlODIlOTIlRTYlODklQjElRTMlODElODYlRTYlOTYlQjklRTYlQjMlOTUlNUJjcmVhdGUtcmVhY3QtYXBwJTVEJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz02ZGMwNDYwZTZhNzlmZDFiYTlkOTAzNmZlNTNjYWNjZA%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBjb2ZmZWVtazImdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTgzYmY1YTJlMDhmN2Q5MGExOWU1N2U3NmNjZDhmMGUy%26blend-x%3D120%26blend-y%3D500%26blend-mode%3Dnormal%26s%3D7f9780e564fe2a99765066fa84db2070)
React 本体のみで Redux フレンドリーな非同期処理を実現するアイデア | Recruit Tech Blog
こんにちは。2019 年 10 月に join した kazuma1989 です。スタディサプリENGLISH の Web 版を担当するフロントエンドデベロッパーです。 今回は、React と Redux を用いたアーキテクチャーで問題になる 非同期処理 を扱うアイデアの一つをご紹介します。Redux フレンドリー と題したように、Redux でなくとも（useReducer や unstated-next でも）適用することができます。 アイデアを EffectComponent と名付けました。そもそも Redux において非同期処理の何が問題なのか、そして EffectComponent とは何か説明します。React Hooks と Redux についてある程度知っていることを前提とします。1)言語は TypeScript です。がんばらないで始める のがおすすめです Redux
React Starter KitにみるWebフロントエンドに求められる機能と実装 - LINE ENGINEERING
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog 初めまして、IT戦略3チームでUIUXデザインと社内プロジェクトのTech Leadを担当している高村といいます。この記事では、React Starter Kitという汎用的なWebプロジェクトテンプレートの実装を参考にしながら、改めて、なぜWebフロントエンドは複雑なのか、その解決方法は何かを振り返ってみたいと思います。この記事をきっかけとして、実際に現場でツール選定を行うフロントエンド開発者の方だけでなく、普段「フロントエンドには時間をかけたくない」と思っているサーバサイド開発者やWebディレクターの方たちに、「だからフロントエンドの課題は収束しにくいんだな」「フロントエンドといっても範囲は広いから、目的やユースケースを絞
React + Redux - User Registration and Login Tutorial & Example | Jason Watmore's Blog
React + Redux - User Registration and Login Tutorial & Example Tutorial built with React 16.13 Other versions available: React: React 18 + Redux, React 17 + Recoil, React 16 Hooks + Redux Next.js: Next.js 13 (App Router) + MongoDB, Next.js 13 (Pages Router) + MongoDB, Next.js 13 (Pages Router) + MySQL, Next.js 11 Angular: Angular 15/16, 14, 10, 9, 8, 7, 6, 2/5 Vue: Vue 3 + Pinia, Vue 2 + Vuex Angu
React + Reduxアプリケーションプロジェクトのテンプレートを作る ― その1: Node.jsとYarnとBabelとwebpack | To Be Decided
昔、Dojo Toolkitを使ってFlashなUIをJavaScriptに書き換えた時以来、仕事でWeb UIを触ることはなかったんだけど、最近になってWeb UIを書かなければいけなくなるような気がして再学習を始めた。 題材はReact (とRedux)。 今一番人気のフロントエンドフレームワークで、昔触ったこともあるので。 前回の記事でReactが生まれた経緯を学んだので、今回から実習に入る。 (2018/11/21更新) プロジェクト作成 ちょっとCreate React Appを触ってみたけど使わないことにした。 すぐ開発始められるのはよかったんだけど、裏でなにが起こっているかわからな過ぎて肌に合わないし、使うライブラリが結構固定されちゃいそうだったし、トラブルシュート(特にライブラリのバグを踏んだ時)が大変そうだったので。 代わりに、公式で紹介されているブログ記事であるCrea
connected-react-routerを使ってhandlerでルーティングをしよう！ - Qiita
Reactjsでの開発では、 reactとreduxを一緒に使うことが多いと思います。 routingは、react-router-domというライブラリを使うのが簡単ですが、一緒に connected-react-routerで、routingも一緒にstoreで管理するのがいいと思います。 react-router-reduxは、公式でdeprecatedになっているのでこちらを使うのが良いでしょう。 redux-thunkも必要みたいです。 link以外の画面推移方法が英語しかなかったので、記録のために pushを使って、onClickなどのhandlerでroutingをできるようにします。 import React from 'react'; import ReactDOM from 'react-dom'; import { createStore, applyMiddlewa
ささっと学ぶReact Router v4 – the2g
記事としては旬な時期をとっくにすぎていますが、ブログ内にReactやReduxのチュートリアルがあるのにReact Rotuerの説明がないので、必要そうなものだけ書いときます。 React Routerとは Reactでアプリケーションを作成する上で必須とも言えるのがReact Routerです。React Routerは名前の通り、Reactでのルーティングを担当するライブラリです。 大雑把に言えば、URLの変化に合わせて何か処理をするにはReact Routerが必要なのです。 インストール React Routerは3つのパッケージがあります。 react-router react-router-dom react-router-native ブラウザで使う場合は、react-router-domを使います。 yarn add react-router-dom ルーティング導入 R
ComponentとContainerについて - Qiita
はじめに react-reduxでコンポーネントとコンテナーの扱いにどういう違いがあるのかがよくわかっていなかったので、今回それぞれの違いについてまとめることで、react-reduxを使いこなせるようにしたいと思います。 今回以下を参考にしました。 https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 Presentational Component 参考記事でreduxの作者であるDan abramobはコンポーネントを Presentational Component Container Component の２つに分類しました 一般に日本語の記事では１がコンポーネント、2がコンテナーと呼ばれているかと思います この２つについてそれぞれ解説していきます Presentational Compone
[redux] Presentational / Container componentの分離 - react-redux.connect()のつかいかた - Qiita
ReduxをReactと同時につかうときは，コンポーネントをPresentational componentとContainer componentに分離することがプラクティスの一つらしいです． このための道具としてconnect()関数がreact-reduxパッケージで提供されています． http://redux.js.org/docs/basics/UsageWithReact.html に詳しいです． 表示のみに専念するPresentational componentとロジックのみに専念するContainer componentを分離することで，コンポーネントの再利用性を高めることができる，らしいです． 自分の勉強のために自分なりの要点だけ以下にまとめてみました． ES6記法を使っています． Presentational component Presentational compo
![[redux] Presentational / Container componentの分離 - react-redux.connect()のつかいかた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/483641cc8697c6eb8519be041379b3cb2816fc89/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNjUxNDElMkZwcm9maWxlLWltYWdlcyUyRjE2MjkyMDc0NTY_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZDNhY2FiZjE4NDc3YjE0OTQyYmY1MGNmYmMyNmYxZWM%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Da7e5e63da42fcab113b580bb5ac2d875%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCcmVkdXglNUQlMjBQcmVzZW50YXRpb25hbCUyMCUyRiUyMENvbnRhaW5lciUyMGNvbXBvbmVudCVFMyU4MSVBRSVFNSU4OCU4NiVFOSU5QiVBMiUyMC0lMjByZWFjdC1yZWR1eC5jb25uZWN0JTI4JTI5JUUzJTgxJUFFJUUzJTgxJUE0JUUzJTgxJThCJUUzJTgxJTg0JUUzJTgxJThCJUUzJTgxJTlGJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MTMwZDVlYWVhYjk2YTRmMzdkZjZkYjE3ZTVlYjYwYmI%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB3aGl0cGh4JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9OWJiOTVhMzNkZjc4Y2E1YmM5ZWEyOTBmZmYwNDA1ZjI%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D3374002715d382be9c773665eea06da9)
Redux入門 6日目 ReduxとReactの連携(公式ドキュメント和訳) - Qiita
前回 Redux入門 5日目 Reduxの基本・Data Flow ReduxのアプリケーションはReact,Angular,Ember,jQuery, vanilla JavaScriptのいずれで作成することができます。 ReactはUIをstateの関数として扱うので特に相性がいいです。 ここからは、Reactを使ってtodoアプリに連携していきます。 Installing React Redux ReactとReduxを連携するモジュールはReduxに含まれていないので、別途インストールする必要があります。 Container and Presentational Components Reactのコンポーネントの設計として、一番上のレイヤーのコンポーネントはコンテナとしてReduxに関与し、下位のレイヤーのコンポーネントはReduxとは関与せずに、データはprop経由で受け取るよ
reduxを試してみた(5日目) - ajaxを使ってUIを構築する(reduxにおける非同期の制御) - Qiita
このページは作業ログです。やったことをつらつら書くだけなのでまとめません。あしからず。 対象読者 主に自分 今日のゴール jQueryではない方法を使ってajaxを使えるようになっていること Reactのコンポーネントを非同期リクエストで構築できるようになっていること モチベーション React.jsはビューのみをサポートしたライブラリ。サーバーとの通信部分はなんも用意していない チュートリアルではjQueryを使ってサーバーと通信してた。でもjQueryはその他もろもろいろいろ機能がある。Virtual DOMとの相性がありそうなので、jQuery自体導入せずに済ませられるのならそうしたい。 調べてみた A Comparison of JavaScript HTTP Libraries for the Browserという記事によると、Ajaxリクエストを実現するには下記の方法がある。
Reactで複数のinputを扱うフォームを実装する - Qiita
Reactでフォームを実装するのはちょっと癖があります。 まずReactのフォームにはcontrolled formとuncontrolled formという２つのパターンがあることを先に理解しておくと良いかもしれません。参考：React ドキュメント 私はまだ理解が及んでいないところも多々ありますが、Reactの実装例が少ないので少しでも刺激になればという感じで記事を公開したいと思います。 （もっと楽なやり方とかこうした方がいいといった指摘があると幸いです。） 今回の実装にあたり色々ググったのですが、inputが一つしかない実装例ばかりで結構しんどかったです。。。 やること 複数のinputを扱うフォームの実装 やらないこと フォームの送信・・・きちんとデータが取得できているかの確認のみ行います。 bindを用いた実装・・・bindがよくわかっていないので、、、 複数のinputを扱う実
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Nativeで複数のアプリを共存させられるか試してみた | PLAID engineer blog
apollo-cra-authenticated/server at master · cezarneaga/apollo-cra-authenticated
React Apollo Hooks を使ってログイン機能を作った - Qiita
Reactでvalidationがリアクティブに実行されるフォームを実装する方法
react-validation
react-inputs-validation