Ultimate React Component Patterns with Typescript 2.8
This blogpost was inspired by React Component Patterns post live Demo If you know me, you already know that I don’t write javascript without types, so yeah I’m really into Typescript, since version 0.9. Beside typed JS I really love React, and when React + Typescript are combined, I just feel like in heaven :D. Full type safety within whole app and VDOM templates it’s just marvelous and joy to wor
Render Props – React
These docs are old and won’t be updated. Go to react.dev for the new React docs. Render props are used in modern React, but aren’t very common. For many cases, they have been replaced by custom Hooks. The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React ele
Building a mobile app in Rust and React Native, Part 1: Project Setup
The first post in series ‘building a mobile app in Rust and React Native’. In this series I will describe process of connecting mobile front-end written in React Native with business logic written in Rust. As an introduction to this article, I suggest reading a great series from John Gallagher: Building an iOS App in Rust, Part 1: Getting Started with Rust The app we are building is a mobile walle
コンポーネント時代のi18n
サービスを海外展開したい場合、国際化対応を行う必要性がある。これをi18n対応と呼ぶ。Reactでフロントエンドを構築する場合、i18nのための多くのライブラリがあるが、yahoo製の react-intl が実質デファクトスタンダードだ。react-intlを実際に使っている例として、スター14000超えのReactボイラープレートであるreact-boilerplate やSNSの マストドン がある。 しかし、実際にreact-intlを使うとidの管理が非常に面倒であることがわかる(他すべてのi18nライブラリも同様だが)。react-boilerplateを参考にidの管理を見てみる。 まず、react-boilerplateでは、ディレクトリベースでコンポーネントを管理している。その中で、messages.jsにdefineMessagesを使いidとデフォルトメッセージを定義
React/Redux/Node.jsのSSR/SPAを速くする6つのチューニングポイント
React/Redux/Node.jsのSSR/SPAを速くする6つのチューニングポイント：大規模ブログサイト表示速度改善 大解剖（終）（1/3 ページ） 2004年から続くブログサービス「アメブロ」が2016年9月にシステムをリニューアル。本連載では、そこで取り入れた主要な技術や、その効果を紹介していく。今回は、React/Redux/Node.jsを使ったIsomorphic JavaScript特有のパフォーマンスチューニング手法や実際にあった問題および、その解決方法について。 2004年から続くブログサービスである「アメブロ」は、2016年9月にシステムをリニューアルしました。本連載「大規模ブログサイト表示速度改善 大解剖」では、そこで取り入れた主要な技術や、その効果を紹介しています。 アメブロのリニューアルでは、React/Reduxを採用し、サーバサイドとフロントエンド両方での
React Fiber現状確認
F8でもReact Fiberについての発表もあったので、気になっている人も多いReact Fiberの現状について簡単に書きたいと思います。 Reactの完全な書き換えということで、使い方も変わってしまうと思っている人もいると思いますが、内部実装の書き換えであり、利用者から見える部分ではほとんど変更はありません。 もちろん、react-fiberというパッケージをインストールするというわけでもありません。 むしろ、v16の時点では現在の実装と互換性を保たれているので、v16がリリースされた時に、v15.5を使っていればほとんどそのままv16に更新できると思います。 そして、言われなければ内部実装が変わっていることに気づかないのではないかと思います。 とりあえずどうなるのか知りたい人向けのまとめ v16では、基本的にはv15の時と同じように動作します。逆に言うとパフォーマンスもそんなに変わ
Twitter Lite and High Performance React Progressive Web Apps at Scale
A look into removing common and uncommon performance bottlenecks in one of the worlds largest React.js PWAs, Twitter Lite. Creating a fast web application involves many cycles of measuring where time is wasted, understanding why it’s happening, and applying potential solutions. Unfortunately, there’s never just one quick fix. Performance is a continuous game of watching and measuring for areas to
React is Slow, React is Fast: Optimizing React Apps in Practice
React is Slow, React is Fast: Optimizing React Apps in Practice React is slow. I mean, any medium-size React application is slow. But before you start looking for alternatives, you should know that any medium-size Angular of Ember application is slow, too. And the good news is: If you care about performance, it's fairly easy to make any React application super fast. Here is how. Mesuring React Per
GitHub - chvanikoff/reph2: React/Redux + Phoenix (Elixir) (now with auth)
(The demo is available 18h a day due to Heroku free nodes limitations, if you see Application Error message - this is the case) React + Redux + Phoenix simple application This application is evolution of RePh and now it provides authorization and different frontend bundles for landing page and application: styles, JS and images are all different. Authorization/registration is done via websockets a
You Might Not Need Redux
People often choose Redux before they need it. “What if our app doesn’t scale without it?” Later, developers frown at the indirection Redux introduced to their code. “Why do I have to touch three files to get a simple feature working?” Why indeed! People blame Redux, React, functional programming, immutability, and many other things for their woes, and I understand them. It is natural to compare R
【Electron + react + flowtype】TweetDeckライクなpixivクライアントPixivDeckをつくった - Qiita
electron + react + flowtype + styled-components + webpackでpixivのデスクトップアプリを書いた。 前半にアプリについて、後半に技術的なことを書くので、どんな技術を使ったかのみ知りたい人は前半飛ばしてください。 GitHub - akameco/PixivDeck: TweetDeck like pixiv client for desktop ダウンロードページ スクリーンショット TweetDeckライクなpixivイラストビューア スクロール(IntersectionObserverで画像の遅延読み込み) カラムの移動(react-sortable-pane bokuwebさんに感謝) タグをクリックで新しいカラムの追加 Lightbox ドロワー その他機能 検索+◯◯users入りを自動表示 履歴機能 コンテキストメニュー
TypeScript✕ReactJSで型安全なComponentを手に入れる
React.Proptypesに感じている不満React組み込みのProptypesによる型検査は、実行時検証であり、アプリケーションを起動して、実際にコンポーネントを描画してみるまでエラーに気づけない。 また、React独自の機能であるので、他の下層DOMライブラリでも同様の型検査をできるわけではない。 さらに、Proptypesはコンポーネントに定義するので、型定義がViewに紐付いてしまう(ドメイン知識がViewに紐付いてしまう) 型定義の多くはドメイン知識に紐付いており、ViewではなくModel(State)レイヤーで定義したい。 そこで本稿ではTypeScriptの静的解析の支援を受けて、型安全なコンポーネントを定義することでこの問題を解決する方法について説明したい。 ※なお、ReactにはFacebook謹製のFlowTypeがあるが、あくまでアプリケーションの主体はMode
Building a React/Redux App with JSON Web Token (JWT) Authentication
Many people have written to me asking for the client-side follow up to the JWT authentication API we built (view the tutorial on building the authentication part of the API here, and view the tutorial on creating a real time chat API here). Today, we are finally going to build it. I have recently found myself very busy between my personal projects, consulting work, and having just gotten married a
React.js in patterns
Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript. Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser Long time I was searching for a good front-end framework. Framework that will help me write scalable and easy to maintain UI. Even though React is just a library for rendering it comes with so many benefits that I can easily say
React NativeでNative機能をSwiftで書いて使うには - console.lealog();
React Nativeの対応が追いついてないNative機能を使うには、自分でブリッジを実装する必要がある。 ただ公式のDocsはほぼObj-Cのことしか書いてなくて、Swiftでもできるよ！って一言くらいしかない。 もちろん調べてもろくな例が出てこない！ かといってObj-CよりSwiftの方が親しみやすい気がするなーということで・・・、四苦八苦しながらやり遂げたことをメモ。 アプリエンジニアではないので、非効率なコードや勘違いしてることを書いてる可能性もありです！ 必要なファイル いちおうドキュメントはコレ。 Native Modules 基本的な流れはココに書いてあるけど、Swift版の端折られ感よ！ 要約すると、 `XXX.swift`で実装する `XXX.m`でエクスポートする それらを認識させる`MyProject-Bridging-Header.h`を用意する この3つが必
ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較 | POSTD
ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較 (編注：2016/7/27、いただいたフィードバックをもとに記事を修正いたしました。) 概要 この投稿は、HOCパターンを利用してみたいという 上級ユーザ 向けの記事です。もしReactが初めての方は、まず Reactのドキュメント を読むところから始めるとよいでしょう。 Higher Order Componentsは、さまざまなReactライブラリにとって価値があることがわかっている素晴らしいパターンです。この投稿で、HOCとは何か、できることは何か、制約は何か、どのように実装するのか……という点について詳細に見ていきます。 付録として、関連トピックについても見ていきます。それらは、HOCを学ぶ上での中核にはならないものの、カバーしておくべきだと私が思っているもので
Mixins Considered Harmful – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. “How do I share the code between several components?” is one of the first questions that people ask when they learn React. Our answer has always been to use component composition for code reuse. You can define a component and use it in several other components. It is not always obvious how a certain pattern can be solv
私がMVCフレームワークをもはや使わない理由
数ヶ月前、私はなぜここにたどり着き、何が可能かを理解する旅に出ました。この旅は、私にアプリケーションアーキテクチャ、MVCという強烈な宗教に対する疑いをもたらしました。そして、リアクティブ、関数型プログラミングの真の実力に触れたのです。また、シンプルさに集中する旅でもあり、私たちの産業はうまくやっているという考えを捨てる旅でもありました。どんなことを見つけたか興味がある方もいるでしょう。 私たちの見ている画面の背後にあるパターンはMVC –Model-View-Controllerです。まだウェブがなくソフトウエアアーキテクチャも分厚いクライアントが単一のデータベースに原始的なネットワークでアクセスするのがせいぜい、という時代にMVCは生まれました。そして数十年後、MVCはまだ現役であり、衰え知らずでオムニチャネルアプリケーションの開発に使われています。 Angular2のリリースの前にM
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - amazon-archives/aws-mobile-react-native-starter: AWS Mobile React Native Starter App https://aws.amazon.com/mobile
React Path Toggler