図で分かるReact18のしくみ
これは何? この記事はReact18がどのように動いているのかをまとめた記事です。なるべくコードの記載はせず、図を使用して読みやすさを重視しています。また、これからReactの内部のコードを読む予定の方のために、各セクションの終わりにアコーディオン形式でGitHubのリンクを貼っています。 ※ この記事はnote株式会社 Advent Calendar 2022 の17日目の記事です。 対象読者 Reactの内部コードを読む気は無いが、裏で何をしているのか把握しておきたい方 これからReactの内部コードを読もうと思っている方 暇な方 Fiberについて まず最初に、Reactのドキュメントを漁っていると度々出現する「Fiber」についてお伝えします。 そもそもFiberとは何か 一部例外はありますが、1個のFiberは1個のコンポーネント（<MyComponent>や<div>など）管理
【React】useSWRはAPIからデータ取得をする快適なReact Hooksだと伝えたい - パンダのプログラミングブログ
Vercel製のuseSWRはReactの非同期データ取得をラクにする SWRとは、Next.jsを作成しているVercel製のライブラリです。**SWRはuseSWRというReact Hooksを提供し、APIを通じたデータの取得をラクに記述する手助けをしてくれます。**このライブラリはなんとGitHubスター数を10,700も獲得しています。 SWRはライブラリ名で、stale-while-revalidateというRFC 5861で策定されたキャッシュ戦略の略称です。このSWRがデータ取得の扱いをラクにしてくれて最高なのです。 React開発者が嬉しいuseSWRの書き心地 useSWRは外部APIからのデータ取得、ローディング状態、エラーが発生した時をシンプルに記述できます。これがあらゆるReact開発者にとって（というか、ReactでAPIにリクエストを頻繁に送るアプリケーション
Create React App
Create React AppSet up a modern web app by running one command. Less to LearnYou don't need to learn and configure many build tools. Instant reloads help you focus on development. When it's time to deploy, your bundles are optimized automatically. Only One DependencyYour app only needs one build dependency. We test Create React App to make sure that all of its underlying pieces work together seaml
TypeScript • Storybook docs
Storybook provides an integrated TypeScript experience, including zero-configuration setup and built-in types for APIs, addons, and stories. Configure Storybook with TypeScriptStorybook's configuration file (i.e., main.ts) is defined as an ESM module written in TypeScript, providing you with the baseline configuration to support your existing framework while enabling you stricter type-checking and
Install Storybook • Storybook docs
Use the Storybook CLI to install it in a single command. Run this inside your project’s root directory: Install a specific versionThe init command will use whichever version you specify. For example: storybook@latest init will initialize the latest versionstorybook@7.6.10 init will initialize 7.6.10storybook@latest init will initialize the newest 7.x.x versionStorybook will look into your project'
ブログのReactを16.8にあげてReact Hooksで書き換えてみた - mottox2 blog
2019/02/06にReact16.8がリリースされ、16.7のalphaから入っていたReact Hooksが安定版にやってきました。 そこで今回このブログで使われているReactを16.8に上げて、ステートフルなコンポーネントをReact Hooksを使いFunction Compoenentに書き換えてみました。 React Hooksの解説をした記事はたくさんあると思うので、今回は書き換えてどう変わったかを見ていきましょう。 該当する部分はHeaderの検索フォームです。 プルリクエストだけ見たいかたはこちら。 https://github.com/mottox2/website/pull/39 > 書き換えのポイント書き換えのポイント > stateの書き換えstateの書き換え これはいろんな記事で言及されているuseStateを用いて書き換えます。 useStateに初期値
React AJAX Best Practices
When you start asking about AJAX and React, the first thing the experts will tell you is that React is a view library and React has no networking/AJAX features. It's good to know, but not very helpful when you just want to get data from the server into your React components. The truth is, there are a ton of ways to do it. You probably have thought of a couple ways yourself, but if you choose the w
amakanのフロントエンドを色々改善した - ✘╹◡╹✘
https://amakan.net/ のこの辺の改善の続き。 amakanをUnicornからPumaに移行した - ✘╹◡╹✘ amakanでyarnを使うようにした - ✘╹◡╹✘ amakanでRuby 2.3.3を使うようにした - ✘╹◡╹✘ amakanを Ruby 2.3.3 から 2.4.0-preview3 に移行した - ✘╹◡╹✘ react_on_rails amakan ではサーバサイドで React.js で記述したコードを使ってHTMLを生成していて、このために react_on_rails というライブラリを使っている。このライブラリの最新バージョンが v5 から v6 に上がっていたので、まず v6 を使うように変更を加えた。 v5 までは、サーバサイドとクライアントサイドで別々の Webpack の設定ファイルを用意するような設計になっていたが。しかし
Ruby on Railsのカレンダー | Advent Calendar 2016 - Qiita
URLYou can post either your article on Qiita or your blog post. About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after November 1 of the year can be registered. (Secret articles can be registered anytime articles are posted.)
Grommet
A terse notification that will only be displayed for a short period of time, overlaying whatever the user is currently doing. Show toastThe caller is responsible for determining when to show a Toast. The toast should not be distracting or disturbing the user. To accomplish this, don't show a toast for every task state (i.e. Creating, Processing, Completed, etc). Instead, only show a toast at the e
webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ
はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br
Railsで構築しているWebサービスをjQueryベースからReactに移行する時の知見 | スペースマーケットブログ
こんにちは、エンジニアの小林です。 先日、スペースを貸し出すオーナー様向けのダッシュボード(管理画面)をリニューアルしました。 スペースマーケットはwebサーバもAPIサーバもRailsで構築しているのですが、JQueryをベースに構築していたリニューアル前の実装からReactをベースにした実装へ移行した際に得た知見を書きたいと思います。 サーバ構成 既存のサーバ構成では、webサイトはwebサーバから、アプリはAPIサーバからそれぞれデータベースを参照していました。 リニューアルに伴いwebサーバからもAPIサーバを参照する構成となります。 webサーバから別ドメインのAPIサーバにアクセスするためには CORSの設定 webサーバとAPIサーバはドメインが違うため、ReactのコードからAPIサーバにajaxリクエストが送れません。これを回避するためにCORS(Cross-Origin
非SPAなサービスにReactを導入する - クックパッド開発者ブログ
投稿開発部の外村（@hokaccha）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
お絵かき体験向上作戦 #kyotojs - ぱすたけ日記
プレゼンモード 再生 ← / →で移動 fでフルスクリーン escでおわる お絵かき体験向上作戦 id:Pasta-K at Kyoto.js 11 こんにちは 京都の大学生です。 Notaって会社でGyazoってサービスの開発のアルバイトをしています 趣味としてBrowser Extensionについての観察を行っています ステッカーあります 振り返り この発表は京都.なんか #2で発表したReactとCanvasでお絵かき機能を作った話の続編です。 今北産業 Gyazoの画像編集機能はReactとcanvasを組み合わせて作っている ReactとCanvas組み合わせ事例 React Konva: KonvaのReact Wrapper React-Canvas: https://flipboard.com/ のスマホ版で使われている。FPS向上目的。 canvasにはcanvas、D
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
next-intl – Internationalization (i18n) for Next.js
Storybook Docs Typescript Walkthrough
react_on_railsとreact-routerでシングルページアプリケーションをサーバサイドレンダリングする - Qiita
reactjs/react-rails (master - ruby) documentation - Omniref
http://post.simplie.jp/posts/77
DeNA Engineering - DeNAエンジニアのポータルサイト
