[B! React] R2Mのブックマーク

React 19を概念から理解する

2024-05-29うひょさんに聞く！　React 19アップデートの勘所 #React19_Findy

R2M 2024/05/29

react

リンク

Markdown を拡張する MDX はドキュメント作成の新たな可能性？

この記事は、技術書典11で頒布中の﹁Vivliostyle で本を作ろう vol. 5﹂から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めください！また、この記事以外の内容もすべて Vivliostyle 公式サイトで無料公開中です。技術書やドキュメントを執筆する際、あなたはどのような形式で文章を書きますか？最近ではもっぱら Markdown で書かれることが多いですが、この Markdown を拡張するポテンシャルを持つお気に入りの OSS プロジェクト﹁MDX﹂を紹介します。MDX = Markdown + JSX MDX の名前の由来は Markdown + JSX なので、MDX を理解するためにはまず JSX について知る必要があります。 JSX とは JavaScript の拡張構文の一つで、元々 React の

R2M 2024/05/27

リンク

巷の「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 フレームワークなし【フレームワークあり】

R2M 2024/05/05

react
nextjs

リンク

React のルール – React

様々な概念を表現する方法がプログラミング言語によってそれぞれ異なるように、React にも、理解しやすい方法でパターンを表現し高品質なアプリケーションを産み出すための慣用的な記法、ないしルールが存在します。このセクションでは、自然な React コードを書くために従うべきルールを説明します。自然な React コードを書くことで、安全で整理されており、組み合わせ可能なアプリケーションを作成することができます。以下に挙げる特性により、アプリは変更に対して頑健になり、他の開発者やライブラリやツールと連携しやすくなります。以下のルールは React のルールとして知られています。これらを守っていないならアプリにバグがある可能性が高い、という意味で、これらは単なるガイドラインではなくルールです。またこれらを守らない場合、あなたのコードは不自然で、理解や推測が難しいものになるでしょう。 Reac

R2M 2024/04/22

react

リンク

Reactは悪い意味でも現在のjQueryだし、それを受け止めないと前に進めないということ

HTMXのCEOに就任したので[1]、記念に記事を書きたいと思います。 HTMXサイトのエッセイ[2]はどれも珠玉の出来で評判ですが、それらを読んでもわかるとおり、HTMXは﹁Webはこうあるべき﹂という主義主張のあるライブラリです。その主義主張のかなり初歩的な前提を書きたいと思います。 Reactはなぜだめか、という話です。21日追記ちょっと誤解が生じているために書き足しますが、Reactのパフォーマンス(及びそれ以外のこと)への批判というのはHTMX固有のものではありません。SvelteやSolidJSといった新興JSフレームワークやRails等の非JS WEBフレームワーク、SSG開発者たち、それからReact開発者たち自身といった多様なWEB開発者たちに共有されている見方です。この記事の最後の方でReact批判記事のリンク集を引用していますが、そういった多様なバックボーンの人た

R2M 2024/03/19

react

リンク

検索システムのフロントを SSR・Remix で作り直した - Unyablog.

かなり昔に Elasticsearch ベースの検索システム︵Heineken︶を作っていた。 Elasticsearch で部内 Wiki 検索高速化 - Speaker Deck 特に更新せず数年動かしていたのだけど、サーバーの置き換えに伴って Kubernetes に置きたいよねという話になり、ついでに Elasticsearch も新しくしたいよね、となった結果、現状のフロントエンドだと最新の Elasticsearch では動かないということがわかった。 nonylene.hatena blog.jp フロントエンドの改修が必要なわけだが、ここでフロントエンドの構成を見ると… FlowType create-react-app PureComponent Bootstrap3古すぎる！絶対アップデート難しいし触りたくない技術しかない。フロントまわりの構成を変えたいとずっと思っ

R2M 2024/03/11

リンク

Reactはなぜそんなに人気なのか？翳りは訪れるのか？

導入現在、ReactをはじめとするVueやSvelteなど多様なWebフロントエンドフレームワークが存在しますが、Reactが特に人気を博している理由について、単純な好奇心から自分なりに考察してみることにしました。 Reactの人気 Reactの人気の理由について考察するにあたり、まず、他のフレームワークと比較してReactが実際に人気があるのかを調査しました。 State of JS 毎年、世界中のWebエンジニアを対象にJavaScriptの最新トレンドや状況を把握するために実施されている利用率アンケートの結果がこちらです。回答数は3万人を超え、2022年の調査結果によると、Reactが8年連続で1位を獲得しています。 JavaScript Rising Stars GitHubのスター数を利用して、その年のJavaScriptエコシステムのトレンドを概観することができます。こちらは

