React18 設計とコードレビューの観点
はじめに 最近チームに React 18 を布教することの多い osuzu です。 普段の業務で、ペアプロ時に設計意図を伝えたり、コードレビューで都度自分の意図を伝えたりしてきました。 今回、これまでのチーム開発の経験やドキュメントに目を通す中で、自分が良いと考えている設計やコードレビューの観点を言語化することが出来てきたので、筆を執ってみました。 この記事はコードレビューの観点をチーム内へ知見共有するために書きましたが、社内に閉じる必要もない内容のため、Zenn でオープンに公開することにしています。 設計部分はプロジェクト（チーム）に依存していることが多く参考にしにくい部分もあるかもしれませんが、この記事がコードレビューや設計ガイドラインのような形で少しでも参考になれば幸いです。 記事の対象外 コードレビューそのものの基準や観点は取り扱いません。下記記事など適宜参考に。 Google
はじめに 現在、フロントエンド開発に使われているライブラリは非常に多く存在している。 代表的にはReact, Vue, Angularが多く使われるライブラリだ。 そのうち圧倒的なマーケットシェアを記録しているのはReactだ。 今日はなぜ多くのWEBアプリがなぜReactを使用して開発するのかについてお話をしようと思う。 Reactとは？ FaceBook(現在：META)が主導して開発したWEBアプリのUIを効果的に構築するため利用するjavascriptベースのライブラリである。 Reactは他のライブラリと一緒に使用することができる効率的なライブラリと言えるものだ。 React自体はフレームワークと話せるrouting, state管理の基本提供を満たしていないためライブラリであるが、Reactの生態系自体はフレームワークであるのだ。 Reactを使用したサンプルコードは以下である
はじめに 前回、TanStack Query（旧React Query）を使ってみたの記事ではデータ取得の方法しか紹介していなかったので、今回は更新処理について紹介させてください。 使用した環境 Node.js 19.1.0 React 18.2.0 @tanstack/react-query 4.293 axios 1.3.6 react-router-dom 6.10.0 express 4.18.2 cors 2.8.5 NeDB 1.8.0 事前準備 前提 前回の記事で実装が最後まで完了していることを前提とします！ サーバー側の準備 リクエストを受けてユーザーを登録するエンドポイントを作成します。 ユーザー情報はDBに保存したいので簡易的なインメモリDBのNeDBをインストールしておきます。 const express = require("express"); const cor
この記事について オープンロジのエンジニアrikuto（@riku929hr）です。 オープンロジは2023年12月で10周年を迎えました🎉 プロダクトはReactの黎明期からReactを利用して動いており、長年プロダクトを支えて来たコードである一方、ライブラリは古いままのものもあり、今のReactに適していないものがあります。 昨年（2023年）、オープンロジのフロントエンド環境にTypeScriptが導入され、環境が良くなってきました。 そしてこれを契機に、特に課題感のあったフォームライブラリの刷新のため、React Hook Formとyupを導入しました。 この記事ではこの2つのライブラリ導入に至るまでの過程を紹介し、変化の激しいフロントエンド環境におけるライブラリ選定について考えていきます[1]。 ライブラリ選定の基準 先に結論を言っちゃいます！ 今回ライブラリ導入にあたって以
At thoughtbot, we rely on Rails to build applications at high velocities. When faced with adding modern client-side interactivity, we may have many forms of progressive enhancement to turn to. In particular, gaining popularity within the team are the trio of companion libraries: Hotwire, Turbo, Stimulus. These frameworks make it easy to add sprinkles of interactivity to HTML and have been a much e
【Rails 7 + React (TypeScript)】読書好きの方向けの引用共有サービス「引用箱」をリリースしました📚 - LEFログ：学習記録ノート
読書好きの方向けの引用共有サービス「引用箱」をリリースしました 引用箱のサムネイル画像 引用箱 QuoteList はじめに LEF（@lef237）と申します。読み方はレフと申します。2022年からフィヨルドブートキャンプという学習コミュニティに入会し、Web開発の基礎的な部分から順番に学習しておりました。 このたび、ずっと開発を続けていたWebアプリをリリースしました。 名前は「引用箱」というサービスです。 「未知の書籍と出会うきっかけとして、既読した人による書籍の引用から、気になる書籍を探したいが、引用が集まっている場所がない」 という問題を解決するために作った、読書が好きな人向けの引用共有サービスです。📚🔍 ユーザーは書籍の引用を記録することができ、Kindleの共有機能とは違って、自分以外の人の引用記録も見ることができる点が特徴です。 前半ではこのサービスの概要や使い方を、後
AngularのプロダクトをReact（Next.js）にリプレイスしました！ - KAKEHASHI Tech Blog
こちらの記事は カケハシ Part1 Advent Calendar 2023 の8日目の記事になります。 こんにちは！ カケハシでMusubi Insightの開発を行っている高田です。 Musubi Insightは、立ち上げ当初よりフロントエンドフレームワークにAngularを採用していましたが、この度、React（Next.js）にリプレイスしました。 今回は振り返りも兼ねてその経緯やリプレイスまでの流れ、リプレイスを通して得られたメリットなどをまとめていきます。 ※技術的な内容はまた別記事にまとめたいと思います。 なぜリプレイスしたのか？ Musubi Insightはカケハシの中でも比較的古いプロダクトで、当時のメンバーの技術スタックやカケハシのメインプロダクトであるMusubiがAngularを採用していたこともあり、Musubi InsightでもAngularが採用されま
レンダーとコミット – React
コンポーネントは、画面上に表示される前に React によってレンダーされる必要があります。このプロセスが踏む段階を理解すると、コードがどのように実行されるのか考える際や、コードの振る舞いを説明する際に役立ちます。 このページで学ぶこと React での「レンダー」の意味 いつ、なぜ React はコンポーネントをレンダーするのか 画面上にコンポーネントが表示されるステップ レンダーしたからといって DOM が更新されるとは限らない理由 コンポーネントが料理人として厨房に立ち、食材を調理して美味しい料理を作っている様子をイメージしてみてください。このシナリオにおいて React はウェイターです。お客様の注文を伝えて、できた料理をお客様に渡します。この UI の「注文」と「提供」のプロセスは、次の 3 つのステップからなります： レンダーのトリガ（お客様の注文を厨房に伝える） コンポーネン
コンポーネント間で state を共有する – React
2 つのコンポーネントの state を常に同時に変更したいという場合があります。これを行うには、両方のコンポーネントから state を削除して最も近い共通の親へ移動し、そこから state を props 経由でコンポーネントへ渡します。これは state のリフトアップ (lifting state up) として知られているものであり、React コードを書く際に行う最も一般的な作業のひとつです。 このページで学ぶこと コンポーネント間で state を共有する方法 制御された (controlled) コンポーネントと非制御 (uncontrolled) コンポーネントとは何か state のリフトアップの例 以下の例では、親の Accordion コンポーネントが 2 つの別々の Panel をレンダーしています。 Accordion Panel Panel 各 Panel コ
きっかけ いつものようにクラスメソッドさんのブログを見ていた時、何気なく執筆者さんのリンクを押下しました。 ↑のページにある、各執筆者様たちのリンクをクリックします。するとこのように投稿数やシェア数と… 投稿した記事の一覧が簡単なプロフィールと共に表示されています。 これを見たワイ。 「かっけぇぇぇぇぇぇぇぇぇぇぇ〜〜〜〜！！自分のポートフォリオでもやりてぇぇぇぇぇぇぇ〜〜〜🤯」 冷静になって仕様を決める 「さてどういう仕様にするか？」を考え始めたところで、自分が技術記事を書いている媒体はZennとQiitaであることを思い出します。 これまでそれぞれへの導線はポートフォリオのトップに置いていました。 が、さっきのクラスメソッドさんのページをヒントにこう思い始めます。 「そもそも、記事の特性によって投稿する媒体を変えているけど、書いてるものは"技術記事"なんだから、プラットフォーム関係な
React Queryのkey管理を簡単に良い感じに行う
概要 react-queryを使っていてqueryKeyの管理をどうしようかと思い、公式のドキュメントでも紹介されていたlukemorales/query-key-factory を使用してみたら使い勝手が良かったので記事を書きました。 なぜReact Queryを使う上でqueryKeyの管理が重要になるか＋ライブラリを使用せずqueryKeyを上手に管理する方法は下記の記事たちがとても参考になりました。 query-key-factoryの概要 Focus on writing and invalidating queries without the hassle of remembering how you've set up a key for a specific query! This lib will take care of the rest. プロジェクトのREADMEの
Reactで学習記録アプリ作ってみた - Qiita
はじめに 僕は現在1ヵ月本気で技術力向上を目指していて、今日はその2日目です。JISOUというサービスのもとコーチングを受けています。 udemyの講座をひとつ完了させたので、今回は簡易的な学習記録アプリを作ってみたので、備忘録のような感じでまとめていきたいと思います。 初投稿の記事 よかったらぜひ読んでみてください！ アプリの機能紹介 初期画面 学習記録の追加後 基本機能 入力中の学習内容と時間の確認 登録ボタンを押すと学習記録を残せる これまでの総学習時間を表示する 特にUIにはこだわりませんでしたが、機能の実装をなるべく早く行えるように頑張りました。 『状態管理はつらいよ』 僕が特に苦戦したところは状態管理です。前回の記事でも状態管理が難しいという話をしたのですが、アウトプットを行う際もやはり強敵でした。 しかし、TODOアプリの開発と似ている側面が多くあったので進めやすかったです！
GitHub - TanStack/form: 🤖 Powerful and type-safe form state management for the web. TS/JS, React Form, Solid Form, Lit Form and Vue Form.
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
GitHub - rexxars/use-hot-module-reload: React hook that triggers a callback after hot-module reloading has been performed (for any module, not just the one it was used in)
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
Laravel+React でWebアプリを構築する [使用技術: Laravel Sail, Laravel Breeze, Inertia, TailwindCss, Vite] - Qiita
Laravel+React でWebアプリを構築する [使用技術: Laravel Sail, Laravel Breeze, Inertia, TailwindCss, Vite]LaravelDockerBreezeReacttailwindcss この記事でやりたいこと 以下の技術を使用して、 Laravel + React でWebアプリを構築していきます。 Laravel Sail によるDocker開発環境の構築 Laravel Breezeスターターキット（Inertiaを使用してフロントエンドにReactを実装） Laravel Breeze の認証機能 TailwindCssを使った装飾 Laravel Vite によるフロントエンドのビルド (手順が多く複雑なので、自分用にメモを残すついでに記事にします...!） 動作環境 - macOS 13.5.2 - PHP 8.
![Laravel+React でWebアプリを構築する [使用技術: Laravel Sail, Laravel Breeze, Inertia, TailwindCss, Vite] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/df49c9ae7a9e4411f01ab1542ec894feeb62576c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9TGFyYXZlbCUyQlJlYWN0JTIwJUUzJTgxJUE3V2ViJUUzJTgyJUEyJUUzJTgzJTk3JUUzJTgzJUFBJUUzJTgyJTkyJUU2JUE3JThCJUU3JUFGJTg5JUUzJTgxJTk5JUUzJTgyJThCJTIwJTVCJUU0JUJEJUJGJUU3JTk0JUE4JUU2JThBJTgwJUU4JUExJTkzJTNBJTIwTGFyYXZlbCUyMFNhaWwlMkMlMjBMYXJhdmVsJTIwQnJlZXplJTJDJTIwSW5lcnRpYSUyQyUyMFRhaWx3aW5kQ3NzJTJDJTIwViVFMiU4MCVBNiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ODVlZDVjZDdmYmE5YmZlMWY1OTczYzY3MTI0MDRkYmI%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwU2hvLXRhcm8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTkwM2NkOTU1ZjJjNWExMjU1MWVmNjI0ZWI4YjVmYTMy%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Da51a537e633316d7b862b7500eabf38c)
yarn add @react-google-maps/apiDeck.glのライブラリについては「deck.gl」から必要なものだけ追加しておきます。 yarn add @deck.gl/google-maps @deck.gl/core @deck.gl/geo-layers @deck.gl/layersサンプルデータを用いたTrips Layerでの移動データの可視化まずはこちらからやっていきます。 今回使うTrips Layerの詳細はこちらのページで確認できます。 可視化するデータについてはGoogleの公式サンプルでも使っているデータ（ニューヨーク市での車両移動データ）を利用します。 それでは実装していきます。 こちらを参考に、まずはGoogle Mapを表示するところまでやってみます（公式のドキュメントページがなくなっている？ので、READMEを見てやってます）。 事前に取
React v18 Automatic batching でハマったこと、リファクタのTips - Goodpatch Tech Blog
Product.div でStrapを開発している、フロントエンドエンジニアのあげです。 Strapは今年、React v17から18へアップデートを行いました。当初の想定ではもう少しスムーズに行く予定でしたが、想定よりハマってしまったので、大変だったポイントとリファクタのTips共有します。 React v18 の主な変更点 Automatic Batchingでハマったところ 🤔 Automatic Batching とは？ 🤯 手続き的なstate更新をしていると意図した挙動にならない React v17 での Receipt コンポーネントのレンダリング回数 React v18 での Receipt コンポーネントのレンダリング回数 💊 どうリファクタしたらいいか そのuseEffect 必要？ その state 必要？ ♻️ リファクタについてのまとめ まとめ React
FlutterとReact Nativeの背景とは？ FlutterとReact Nativeは、現代のクロスプラットフォーム開発の中心的存在となっているツールです。しかし、これらのツールがどのようにして誕生し、それぞれの背後にはどのような哲学や目的があるのでしょうか。 Flutterの起源と目的 FlutterはGoogleが開発し、UIの統一性を求める中で生まれました。Dartという言語をベースにしており、パフォーマンスと表現力を追求しています。特に、アニメーションや動的なUIに強いのが特徴です。 React Nativeの歴史と背後にある哲学 React NativeはFacebookによって開発されました。ReactというWebフレームワークの成功を受けて、モバイルアプリにもその哲学を適用しようと誕生したのがReact Nativeです。一度のコーディングでiOSとAndroidの
window.history.pushState(null, '', window.location.href); これをページ読み込み時に実行すると、履歴の１つ前が自分のページになるので無限に戻れなくなる。javascriptの構文なのでReactに限らずどんなフレームワークでも使えます。 navigateのオプションを使う
コミュニティサポート 困ったときにコミュニティからサポートを受けたいですが、Discordはないようなので、コミュニティからサポートを受けられる場所が分からなかったです。 3. React Email とは あらためて、React Email とは、メールテンプレートを React コンポーネントで記述できるパッケージです。 React Emailが解決する課題 Web の HTML と比較日、メールの HTML は、CSS のサポートが悪く、レイアウトが崩れやすいです。また、メールの HTML は、メールクライアントによって、表示が異なる事もあります。メールの HTML を記述するのは、開発者にとって、大変な作業です。React Email は現在ベータバージョンですが、React Email を利用することで、様々なメールクライアントに対応したメールを簡単に作成できます。 対応メールク
はじめに 現在Shopifyのサイト制作を行なっているのですが、スキルアップを狙ってReactを学習中です。 習得の過程で「学習記録アプリ」を作成したので、その経験談を記載します！ 今回作成したもの 学習記録アプリの内容 inputタグを2つ配置（学習内容、学習時間を入力） inputタグ2つのうち1つでも未記入だった場合、登録ボタンが押せない仕様 inputタグに学習内容と学習時間を入力して登録ボタンを押すと、学習記録のリストが追加される 記録された学習時間の合計時間をreduce関数で算出 元々サイト制作でちょっとしたJavascriptの記述は行なっていたことと、Udemyの講座でもTodoアプリを作成した経験があったので、こちらのwebアプリの開発は半日程度で完成できました！ 開発期間としては自分ではかなり早くできたと思いますが、それでも新しく触るReact言語は難しい… だけどそ
React App
Web site created using create-react-app
組み込みの React フック – React
フックを用いると、コンポーネントから様々な React の機能を使えるようになります。組み込みのフックを使うこともできますし、組み合わせて自分だけのものを作ることもできます。このページでは、React に組み込まれたすべてのフックを説明します。 state フック state を使うと、ユーザの入力などの情報をコンポーネントに「記憶」させることができます。例えば、フォームコンポーネントは入力された文字を保持し、画像ギャラリのコンポーネントは選択された画像を保持できます。 コンポーネントに state を追加するには、次のフックのいずれかを使います： useState は直接的に更新できる state 変数を定義します。 useReducer は、リデューサ関数内に書いたロジックを用いて更新を行う state 変数を定義します。
Cognitoを検討した理由 Googleなどのシングルサインオンを検討していた RDSをできるなら使いたくなかった ワンタイムパスワードなど丸投げしたかった 使わなくなった理由 ロックインされる ユーザーをRDSなどに移したいときに移すのがめんどくさい CognitoUIがダサいし意外と使うのがめんどくさい シングルサインオンのアクセストークンをそのまま使う方が楽 CLoudFormationで構築 下のテンプレートのcallbackとlogoutを正しいのに置き換えてデプロイします。 AWSTemplateFormatVersion: '2010-09-09' Parameters: ProjectName: Description: 'Name of the project' Type: String Default: 'myproject' Env: Description: 'E
![[React]認証でCognitoを辞めた話 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1d1a5c5a01129c01bfa8a6999d4874ae2e814f56/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCUmVhY3QlNUQlRTglQUElOEQlRTglQTglQkMlRTMlODElQTdDb2duaXRvJUUzJTgyJTkyJUU4JUJFJTlFJUUzJTgyJTgxJUUzJTgxJTlGJUU4JUE5JUIxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02MTM4YWU5NjdmNWYzMGY1ZjFlODk2OWFhYWM1MzFiOA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQweXVraWFwcm9ncmFtbWluZyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTMyJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MmRkNWRkNTgwYzlkZjhiZWI0NzY4YmEyY2MxYzMzYTM%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dcc0061517bdcad6d89bbcfe9e6966378)
This Week In React #176: useActionState, React Compiler, Million Lint, TanStack, Generative UI…
React Core PR — New useActionState hook It turns out the useFormState hook was confusing, and not even meant to be solely used in forms. The React team is addressing this by introducing a new React core hook to replace it: Renames useFormState to useActionStateAdds a pending state to the returned tupleMoves the hook to the react packageMoving it from react-dom to react also means that now, other r
GitHub - ealush/emoji-picker-react: The most popular React Emoji Picker
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の次期Version Upについての情報が出ましたね！ 簡単にまとめたいと思います！ React Compiler ( React Forget ) いわゆる"Memoization"に関して、useMemo、useCallBackそしてmemoを書かずとも、React Compilerが同等の処理をJavaScriptにコンパイルしてくるとのことです！ Our vision is for React to automatically re-render just the right parts of the UI when state changes, without compromising on React’s core mental model. とても心強いですね。 もちろん、"Memoization"のみが不要なRe-renderに影響を与えるわけではないですが、ここ
React App
Web site created using create-react-app
anyとは？ 今回はsupabaseを初めて利用したため、参考としていた動画のコードをそのまま記述していました。 そのため<any>もそのまま記述していたのですが、これはTypescriptでしか使用できないそうです。 <any>についてchatGPTに聞いてみました。 useState<any>()は、ReactのuseStateフックを使う際にTypeScriptのジェネリクス構文を使用している例です。ここでの<any>は、このステートがどのような型の値も保持できることを示しています。TypeScriptのany型は、あらゆる型の値を許容する特別な型であり、型チェックを事実上無効にします。 useState<any>()とすることで、そのステートにどのような型の値もセットできるようになります。これは柔軟性が高い反面、型安全性が低下するため、必要な場合にのみany型を使用し、可能な限り具
レガシーに向き合う - Reactのクラスコンポーネントを置き換える前にやるべきこと - Sansan Tech Blog
こんにちは。Eightでエンジニアをしている藤野です。 Sansan Tech Blogに最後に記事を書いたのが2020年12月なので、約3年ぶりの投稿になります。時の流れって恐ろしい。 今回は、Reactのクラスコンポーネント(Class Component)を関数コンポーネント(Function Component)へ置き換える前にやるべきことについて話していこうと思います。 背景 EightのWeb版はReact + TypeScriptで書かれており、2024年3月で12年目となるプロジェクトです。日々改善はしていますが、長く運用してきただけあってフロントエンドのコードでも多少レガシーな部分が残っています。その中で挙げられる課題の一つとして、クラスコンポーネントがあります。 Reactは、初期段階ではコンポーネントは主にJavaScriptのクラスを利用したコンポーネントで記述され
React Conf 2024
AboutJoin us for two days of insightful discussions with people who build and love React Join Meta, Callstack, and the React team for the 7th React Conf as we celebrate over 10 years of React. Hear about the vision for React's future from the multi-company team that builds React, some announcements, and from some of your favorite community members. Enjoy time with people who love React. Learn from
経緯 今回、個人開発したBookmark-BoardというWEBアプリのChrome拡張機能を開発しました。 このChrome拡張ではFirebase Auth（Google認証）で認証を行っているのですが、その際に色々とつまづいた点があったため、忘備録として登録から公開までの一連の機能開発の手順を整理してみました。 前提 以下の条件を前提に進めます。 既にFirebaseのプロジェクトを作成している ReactおよびTypescriptを使用する 今回はサンプルとして最低限の認証機能を持ったChrome拡張アプリを作成します。 準備 Chrome Web Store developerへの登録 Chrome拡張を開発するためにはChrome Web Store developerに登録します。 以降、Developer Dashboardからアプリのアップロード等行うことになります。 C
Jest： node.jsでテストを実行する 以下に該当するファイルをtestファイルと認識する .spec.js .test.js __test__ディレクトリ配下のjsファイル getByRoleのnameオプションの使い方 主に以下の値をマッチさせられる labelのテキスト（input要素） ※label自身ではなく、そのlabelに紐づいたinput要素を取得する aria-labelの値 text content ※getByTextでも対応可能だが、getByRoleの方がベターな方法であるとのこと aria-labelとtext content双方の指定がある場合、aria-labelでしかマッチできなくなるっぽい
Reactで使用するJSXの基本をわかりやすく解説
従来、開発者はマークアップとロジックを別々のファイルに分け、構造にはHTML、スタイリングにはCSSを使用し、インタラクションやデータ操作にはJavaScriptを記述してきました。 しかし、これらの技術を組み合わせることで、開発プロセスを簡素化し、複雑なユーザーインターフェースを簡単に構築できる方法があるとしたらどうでしょうか。そこで登場するのがJSXです。 この記事では、JSXとは何か、どのように機能するのか、そしてなぜウェブ開発において、これが動的なユーザーインターフェースを構築するために重要なのかを学びます。 この革命的な技術について、詳しく見てみましょう。 JSXとは JSX（JavaScript XML）は、JavaScriptの構文拡張で、JavaScriptファイル内にHTMLのようなコードを記述できるようにするものです。Meta（旧Facebook）によって開発されました
はじめに いままで弱小バックエンドエンジニアとしてJavaを使ってお仕事をしてきたのですが、フロントエンドの開発に携わる機会が訪れました。 Reactで開発するということで、お勉強がてら簡単なWEBアプリを作ろうとしたら、様々な技術スタックのワードが出るわ出るわ・・・ それらが何なのか調べたので、自分用に参考リンク集を残しておきます。 外観 Node.jsとTypeScriptとnvmとnpmとReactとNext.js Node.jsについて 概要 OS上でJavaScriptを動かすためのJavaScript実行環境のこと。 JavaScriptエンジンとして、V8エンジンを使用している。 参考：概要理解 参考：Node.jsの歴史 こぼれ話：Deno 2020年にDenoという対抗馬が登場している模様。Node.jsのシェアを奪えるのかどうか。 Node.jsの製作者が、Node.j
The simplest way to add CSS to React. No build configuration required. Inputimport { styled } from "restyle"; const Button = styled("button", { padding: "0.5rem 1rem", borderRadius: "4px", backgroundColor: "blue", color: "white", }); export default function Page() { return ( <Button css={{ paddingInline: "0.8rem", backgroundColor: "pink", }} onClick={() => alert()} > Click me! </Button> ); } Outpu
If you're wondering what the React compiler is, I recommend reading our recent update post for some background. This post is for anyone curious about the compiler theory behind it. Don't feel pressured to understand everything in this post in order to use the compiler. Memo the props # In React, a component wrapped in React.memo only re-renders if its props change. const Greeting = memo(function G
解決方法 Reactの公式ブログ、新しい JSX トランスフォーム内に解決方法が含まれていた。 ざっくりとまとめると2020年末にリリースされたReact v17にて変更が入ったためとのこと。 以下引用: eslint-plugin-react を使用している場合、react/jsx-uses-react と react/react-in-jsx-scope のルールは不要になりますので、無効にするか削除することができます。 ルールの無効、削除で解決できそうなので、eslintrcファイルのルールを上書きする形で対応する。 （以下はJSON形式で作成した.eslintrcの例）
GitHub - chengsokdara/use-whisper: React hook for OpenAI Whisper with speech recorder, real-time transcription, and silence removal built-in
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 is one of the most popular frontend JavaScript frameworks. We just posted a course on the freeCodeCamp.org YouTube channel that will teach you how to build twenty-five different projects using React. Each project is designed to challenge and enhance your understanding of React's capabilities. Sangam Mukherjee developed this course. Why React?React stands out in the web development world for
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜReactがフロントエンド開発で多く使われているのか？ - Qiita
TanStack Query（旧React Query）でデータ更新を行う - Qiita
変化の激しいReactへのライブラリ導入で考えるべきこと
Introducing Superglue: React ❤️ Rails
Reactで作ったレジュメにRechartsを組み込んでスタイリッシュにデータを魅せる - Qiita
Reactアプリ上にDeck.gl×Google Mapでデータを可視化してみた｜k.toda
どちらを選ぶべきか？FlutterとReact Nativeの使い分け | 株式会社一創
Reactでブラウザバックを無効化にするシンプルな２つの方法 - Qiita
React Email x Resend で次世代メールサービスを体験
Reactで学習記録アプリを開発 - Qiita
[React]認証でCognitoを辞めた話 - Qiita
React V19に追加される機能（予定） - Qiita
Reactでsupabaseのデータを引用する際に画面が真っ白に... - Qiita
Chrome拡張+React+Firebaseで認証機能を実装する
React Testing LibraryとJestについて学んだことをメモ
Node.jsとnvmとnpmとTypeScriptとReactとNext.jsってどういう関係なのか調べた
Restyle - Zero Config CSS for React
Type system of the React compiler
ESLintが出力する「React' must be in scope when using JSX」に対応する
Master React by Building 25 Projects