仮想DOMの内部の動き | POSTD
PreactでVDOMがどのように機能するかを示すフローチャート 仮想DOM（VDOMあるいはVNode）は魅力的です✨ しかし複雑で、理解が難しいものでもあります???? React や Preact 、その他同様のJSのライブラリでは、これをコアで使っています。残念ながら私は、これを詳細かつ分かりやすく説明している優れた記事や資料を見つけられませんでした。ですから、自分で書こうと思い立ったのです。 備考：これは非常に長い記事です。内容をシンプルに表すために画像を山ほど挿入しましたが、それゆえにさらに長い記事になってしまいました。 私は Preact のコードとVDOMを使いました。容量が小さくて済み、将来、簡単に見なおすことができるからです。しかし、概念のほとんどはReactにも共通していると思います。 皆さんがこれを読んだ後、仮想DOMをよく理解できるようになり、できればReactや
Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | POSTD
Buffer のメンバーはReactが大好きで、フロントエンドの多くのコードベースを徐々にReactに移行させています。ReactにFluxを加えると、モジュラー形式の小さなアプリでできた複雑なプロダクトを構築するための、とても健全な方法になると思います。そこで、１つ１つの新しい小さなアプリと機能を、大規模な構造体に追加される、Reactの新しいブロックと考えます。 私は最近、このような新機能の１つに取り組んでいますが、React＋Fluxのアプリケーションを作るのがいかに簡単であるかと、その理由について、さらに夢中になってしまいました。Reactを使うと有意味なコンポーネントを集めてUIを宣言的に構築するのが楽になり、Fluxはその混成体に妥当なデータフローをもたらします。 複雑なアプリケーションを作るときに発生する課題について多くの考察がなされましたが、React＋Fluxの組み合わせ
Mixins Are Dead. Long Live Composition
When React 0.13 came out, everybody freaked out. The introductory post made it clear that mixins are on their way out: Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts. There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins were dropped
React Native - アプリ設計 - Qiita
今日はReact Nativeでどのようにアプリを作っていくのかを個人的見解で説明したいと思います。 アプリ設計 0) アプリの概略を決める マーケットチャネル、収益モデルなどのビジネス面を考慮して、どのようなアプリを作るか考えます。React Nativeの場合、どのプラットフォームでリリースするのか、iOSなのか、Androidも作るのかを決めないといけません。 1) 技術的なリサーチ それを実現するために、そのアプリにどのような機能が必要でどのモジュールを使えば実現できるのかをリサーチします。Facebook LoginはReact Nativeにあるかなどを調べます。ただ昨日説明したようにNativeのコードとの連携は難しくありません。どこをネイティブで書かなければならないのかを考え、手を動かしつつ、コアな技術の動きを把握します。 現時点でAndroidアプリを作るには公式にサポー
Container Components
One React pattern that’s had the impact on my code is the container component pattern. In Jason Bonta talk High Performance Components, there’s this little gem about container components. The idea is simple: A container does data fetching and then renders its corresponding sub-component. That’s it. “Corresponding” meaning a component that shares the same name: StockWidgetContainer => StockWidget T
React Native - Unit Test part2 (Redux test with Jest) - Qiita
昨日はUnitテストの設定方法からComponentのユニットテストまで説明しました。今日は、ロジックのテストを解説します。React Nativeでアプリを作る場合は、Fluxアーキテクチャを選ぶと思います。Reduxはその中でも秀逸であり、Testの方法もしっかりドキュメントされています。 アプリのロジックをReduxを用いてテストしていきます。実はここはReact Nativeに限った話ではないかもしれません。しかし、Objective-Cやswiftでしっかりロジックのテストを書くのは難しい（私のswiftスキルがないのが原因だと思いますが。。）ように感じます。個人的にはアプリに状態を持たせて、それをテストできるというReduxの真骨頂がここにあるような気がしています。 Testing store with dispatch Reduxのドキュメントではactionとreducer
How we unit test React components using expect-jsx - Algolia Blog | Algolia
React was designed to solve one problem—how to build applications with data that changes over time. Considering the as-you-type search experience offered by Algolia wherein whole results pages, hits and refinement links alike, are updated at each keystroke, React was the obvious choice when we needed a tool to build out our new library of UI widgets: instantsearch.js. We quickly struggled, however
Tutorial: Tic-Tac-Toe – React
You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you’ll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React. This tutorial is designed for people who prefer to learn by doing and want to quickly try making something tangible. If
Is React Faster Than AngularJS?
No. Hard to believe? Most developers and decision-makers take it for granted that ReactJS offers high performance and incredible speed much better than other frameworks like AngularJS and EmberJS. It has gotten to the point that no one even questions things like this: (Source) But if you ask yourself where this belief comes from, you might be surprised. Everyone says it This doesn’t give us much t
乗るしかない！Reactのビッグウェーブに！─isomorphic tokyo meetupに参加してきた
乗るしかない！Reactのビッグウェーブに！─isomorphic tokyo meetupに参加してきた 白石 俊平（HTML5 Experts.jp編集長） おはようございます。編集長の白石です。 昨日（2015年4月30日）、isomorphic tokyo meetupに参加してきました。 というのも実は近々、HTML5 Experts.jpでは「Webアプリケーション・アーキテクチャ」に関する特集を行う予定なのですが、そこでキーワードとして挙げられていたのがisomorphic。 サーバサイドとクライアントサイドでコードの共有を促進するのが主な目的の一つ、というところまでは理解できたのですが、実際のところ、アーキテクチャはどう変わるのか？ それを探りたいと思っていたところ、ちょうどよくイベントの開催がアナウンスされていたので、急遽取材させていただきました。 取材を快く受け入れてく
Bring CommonJS to your asset pipeline
Bring CommonJS to your asset pipeline A few weeks ago, Marcin recommended Gulp as the Rails asset pipeline replacement. Today I am going to tell you how you can benefit from CommonJS modules in your Rails application with asset pipeline enabled. You don’t have to disable asset pipeline in your Rails application in order to use CommonJS module loading in your JavaScripts. One of tools that allows y
Making Your First Webapp with React
React has gained a lot of popularity recently and has attracted a large and active community. This results in a vast wealth of reusable components for it that will save you time when coding. The library itself encourages writing loosely coupled code that is modular and composable. In this tutorial, I will show you how to create a small application and how to split it into discrete components that
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
株式会社Donuts
GitHub - nock/nock: HTTP server mocking and expectations library for Node.js
どこでも React する
MUI: The React component library you always wanted
GitHub - mui/material-ui: Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
ReactとFluxのこと // Speaker Deck
React概論
react-markdown-editor, react-tagsinput