R2M 2024/03/03

react

リンク

個人開発で参考になるNext.jsリポジトリ10選

OpenStatus - ステータスページ App Router Turborepo Drizzle Clerk tRPC Tailwind shadcn/ui LLM Report - OpenAI モニタリング App Router Prisma NextAuth shadcn/ui Stripe Dub - URL 短縮 App Router Turborepo Prisma NextAuth Tailwind Stripe slug - URL 短縮 Prisma NextAuth tRPC Tailwind Cal.com - 日程調整 Turborepo Prisma NextAuth tRPC Tailwind Taxonomy - ブログ App Router Prisma NextAuth Tailwind Rowy - ローコード GUI Firebase Dorf -

R2M 2023/10/15

react

リンク

Reactで再レンダリングを抑えるシンプルな方法

はじめに﹁React で再レンダリングを抑えたい...﹂となった場合、多くの人が React.memoやuseM emo、useCallback などのいわゆる﹁メモ化﹂を思い浮かべることでしょう。しかし、そういった﹁メモ化﹂を用いなくても再レンダリングを抑える方法が実は存在しています。今回はその代表的な例を2つ紹介していきたいと思います。よくある例まず例として、以下のような﹁パフォーマンスに問題を抱えたコンポーネント﹂を考えてみましょう。 import {useState } from "react"; export default function App() { let [color, setColor] = useState("red"); return ( <div> <input value={color} onChange={(e) =>setColo

R2M 2023/09/03

react

リンク

GitHub - alvarlagerlof/rsc-parser: A parser for the React Server components when sent over the network

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

R2M 2023/08/20

react

リンク

Things you forgot (or never knew) because of React

Published: August 4, 2023 Updated: October 27, 2023 Part 1: an intro about music, defaults, and bubbles Like a lot of people, there was a time when the only music I listened to was whatever was played on my local radio station. (A lot of people over 30 or so, anyway. If this doesn’t sound familiar to you yet, just stick with me for a minute here.) At the time, I was happy with that. It seemed like

R2M 2023/08/12

react

リンク

Million.jsの仕組みが気になったので調べてみました

function Lion() { return ( <img src="https://million.dev/lion.svg" /> ); } const LionBlock = block(Lion); この記事の執筆時点(v2.4.2)では UI Component を提供するライブラリと一緒に使えなかったり、コンポーネントに props を渡す際にスプレッド構文が使えなかったりと、まだまだ制約が多そうです。ブロック仮想DOMの仕組みブロック仮想DOMの仕組みについてはブログで詳しく説明されていたので、詳細気になる方は読んでみてください。 (下記抜粋は ChatGPT で翻訳したものになります) ブロック仮想DOMは、差分検出に異なるアプローチを取り、次の2つのパートに分かれます：静的解析: 仮想DOMは解析され、ツリーの動的な部分が「編集マップ」として抽出されます。編集マ

R2M 2023/06/10

react

リンク

Virtual DOM: Back in Block | Million.js

A little over four years ago, Rich Harris released Virtual DOM is pure overhead (opens in a new tab), analyzing the performance of traditional virtual DOM manipulation.[0] [0] "you've probably heard the phrase 'the virtual DOM is fast', often said to mean that it's faster than the real DOM. It's a surprisingly resilient meme" - Harris, 2018 In his article "Virtual DOM is pure overhead," Rich Harri

R2M 2023/06/10

リンク

Reddit - Dive into anything

What's you opinion on the new Reddit design ditching React in favor of Lit for mostly performance reasons? Old : https://i.imgur.com/ZaGmgPr.png New (you need to be logged out): https://i.imgur.com/83jzoNx.png They've announced it here: https://www.reddit.com/r/reddit/comments/11zso11/an_improved_web_experience/ I've confirmed the JS framework they've used with an extension. The performance boost

R2M 2023/04/30

リンク

React.js開発当初、「そんなものが使えるはずがない」とFacebook社内で評価されていた。React.jsの開発経緯を振り返る「React.js: The Documentary」YouTube公開

React.js開発当初、﹁そんなものが使えるはずがない﹂とFacebook社内で評価されていた。React.jsの開発経緯を振り返る﹁React.js: The Documentary﹂YouTube公開代表的なJavaScriptのフレームワークの1つであるReact.jsがどのように生まれ、発展してきたのかが、React開発当時の関係者やメンテナーなどへのインタビューによって語られる動画﹁React.js: The Documentary﹂がYouTubeで公開されています。動画の作成と公開を行ったのは、IT エンジニア向けの転職紹介などキャリアサービスを提供しているHoneypot社。同社は以前にもKubernetesの歴史を紹介したドキュメンタリー動画﹁Kubernetes: The Documentary﹂を公開しています。参考‥KubernetesをGoogleが開発し、

R2M 2023/02/22

react

リンク

（基礎編）jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード

なぜ書いたか筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ずかしながら業務時間外での学習や外部の情報を追うこともしていなかったため、開発系の技術スタックに慣れるのにかなり時間がかかりました。まずはよく使うコードを見て解説しながら答えの一つを示し、よく出てくるコードをざっくり理解して書けるようにすることで、実務でReactを取り入れる取っ掛かりになればいいなぁという思いでこの記事を書いています。続編は多分今月中に書きます。こちらは基礎編です。対象者普段jQueryでWebサイトを制作している生のJSはあん

R2M 2023/01/25

react

リンク

Web フロントエンドの実装において本来の機能を損なってはいけない

Web フロントエンドの実装において本来の機能を損なってはいけない 2022.12.24 データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。一方データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で

R2M 2023/01/05

リンク

図で分かるReact18のしくみ

これは何?この記事はReact18がどのように動いているのかをまとめた記事です。なるべくコードの記載はせず、図を使用して読みやすさを重視しています。また、これからReactの内部のコードを読む予定の方のために、各セクションの終わりにアコーディオン形式でGitHubのリンクを貼っています。 ※ この記事はnote株式会社 Advent Calendar 2022 の17日目の記事です。対象読者 Reactの内部コードを読む気は無いが、裏で何をしているのか把握しておきたい方これからReactの内部コードを読もうと思っている方暇な方 Fiberについてまず最初に、Reactのドキュメントを漁っていると度々出現する﹁Fiber﹂についてお伝えします。そもそもFiberとは何か一部例外はありますが、1個のFiberは1個のコンポーネント︵<MyComponent>や<div>など︶管理

R2M 2022/12/19

react

リンク

【脱ランタイムCSS in JS】styled-componentsを別のCSS in JSに自動置換するCLIツールの開発

1.はじめに本記事はサイボウズの夏インターン(2022年)で取り組んだ内容の紹介を行います。インターンでは、サイボウズのフロントエンド領域における横断的組織であるフロントエンドエキスパートチームに配属されました。5日間のインターン期間でstyled-componentsを別のCSS in JSに自動置換するCLIツール・extract-styledの開発に取り組みました。 2. extract-styledの紹介実装したextract-styledは、以下のようなCLI経由の実行を通して、styled-componentsで定義されたReactコンポーネントをtargetに指定した任意のCSS in JSに変換することができます。(現時点では変換先としてlinaria・vanilla-extractに対応) $ extract-styled \\ --path ./src/compon

R2M 2022/11/01

リンク

React/Next.jsでの俺的ベストプラクティスを見てくれ

木瓜丸です。最近になって、やっとNext.jsを上手く使いこなせてるんじゃないか？！と思えるようなコンポーネントの設計手法を見つけたので、Zennにまとめてみたいなと思います。この記事で触れることこの記事では、主にページ単位でどのように状態管理を行うのかに焦点を当てることにします。コンポーネントの管理の仕方などは特に着目しませんがご了承下さい。 hooksの導入 React初心者の方は最初に疑問に思うと思いますので、hooksについて触れておきます。 hooksというのは、Reactによって提供されているuseState, useEffectといったやつや、それらを組み合わせて作ったオレオレ状態管理基盤の総称です。この記事で用いる基本的なhooksをいくつか紹介します。useState その名の通り、状態を持つ変数を作ってくれます。 const Hoge = () => {c

R2M 2022/08/21

react

リンク

はてなブックマーク

タグ

関連タグで絞り込む (47)

Reactに関するR2Mのブックマーク (169)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス