This project has been archived and is no longer actively maintained.
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Stateのアーキテクチャ」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ! この記事では、今わたしが開発・運用しているアプリケーションのState戦略についてご紹介していきます。 全体像 アプリケーションに存在する状態(State)を以下の3種類に分類し、それぞれのやり方で管理しています。 サーバーデータのキャッシュ Global State Local State 1. サーバーデータのキャッシュ 「SPAで管理する必要のあるGlobal Stateって、そのうちほとんどがサーバーデータのキャッシュだよね。それを取り除けたら、管理する必要のあるGlobal Stateってすごく小さくなるんじゃない?」という主張を私が認識しはじめたのが2020年の初旬でした。おそらく
This blog site has been archived. Go to react.dev/blog to see the recent posts. 2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size React Server Components. To introduce React Server Components, we have prepared a talk and a demo. If you want, you can check them out during the holidays, or later when work picks back up
Model.Extract.Run.Build better apps with Flume. A React-powered node editor and runtime engine Extract business logic into JSON graphsBuild apps that are resilient to changing requirements by modeling your business logic as a JSON graph. Flume provides a sleek UI for creating and editing these graphs. This is a live Flume node editor. Go ahead, take it for a spin! Build apps that are resilient to
Hey 👋 Records & Tuples, a very interesting proposal, has just reached stage 2 at TC39. They bring deeply immutable data structures to JavaScript. But don’t overlook their equality properties, that are VERY interesting for React. A whole category of React bugs are related to unstable object identities: Performance: re-renders that could be avoidedBehavior: useless effect re-executions, infinite lo
We’re excited to announce React Spectrum, a collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. Check it out on Github! React Spectrum includes three libraries: React Spectrum — A React implementation of Spectrum, Adobe’s design system. React Aria — A library of React Hooks that provides accessible UI primitives for your design system. React Sta
Next.js 9.4 Fast RefreshとIncremental Static Regeneration等のアップデートJavaScriptReactNext.js Hot ReloadがReact Refreshを用いたFast Refreshに置き換えられました。 これで編集したファイル内のコードのみが更新され、コンポーネントの状態を失うことなく再レンダリングを行ってくれます。 これに伴いエラーのオーバーレイも再設計され、ページ上ですぐにエラーを確認できるようになっています。 Incremental Static Regeneration (beta) 段階的な静的ページ再生成がサポートされました。 Next.js 9.3でサポートされたStatic Generationでは、ビルド時に生成したページでなくてもfallback: trueオプションを利用することで実行時に新しい
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript(TypeScriptではなく) + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
「StackOverflow から突然 Qiita に移動」を、App Extensions と React Native で簡単プロトタイプJavaScriptiOSReactreactnativeAppExtension なんか実装でハマってしまい、うまくいかねーなって思いながら、StackOverflow を見ていたら、なんだか似たような質問 Qiita で見たし、やっぱり日本語で読みたいから Qiita に行こうかな、と思うことありませんか? ありますよね! それ、Action Extension でさくっと実装できます! しかも、ほんの少しの Swift と Objective-C を書けば、あとは React Native で書けます。 ということでやってみました。 0. 本稿について 対象者: iOS プログラミング初心者. Xcode といえば、xcode-select -
Posted by Yannick Assogba, Software Engineer, Google Research, Brain team We are pleased to announce that TensorFlow.js for React Native is now available for general use. We would like to thank everyone who gave us feedback, bug reports, and contributions during the alpha release and invite the broader community of React Native developers to try it out! What is React Native?JavaScript runs on a wi
export type StoreState = { hoge: { hoge: 'hoge' } fuga: { fuga: 'fuga' } } StoreState の型定義方法は数通りありますが、この様な型定義があることが前提です。 普通に書くとこうなる この条件でuseSelectorを利用してみます。useSelectorの Generics に従い、都度StoreStateを import し、それを注入しています。なんだかあまりイケてません。 import { useSelector } from 'react-redux' import { StoreState } from '../store' const Container: React.FC = () => { // const _hoge: "hoge" const _hoge = useSelector< St
Pesto has been discontinued Follow us on Twitter for updates on what's next.
We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features. If you’ve read any of my previous “build your own React” posts, the difference is that this post is based on React 16.8, so we can now use hooks and drop all the code related to classes. You can find the history with the old blo
ライブラリの場合は「拡張に対して開いている」ほうが良いので、Interfaceのほうがいいと考えているため。 A second more important difference is that type aliases cannot be extended or implemented from (nor can they extend/implement other types). Because an ideal property of software is being open to extension, you should always use an interface over a type alias if possible.
In this article, we are going to create a Chrome extension with TypeScript. We will be using React for the popup. It will be easier to understand this article if you have at least a basic knowledge of building apps with webpack and TypeScript, and if you have previously created a Chrome extension. 🚧 Create the FoundationsOpen your terminal on the folder you want to use and init your project with
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く