チュートリアル: Yjs, valtio, React で実現する共同編集アプリケーション - ROUTE06 Tech Blog
Yjsは、リアルタイム共同編集を実現するためのアルゴリズムとデータ構造を提供するフレームワークです。Notion や Figma のように、1 つのコンテンツを複数人で同時に更新する体験を提供することができます。 Y.Map, Y.Array, Y.Text といった共有データ型を提供し、それらは JavaScript の Map や Array のように利用できます。さらにそのデータに対する変更は他のクライアントに自動的に配布・同期されます。 Yjs は Conflict-free Replicated Data Types (CRDT) と呼ばれるアルゴリズムの実装であり、複数人が同時にデータを操作してもコンフリクトが発生せず、最終的に全てのクライアントが同じ状態に到達するように設計されています。 クイックスタート Y.Map がクライアント間で自動的に同期されるコード例を見てみましょ
Reactベストプラクティス: react-hooks/exhaustive-depsのエラーを0にする - Hello Tech
javascripter です。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 今回は、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、社内で継続的に技術Tipsやガイドラインの整備・蓄積を行っています。 チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 新メンバーのオンボーディング支援 今回紹介するドキュメント 今回は、その中から「reac
はじめに App Router はこれまでの React や Pages Router による書き方と大きく異なります。これは、React Server Components（RSC） というアーキテクチャが導入され、開発の考え方が大きく変化したからです。そのため、App Router を理解するためには RSC の理解が必要になります。 しかし、私は RSC の理解に苦戦しました。 この記事は、そんな私が RSC の理解を深めるために様々な記事から学んだ内容を言語化したものです。 まず初めに、CSR や SSR といったこれまでのレンダリング手法について復習し、これらが抱える問題を確認します。その後、その問題を解決する RSC が何者なのか？を理解します。 CSR の復習 React では CSR 戦略が用いられてきました。 CSR では、クライアントが受け取るのは次のような中身のない空
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
javascripter です。ハローでは、初期メンバーとしてプロダクトのローンチ前からAutoReserve の開発に関わっています。 前回の記事に引き続き、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 前回の記事については、こちらを参照下さい。 Reactベストプラクティス: react-hooks/exhaustive-de
「State of JavaScript 2023」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、2万3500人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者2万3540人が回答したアンケートの結果をまとめた「State of JavaScript 2023」が公開されました。 回答者の国別分布を見ると米国が16％、フランスが7％、ドイツも7％、イギリス（UK）が5％、ポーランドが4％、ロシアが3％、カナダが3％などで、日本は2％（回答者280人）でした。 ここでは発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンドフレームワークはReactが1位、2位にVue.js フロントエンドフレームワークの利用率ランキングはReactで、2位以下を引き離して8年連続1位、しかも利用率を伸ばしています。2位にはAngularを抜いてVue.jsが初めて入り、3位は昨年よりランクも利用率も落としたAngularとなりました
はじめに 以下のツイートが発端でした。 投稿者は、React Query のメインコントリビュータの tkdodo さんです。 React 19 に含まれる変更にある異変を気づきました。 変更は以下に該当します react: Don’t prerender siblings of suspended component #26380 リリースノートに隅っこにありました。 この変更は RFC なしで含まれました。該当 PR は以下 What React では、 Suspense を使って、非同期処理を行うコンポーネントやReact.lazyによってコンポーネントの遅延ロード時に、読み込みを完了するまでフォールバックを表示させることができます。 以下のような実装があるとします。 import { lazy, Suspense, useState } from "react"; const Av
Modern Emacs Typescript Web (React) Config with lsp-mode, treesitter, tailwind, TSX & more - Ovi Stoica
Table of Contents Introduction Part 1: Treesitter for Typescript & TSX LSP Support Completion setup Linter setup LSP Setup Eslint (Optional) Tailwind LSP Server LSP Performance Emacs LSP Booster Structural editing Formatting buffers with Prettier Other resources Conclusion Introduction I've worked within the JS ecosystem for the past 8 years using editors like Webstorm and VSCode, I started using
Reactテスト駆動開発に一度挫折した人が、生成AIの力を借りて再挑戦する話 - Insight Edge Tech Blog
はじめに Insight EdgeのLead Engineerの日下です。 弊社ではフロントエンドのスクラッチ開発にReactを採用することが多いのですが、フロントエンドの保守性はしばしば課題となっています。 というのも、要求仕様が曖昧なPoC（Proof of Concept）の段階からMVP（Minimum Viable Product）として開発を進めることも多く、 ビジネス側ユーザの意見にも左右されながらアプリを改善していくため、画面のレイアウトやデザイン、画面遷移の変更が多発するためです。 こうした状況の中でスピードと品質を両立するためには良質なテストコードが不可欠なのはもちろん、 プロダクトコードとテストコードの双方とも、変化に対応しやすく作る必要があります。 過去にテスト駆動開発を挫折した要因 実は、筆者は過去にReactのテスト駆動開発の実践、および社内普及活動に挑戦したこ
こんにちは、エンジニアです。 本記事ではuseMediaQueryを使うべきではない理由を説明します。 useMediaQueryとは window.matchMediaの判定結果を取得するカスタムフックを指します。 window.matchMediaはCSSでできるメディアクエリの判定をJavaScriptでも可能にするブラウザAPIです。それをReact Hooksと組み合わせることで、宣言的に判定を行えるようなカスタムフックとなります。 過去にuseSyncExternalStoreを使って実装する記事を書いたので参考にしてみてください。 上の記事ではuseSyncExternalStoreの使い道を説明するのが目的だったのですが、Reactのフックとしてメディアクエリを使える、使っても良いと捉えられてしまったようで、題材選びを少し反省しています(？) 以下はユーティリティ系ライブラ
この記事は、React 19 RCにおけるSuspenseの問題について、なるべくフラットな立場から現状を解説することを目的としたものです。 この問題の経緯については既に先行の記事が存在します。本記事は、この記事とは別の切り口でまとめ、現在の動向を追加したものとなるよう構成しました。 要約 React公式が正式リリースまでに対応してくれるようなので、大人しく待ちましょう。 概要 以下のように<Suspense>で包まれた、2つの兄弟コンポーネント<Foo>と<Bar>があるとします。 プリレンダリングを走らせる際、React 18では<Foo>と<Bar>は並列にレンダリングされましたが、React 19 RCでは直列にレンダリングされるという変更が適用されました。 なぜ変更を適用したか 直列にレンダリングすることで得られるメリットがあります。それは、レンダリングの途中経過をスタックに保存
【入門】Reactとは？特徴やインストール方法をわかりやすく解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Technology部の山岡です。この記事では、Webアプリケーション開発の際によく用いられるReactについて解説します。 Reactとは何なのか。どんな特徴があるのか。どうやって勉強すればいいのか。まだアプリケーションの開発に馴染みのない方や、プログラムを勉強したての方にもわかりやすくなるよう、適宜用語を噛み砕いて説明していきますので、ぜひご覧になってください。 Reactとは、Webサイトやアプリケーションの開発の際に用いられる、JavaScriptライブラリの一つです。Facebook社が開発し、2013年にオープンソース化されました。 Reactは、JavaScriptライブラリの中でもSPA（シングルページアプリケーション）の開発に特化しており、可読性やパフォーマンスの高さが評価されています。 Reactの特徴として、以下3つが挙げられます。 宣言的なソースコード コンポーネン
React Internals Explorer to easily inspect React internals, created by JSer.
React Router v6のルーティング方法を解説 - createBrowserRouterとData APIsの活用法 | DevelopersIO
こんにちは、戸田です。 今回は React Router v6.4 以降を使用する際にどのルーティング方法を使えばいいのか自分の言葉でブログにまとめました。 まず結論 シンプルなルーティングのBrowserRouterかcreateBrowserRouterで迷ったら基本的にcreateBrowserRouterを使いましょう！ 以下がサンプルコードです。 import React from 'react'; import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom'; const Parent = () => { return ( <div> <h1>Parent</h1> <Outlet /> </div> ) } const App = () => { const router = cr
GitHub - onlook-dev/studio: The power of Webflow for your React app
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 - pdfslick/pdfslick: View and Interact with PDFs in React SolidJS, Svelte and JavaScript apps
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
Today we were joined by some British Highschoolers to get their take on some of the internet's most popular British Food Memes! Check out our latest JOLLY merch at http://getjolly.store Click here to buy Josh's bestselling autobiography! https://amzn.eu/d/73xtwcy Hit join and become a Jollybean member to join us in our members-only livestreams: https://www.youtube.com/jolly/join Special thanks
はじめに こんにちは。ここ最近、React v19が注目を集めているように感じます。 最近ではついにReact v19のRCバージョンもリリースされました。 Just published React 19.0.0-rc.0. This is the exact build we'll release as 19.0, unless an issue is reported that requires a breaking change. Thank you to everyone who helped us get the release into shape!— Andrew Clark (@acdlite) 2024年6月3日 そう遠くないうちにReact v19がリリースされる可能性もありそうです。そこで、React v19のリリースによる周辺ライブラリへの影響などについて、弊社で採
React 19 and Suspense - A Drama in 3 Acts16.06.2024 — ReactJs, React Query, Suspense, JavaScript — 7 min read That was quite a roller-coaster last week 🎢. Some things unravelled, some things went down, and in the middle of it: React Summit, the biggest React conference in the world. Let me try to break down what happened, in hopefully the right order, and what we can all learn from it. To do that
We’re excited to announce that we are partnering with the React team to build and maintain the react-codemod repo, offering open-source codemods to enhance the migration experience for React 19 and beyond. React 19 MigrationTo kick things off, we've released 10 new codemods and recipes to assist with upgrading to React 19. Upgrade your React project with the following command: For more details, re
GitHub - jsdotlua/react-lua: A comprehensive, but not exhaustive, translation of upstream ReactJS 17.x into Lua.
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
6月18日、Codeminer42が「How React 19 (Almost) Made the Internet Slower」と題した記事を公開した。この記事では、React 19の新しい変更がどのようにしてインターネットの速度を遅くする可能性があったかについて詳しく紹介されている。 React 19が今年の初めに発表され、新機能や開発者体験（DX）の向上が話題となった。しかし、先週、React 19に加えられたある変更が多くのウェブサイトのパフォーマンスを大幅に低下させる可能性があることが明らかになった。 この問題は、Dominik（TkDodo）のツイートから始まった。 https://x.com/TkDodo/status/1800501040766144676 React 19では、同じSuspenseバウンダリ内の兄弟要素の並列レンダリングが無効化された。これにより、兄弟要
GitHub - squaredtechnologies/thread: An AI-powered Python notebook built in React — generate and edit code cells, automatically fix errors, and chat with your code
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
オブジェクト指向を取り入れると 『可読性』『拡張性』『汎用性(=ひいては保守性)』 の三大柱(自称)が担保され、現場でドヤれる メソッド名やメンバ変数名が1~2単語で済む #ポリモーフィズム 主語.動詞(補語 | 目的語) S+V+C、S+V+O の形になる 例1: $(A).appendTo(B) 例2: comment.createdAt: Date 例3: comment.createdBy: User 例4: comment.getCreatedBy(): User 例5: user.medias[n].comments.create({ title, body }: Comment) 例6: user.medias[n].comments.fetch(): Users 例7: user.medias[n].comments[n].delete() 例8: user.medias[
背景 お試しでreactを触ってみたところ、入力フォームで、各フォーム毎に State を管理すると大変だと思うことがありました。 ここら辺スッキリ書けるといいなと思って調べてみて、いくつか方法あったので学習がてらメモで残します。 簡単なデモ シンプルなタスク管理アプリを想定します。 タスクのタイトル、担当者、内容を入力して、list化するだけの簡単なアプリです。 画像荒くてごめんなさい useState地獄 この簡単なタスクの仕様でも、タイトル、担当者、内容についてステートを管理しないといけないのが目に見えています。 useState で管理したコードが以下になります。 上流のコンポーネントから受け取ったaddTodoを使用してタスクを追加します。 import React, { useState } from "react"; import { Todo } from "../type
はじめに こんにちは。サーバーサイドエンジニアの mokuo です。 最近、ミニマムな React アプリを実装する機会がありました。 社内のメンバーにアドバイスをもらいながら、今（2024年前半） React アプリをミニマムに作るならこんな感じかな、という構成になった気がするので、ご紹介したいと思います。 実例の1つとして参考にしていただけますと、幸いです。 はじめに 本文 📝 機能要件 ⚒️ 採用したツール (npm モジュール) 📁 ディレクトリ構成 👨💻 プロトタイピングの実施 🍩 おまけ コンポーネント設計について フロントエンドに DDD のエッセンスを取り入れてみたい おわりに 本文 📝 機能要件 社内の限られた CS メンバーのみが利用する、管理画面を開発しました。 バックエンドは Golang で実装される API サーバーで、認証機能以外だと、2つの機能
Reactの状態管理の比較(useState, useReducer, Redux, Jotai, Zustand) - Qiita
Reactの状態管理の比較(useState, useReducer, Redux, Jotai, Zustand)JavaScriptTypeScriptReactreduxNext.js
【初心者ハンズオン】ReactでTODOアプリを作ってデプロイしよう【Firebase/Shadcn/TailwindCSS】 - Qiita
【初心者ハンズオン】ReactでTODOアプリを作ってデプロイしよう【Firebase/Shadcn/TailwindCSS】TypeScriptFirebaseハンズオンReact はじめに 今回のハンズオンではReactをこれからやっていきたい人に向けてTODOアプリを作りながらReactの基本的な使い方から実際にアプリケーションをデプロイしてユーザーが使えるリリースまでを行えます。 アプリケーションはとてもシンプルなものですので、短時間で学習することが可能です 初心者向けに本記事は書いておりますので、丁寧にセットアップから紹介していきます。 JavaScriptなどの前提知識は不要で、HTMLとCSSの知識があれば行っていただけます またこのハンズオンでは最近人気がでているShadcn/uiを活用しており、学習した後に簡単にカスタマイズをしていただけるはずです。 ハンズオンだけでは使
高度なカスタマイズ性を持つプライベートAIチャット環境の作成！#Next.js #React - 虎の穴開発室ブログ
こんにちは。虎の穴ラボ エンジニアの古賀です！ 本記事は虎の穴ラボ2024年夏の連載ブログ 7日目の記事です。次回はT.Hさんのブログが公開されますので、ご期待ください！ 今回、私が書くテーマは「AI関連」で、タイトルは「Next.jsで作る！カスタマイズ可能なプライベートAIチャット環境！！」になります！ はじめに AIチャットボットは、ユーザーとインタラクティブにコミュニケーションを取るための強力なツールです。しかし、プライバシーを重視したり独自のカスタマイズをしたい場合には、外部サービスに依存せず、自分専用のAIチャット環境を構築することも必要になります。 このブログでは、Vercel公式のNext.js向で構築されたai-chatbotを使ったプライベートなAIチャット環境の構築方法を説明します。 また、本来はai-chatbotはVercel/KV（データベースサービス）が必要で
[React 19] Disabling prerendering siblings of suspended components breaking common pattern · Issue #29898 · facebook/react
Summary I'm creating this issue to continue the discussion that spawned in the already merged PR (#26380) Several community members have raised concerns about this change and it has gained traction on both X and Reddit as well, I think it is important to prioritize this discussion as it can be a dealbreaker whether or not a project will upgrade to React 19 at all of this is not addressed. The prob
![[React 19] Disabling prerendering siblings of suspended components breaking common pattern · Issue #29898 · facebook/react](https://cdn-ak-scissors.b.st-hatena.com/image/square/ea289056f4b60257612bcca1c4bf3a17a7c16510/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F6b5ae95b3312a86a7c9d48be8ff4026f8329b73bf8152d9428982a3c88a4919e%2Ffacebook%2Freact%2Fissues%2F29898)
この記事の概要 React 19 で変わることのうち、スタイルシートのサポートがあります。 私は以前もこんな実験をしているなど、React でのスタイルの扱われ方に興味があり、いくつか実験をしてみました。 公式に書かれているわけではなく、挙動から判断した内容ではありますが、調べたことを記事にしてみます。 記事を書いている 2024 年 6 月 17 日現在、React 19 は RC 版です。 正式リリース時には挙動が変わっているかもしれませんので、お気をつけください。
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
React's core architecture calls the functions you give it (i.e. your components) over and over. This fact both contributed to its popularity by simplifying its mental model, and created a point of possible performance issues. In general, if your functions do expensive things, then your app will be slow. Performance tuning, therefore, became a pain point for devs, as they had to manually tell React
npx --package yo --package generator-code -- yo code Need to install the following packages: yo@5.0.0 generator-code@1.10.1 Ok to proceed? (y) y npm WARN deprecated npmlog@2.0.4: This package is no longer supported. npm WARN deprecated are-we-there-yet@1.1.7: This package is no longer supported. npm WARN deprecated gauge@1.2.7: This package is no longer supported. _-----_ ╭────────────────────────
案件でUIライブラリの shadcn/ui を利用しているのですが React Hook Form との連携に少しクセがあるので連携を深堀りしてみます。 shadcn/ui は React Hook Form に依存しているのでフォームライブラリは基本的にはReact Hook Form一択になるかと思います。 FormFieldコンポーネントを使って連携 連携方法のベースはshadcn/uiの公式サイトで解説されています。 公式サイトのコード 公式サイトでサンプルコードとして以下のような実装が提示されています。 "use client" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import
【もくもく会ブログリレー1日目】React + @vercel/og で PNG 形式のサムネイルを 自動生成する（10分で終わるハンズオン付き） | iret.media
この記事は「もくもく会ブログリレー」 1日目 の記事です。 このブログリレーについて 私たちは、「部署の垣根を超えた社内交流」や「社員のスキルアップ」を目指して、もくもく会を開催しています。 もくもく会についてはいくつか記事が上がっているので、ぜひご覧ください！ 社内でもくもく会をやってみた（エンジニア交流促進） 若手の情熱炸裂！社内で開催したもくもく会発LT会 そして今回、LT 会に続くイベント第二弾として、ブログリレーを開催します！ 7/1 〜 7/31 までの１ヶ月間、バトンをつなぐことを目標に頑張ります 🔥 もくもく会ブログリレーのサムネイル もくもく会ブログリレーでは、記事ごとに個別のサムネイル（OG画像）を使用しています。 このような画像を使用することで、 この記事がブログリレー何日目の記事なのか どんな内容なのか 誰が書いているのか をサムネイルを見ただけで理解することがで
はじめに 実務でReduxを使用するプロジェクトに入るので、Reduxの学習をしました。 理解を深めるためにReact+ReduxでのバックエンドとのAPI通信を用いてReduxの仕組みを説明します。 解説の流れ Reduxの利点の説明 ログイン機能を用いてreduxの処理の流れの説明 ReduxToolkitを使用した際のコードの変化の説明 ログイン状態を維持させる(おまけ) 1.Reduxの利点の説明 Reduxは状態管理のライブラリです。 アプリケーションの状態を一元管理することで、予測可能な方法で状態の更新を行うことができます。 私が考える主な利点は二つあります。 状態が一元管理されるのでpropsの受け渡しをせずに済みます コンポーネントの階層構造が深ければ深いほどメリットがあると思います。 reduxの状態管理の流れを理解すれば状態の流れを追いやすい action 状態変化を表
はじめに しばしば見かける以下のようなUXを、誰でも扱えるコンポーネントとして実装してみたので解説します。 完成系 以下にて、ソースコードを公開しております。 解説 以下、該当のコンポーネントをMenuModalPortalと呼称します。 Props設計 <MenuModalPortal buttonElement={ <button type='button' onClick={onClickMock}> Click me </button> } menuElement={ <ul> <li>test1</li> <li>test2</li> </ul> } verticalPosition='top' horizontalPosition='left' verticalOffset={8} horizontalOffset={8} area-label='Menu Test' /> b
![[React]クリックしたらメニューがすぐ側に出現するUXを汎用的なコンポーネントに落とし込んでみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/074df88870058c80a1fe16ec79494c4af6f0995e/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--9O2R-96i--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%25255D%2525E3%252582%2525AF%2525E3%252583%2525AA%2525E3%252583%252583%2525E3%252582%2525AF%2525E3%252581%252597%2525E3%252581%25259F%2525E3%252582%252589%2525E3%252583%2525A1%2525E3%252583%25258B%2525E3%252583%2525A5%2525E3%252583%2525BC%2525E3%252581%25258C%2525E3%252581%252599%2525E3%252581%252590%2525E5%252581%2525B4%2525E3%252581%2525AB%2525E5%252587%2525BA%2525E7%25258F%2525BE%2525E3%252581%252599%2525E3%252582%25258BUX%2525E3%252582%252592%2525E6%2525B1%25258E%2525E7%252594%2525A8%2525E7%25259A%252584%2525E3%252581%2525AA%2525E3%252582%2525B3%2525E3%252583%2525B3%2525E3%252583%25259D%2525E3%252583%2525BC%2525E3%252583%25258D%2525E3%252583%2525B3%2525E3%252583%252588%2525E3%252581%2525AB%2525E8%252590%2525BD%2525E3%252581%2525A8%2525E3%252581%252597%2525E8%2525BE%2525BC%2525E3%252582%252593%2525E3%252581%2525A7%2525E3%252581%2525BF%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AYU-TA-9%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2QwNzU2NmM5MzQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
CDN版のReactを使ってWebsocketのチャットクライアントを実装してみました - Qiita
はじめに 【欲望】 （１）インストール作業は極力したくない PC内で使うモジュールをガチガチにして重たくしたくない （２）オフラインでも動くようにしたい ブラウザへのドラッグ＆ドロップで使いたい （つまりはWebサーバーレスでも使える） （つまりはfileプロトコルでも使える） という願いを叶えられたら幸せだよねー。 そういう思いから以下のルールを決めました。 【ルール】 （１）CDN版を利用する インストール回避のため （２）CGIは使わない Webサーバー回避のため 【ルール】の（１）に関しては、そのままだとオンラインでしか使えなくなるのでダウンロードしたモジュールを使います。 また、アクセス先のファイルが変更される事で発生する不具合の影響を小さくできるというメリットもあります。 事前準備 CDN版のファイルを以下のようなコマンドを使ってあらかじめダウンロードしておきます。 > wge
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Server Componentsを理解したい
React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
Reactベストプラクティス2: SWRを正しく使うには - Hello Tech
今話題となっているReact 19のSuspenseの変更内容を詳しく見てみました。
【React】useMediaQuery は最終手段にしよう
React 19 RCのSuspenseに関する問題と現状のまとめ
React Internals Explorer | Deep Dive Into React
British Highschoolers react to British Food Memes
React v19に関する周辺ライブラリへの影響と対応状況について - RevComm Tech Blog
React 19 and Suspense - A Drama in 3 Acts
Codemod partnering with the React team
React 19に加えられた変更が危うくインターネット全体を遅くするところだった件
Reactでオブジェクト指向やってみる #状態管理ライブラリ一切不要
【React】useState 地獄を脱するために - Qiita
ミニマムな React Web アプリケーションの技術スタックを大公開！ - inSmartBank
React 19 での style 要素の実験 - Qiita
Restyle - Zero Config CSS for React
Understanding React Compiler | Tony Alicea
VS Codeの拡張機能開発でReactを導入して開発体験を向上させる - Qiita
shadcn/uiとReact Hook Formの連携を深堀りしてみる
React Reduxの仕組みを説明 - Qiita
[React]クリックしたらメニューがすぐ側に出現するUXを汎用的なコンポーネントに落とし込んでみた