2024年4月にリリースされたReact 19 Betaの新機能について、細かい点やポイントを解説します。
React 19の新機能まるわかり
2024年4月にリリースされたReact 19 Betaの新機能について、細かい点やポイントを解説します。
useSession？なにそれおいしいの？ - Qiita
はじめに 2024年5月から案件が変わり、自社の既存案件でPythonやReactでコーディングしてます。 学んだことの忘備録をつけようと思い、貴重な土曜日捧げます。 先月までは(1~4月)、客先でテスターしており一気に環境変わりましたが何とかやれております。 https://qiita.com/naoya_347/items/4dbb411fad84160221e0 前提 今回の任務としては、Googlge Driveの情報をwebアプリに取り込むというものです。 こんな感じの外部APIを毎日叩いている人生です。 で、フロントとサーバーに繋ぎ込みをしているときにuseSessionってすごいと感じ、アウトプットしようと思いました。 本編 フロントとサーバーの通信について 一つの例として、以下の流れのパターンがありました。 ① フロントからGoogle認可サーバーに通信(ユーザーにGoog
楽観的更新を行うための React の useOptimistic フック
楽観的更新を行うための React の useOptimistic フック 2024.05.12 React v19 では楽観的更新を行うための `useOptimistic` フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UX の向上につながります。 React v19 では楽観的更新を行うための useOptimistic フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UX の向上につながります。 楽観的更新を使用している例として、X（旧 Twitter）のいいねボタンがあります
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】 - Qiita
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】TypeScriptハンズオンRemixtailwindcssSupabase はじめに Reactを使っていてステートがクライアントとサーバーで辻褄が合わなくなった そんな経験がReactをある程度使ったことがある人はおそらく経験したことがあるはずです。 Reactにおいて状態管理は誰でも使いやすく直感的である半面、クライアントとサーバーの状態を意識する必要が有ります。 どのタイミングでステートの変更をサーバーでも行うのか難しく思う場面もしばしばあります。 今回は最近巷でReactと並んで見かけるようになったRemixについてハンズオン形式で学べるような記事を書いていきます。 ハンズオンを通してRemixの特徴であったり、SupabaseやTail
巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32
(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」 それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク（といえそう） そもそも、create-react-app は今は更新されてないので create-vite-app を使うべき フレームワークあり or フレームワークなし 【フレームワークあり】
Reactを使ってプロダクト開発している開発者だけでなく、マネージャにも読んでほしい「Fluent React」 - ROUTE06 Tech Blog
チームでReactを使って開発していると、コードレビューをする際に、「この書き方はしない方がいいが、それを説明するには800文字くらい必要。図も描きたい。でもそれらを準備する時間はない。」ということが度々ありました。 また、フレームワークやライブラリの技術選定をする際、マネージャに「どうして技術選定が必要なのか」を説明する必要がありました。ROUTE06のマネージャはエンジニアリングへの造詣が深い方が多いので、対立構造になることはありませんが、説明するためには1000文字くらい必要で、やはり図も描きたい。時間はない。と同じ気持ちになることがありました。 参考情報として紹介できる情報がないか探してみると、「とりあえずこうすればOK」というベストプラクティスについては検索エンジンやSNSですぐに見つかります。ただ、どうしてその方法がベストプラクティスなのか、仕組みや原理を説明している情報は少な
React Forget は何を「忘れ」させてくれるのか
はじめに こんにちは、株式会社TERASSでエンジニアをしている myrear です。 先日 React Blog にて公開された React Labs: 私達のこれまでの取り組み - 2024年2月版 という記事に React Compiler に関する記述があります。 この React Compiler とは React コードを自動的に最適化し、それにより開発者はメモ化について考える必要がなくなる(忘れることができる)というものです。 まるで魔法のようですが、一体どのような方法でコードの最適化を実現しているのでしょうか？ 本記事では2023年秋の講演の動画を自動翻訳字幕で追いながら要所要所をかいつまんで解説していきます。 React Forget とは？ 先述の通り React コードを自動的に最適化してくれるコンパイラです。 具体的には JavaScript と React のルー
React 19に入る(予定の)新機能のまとめ
こんにちは、株式会社TERASSでコードを書いている坊主、shuji-koikeです。 次期Reactの新機能が話題になっていますが、日本語の情報がまだあまりないようだったので拙い記事ですがまとめてみました。 The Next Major Version of React Reactの開発チームが過去数年間に渡ってreact@canaryチャンネルで開発を進めてきた新機能をreact@latestとしてリリースする準備が整ったようです。 そしてそれらの新機能をreactの次期メージャーバージョンとなるReact 19としてリリースする準備には入ったものの、ドキュメントの整備など正式なリリースまでにはまだ時間がかかるようです。 元記事とは順番が逆ですが、ここからreact@latest、そしていずれreact@19としてリリースされる予定の新機能の一部を要点をまとめて紹介していきます。 Re
雑にReactアプリを作りたい時に使ってるもの
import "./App.css"; import { Link, Route, Switch } from "wouter"; function Nav() { return ( <nav> <Link to="/">Home</Link> <br /> <Link to="/about">About</Link> </nav> ); } function Home() { return ( <div className="App"> <h2>Home</h2> <Nav /> </div> ); } function About() { return ( <div className="App"> <h2>About</h2> <Nav /> </div> ); } function App() { return ( <> <Switch> <Route path="/" compo
ssig33: "最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 ##..."
新人声優 +81-9014502501 mail@ssig33.com 0088-7709-7529 it/it. my opinion may be not my own. but my fate is my own. 最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 前提: デカいフレームワークは使わない next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。 前提: SSRしない SSRもSSGもISGもしない。CSRでいい。SSRしたいならReactをそもそもぶん投げたほうが(個人レベルなら)いいと思ってる。それがほしいならPHPやRails でええ。今更RailsでView書きたくないとか思うかもしれない
翻訳記事：エンタープライズ アプリでReactを選択したら解雇されそうになった話 | Graat（グラーツ）-グロース・アーキテクチャ＆チームス株式会社
unsafe:本記事は、I Almost Got Fired for Choosing React in Our Enterprise App（ https://medium.com/better-programming/i-almost-got-fired-for-choosing-react-in-our-enterprise-app-846ea840841c ） を原著者Razvan Dragomir氏の許可を得て翻訳したものです。 エンタープライズ アプリでReactを選択したら解雇されそうになった話 Reactは我々の開発を楽にするはずだった。それどころか障害物が作成された。 Razvan Dragomir 2021.01.23 2018年の夏のことだった。私の上司Adrianから、カナダの大企業のCTOであるJamesとのSkypeミーティングに参加するよう頼まれた。 お互いを
TanStack Router（& Query）はSPA開発で求めていたものだった✨【Reactのルーティングとデータ取得】
Reactの技術選定においてルーティングとデータ取得は特に重要な役割を担っています。 もちろんNext.jsやRemixのようなフレームワークを採用すれば、個別のライブラリを追加することなくルーティングからデータ取得までフレームワークが提供するAPIを使って実装することができます。 しかし、AI ShiftのようなBtoBのサービスにおいてはSPAで十分なことがほとんどで、Next.jsなどのフレームワークの採用がtoo muchになりかねません。 この記事は2024年2月時点の技術選定において、TanStack RouterがSPAのルーティングライブラリとして非常に有力な候補であることを紹介します。 はじめに TanStack RouterとTanStack Queryの採用がSPAアプリケーションにおける最適解の一つになりうることをその特徴と実際の設計例をもとに解説します。 TanS
Tauri(Rust + React + TypeScript) から始めるディスクトップアプリ #1[React導入]
はじめに Vue3/TSで作成しようとしていました。しかし、Vue3/TSがなんだろう。あまり好きになれずモチベーションが上がりません。（Vue2仕事でもつかっているのですが、Vue3移行は躊躇しそう。） なんやかんやで定番のReactに乗り換えようと思います。 Reactは、以前軽くしか触っていないのでほぼ初めて。今後、技術選定をしますが、基本的なところの考え方は以下になります。 まずは、言語はTypeScript一択です。 不要なエラーを吐くことも多々あり、個人利用だとJSの方がコストかからないと思いますが、ノウハウをためるために使っていきます。 フレームワークは、Viteを利用します。今回は、ディスクトップアプリをSPAで開発なので、viteを使います。 Webとかであれば、Next（SSR）記述が簡素で好きなのですが、SPAではメリットがないので却下、スピード優先でviteです。
![Tauri(Rust + React + TypeScript) から始めるディスクトップアプリ #1[React導入]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a1903a59c1c9940ecdb522511c5041ec8a8cc2ab/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--p2ocAg56--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ATauri%252528Rust%252520%25252B%252520React%252520%25252B%252520TypeScript%252529%252520%2525E3%252581%25258B%2525E3%252582%252589%2525E5%2525A7%25258B%2525E3%252582%252581%2525E3%252582%25258B%2525E3%252583%252587%2525E3%252582%2525A3%2525E3%252582%2525B9%2525E3%252582%2525AF%2525E3%252583%252588%2525E3%252583%252583%2525E3%252583%252597%2525E3%252582%2525A2%2525E3%252583%252597%2525E3%252583%2525AA%252520%2525231%25255BReact%2525E5%2525B0%25258E%2525E5%252585%2525A5%25255D%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252581%2525B5%2525E3%252581%252598%2525E3%252582%25258F%2525E3%252582%252589%2525E3%252580%252580%2525E3%252581%2525B2%2525E3%252581%2525A7%2525E3%252581%25258D%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzM5OWVhNDYwMWQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Reactの状態を理解して適切にHooksを利用する
Reactと状態は切っても切れない関係です。なぜなら、Reactは状態に基づいて画面を更新するコンポーネントベースのUIライブラリだからです🤝🏻 そんなReactの状態を管理・操作しやすくしてくれているのが、React 16.8から登場したフックです。それゆえ、フックを正しく利用するにあたってReactの状態の理解は非常に重要であり、Reactの状態の理解があやふやだと、予期せぬ挙動やバグのもとになりかねません。 今回の記事では、Reactの状態を理解しながら適切な箇所で適切なHooksを選択していくプロセスを再確認できた！自信を持ってReactをコントロールできるようになりそう！と言えることをゴールとしています🎉 今回使用した即席匿名メモアプリのコードベースです。 サークルでは、コミットに沿って説明をしていきました。（あくまで即席なので細かいこと気にしながら作ってませんorz） 【
Reactで実装したフォームのパフォーマンスが問題になるのはなぜか
RelayHub合同会社の久保田光則です。 Reactでフォームを効率よく実装するためのライブラリとして、React Hook FormやReact Final Form、TanStack Formなどがあります。これらのライブラリは、フォームを効率よく実装できる枠組みを提供してくれるだけではなく、高速なフォームを実装するための方法も提供してくれます。 で、この記事ではReact Hook Formとかそういうライブラリの使い方というよりかは、そもそもなぜReactで実装したフォームのパフォーマンスが問題になりやすいのか、その辺りの事情について解説します。 Reactのレンダリングの仕組み Reactでは皆さんご存知のとおり、仮想DOMと呼ばれるDOMに似た構造のオブジェクトを生成してレンダリングを行います。Reactのコンポーネントはレンダリングするたびにそのコンポーネントに対応する仮想
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React 19を概念から理解する
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
レガシーなフロントエンドを リプレースするプラクティス。 エネチェンジが挑む 「React化」
【2024年】React, Tailwind CSSでメルカリクローンサイトを作ろう【入門】
to B プロダクトで Vite + React Router を採用して半年後の感想 / Impressions after 6 months of using Vite + React Router
