react-spring
With naturally fluid animations you will elevate your UI & interactions. Bringing your apps to life has never been simpler. Why Springs?We think of animation in terms of time and curves, but that causes most of the struggle we face when trying to make elements on the screen move naturally, because nothing in the real world moves like that. Springs don’t have a defined curve or a set duration. As A
React製のSPAのパフォーマンスチューニング実例
カギは社内事例にあり！？システム効率化を超えて運用ミスを激減させた件 2024.09.02 コーポレート 業務改善 業務設計 社内ICT
React Hooks をどう使っていくか - mizchi's blog
大きく、末端コンポーネントと全体アーキテクチャの視点がある。 末端コンポーネントでの Hooks ここはあまり議論の余地なく、setState で local state を持っているものや、 componentDidMount していたものを置き換えることが出来ると思う。 FC を class にせずにちょっとリッチにするのが簡単になる。 class の setState 相当 function Counter() { const [count, setCount] = useState(0); const onClick = useCallback(() => setCount(s => s + 1), []); return <button onClick={onClick}>{count}</button> } componentDidMount / componentWillUn
Apollo Client | The flexible, production ready GraphQL client for React, and all JavaScript and native apps.
Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI. Apollo Client helps you structure code in an economical, predictable, and declarative way that's consistent with modern development practices. The core @apollo/clie
今から始めるReact入門 〜 flux編 - Qiita
目次 今から始めるReact入門 〜 React の基本 今から始めるReact入門 〜 React Router 編 今から始めるReact入門 〜 flux編 ←★ここ 今から始めるReact入門 〜 Redux 編: immutability とは 今から始めるReact入門 〜 Redux 編: Redux 単体で状態管理をしっかり理解する 今から始めるReact入門 〜 Redux 編: Redux アプリケーションを作成する 今から始めるReact入門 〜 Mobx 編 はじめに この記事は"今から始めるReact入門" 記事の続編です。最初から読む場合は以下の記事からスタートしてください。 今から始めるReact入門 〜 React の基本 flux とは Flux とはユーザインタフェースを構築するためのアプリケーションアーキテクチャです。 React は状態管理についての
React で this.props.children に新しい Props を渡す - 無駄と文化
React でカスタムコンポーネントを作るとき、コンポーネントの子要素には this.props.children でアクセスできます。 この this.props.children はそのままレンダリングすることもできるのですが、何かしらの Props を渡したくなったらどうするのでしょうか。 ざっくり調べた感じ Stack Overflow とか海外のブログにしか情報が無いようだったのでまとめてみます。 TL;DR いきなり結論から、 this.props.children に直接 Props を渡すことはできません。 代わりの方法として、React.cloneElement() で React要素をクローンする時に Props を渡すことができるので、this.props.children をクローンしつつ Props を渡せばいいようです。 デモを用意しました。 デモ ソース リポ
React Nativeアプリのメモリリークを追いかける - Quipper Product Team Blog
モバイルエンジニアの@hotchemiです。 今回は少し前にReact Nativeアプリの開発中にメモリリークを調査、解決した体験が学びが多かったので調査の顛末を共有できればと思います。 概要 今回問題となったのは、上記の課題・宿題を管理する画面の開発でした。 QA中に発覚した問題としては、「アプリを操作していると特定の端末(主にiPhone5)でアプリが落ちたり、その他の端末でも次第に筐体が熱くなる事がある」というもので、表示するデータはそれなりにあるものの画像や動画を表示する画面ではないのでさすがにおかしいだろうという事と、プロセス起動から時間が経つに従い事象が発生・深刻化していくという特性を考慮しメモリのリークが発生しているという仮説を元に調査を開始しました。 モニタリング 「推測するな、計測せよ」の格言通り、まずはメモリの使用量を計測する所から始めてみます。 Native Rea
React製 SPA における パフォーマンスチューニング - SSSSLIDE
nodefest@2018.11.23 html5j@2018.11.25
Vueを昔触った後Reactをどっぷり触ってもう一回Vueを触ってReactに戻って得た感想
最近ReactとVueをどっちも触る機会があったり、「ReactとVueどう選定するの？」という問いを投げられ、スッと答えられなかったな、と後悔があったりしていたので、Vueを触って得られた感想をまとめてみる。 結論としてなにか新しいことを発見したというものではなく、世間で言われている事を自分なりに再構築しただけの結論になったと思う。 TL; DRVueからは全体的に優しさ（Gentleさ）を感じる事が多く、良い点だと感じた大規模になるときReactの堅牢さは魅力的。Vueが大きくなった時に支えられ設計が出来るかは個人的には懐疑的。「こうだったらVue、こうだったらReact」みたいな分岐点があるというわけではないので、最終的には好みになってくると思う。ぞうさんが好きかきりんさんが好きか。これまでのフレームワーク遍歴今回の話をするにあたって、僕と各フレームワークの付き合いをまとめておくと、
Reduxは不要ではないか？ - Qiita
僕の本職はサーバーサイドなのですが、半年くらいReactとReduxを使ったフロント部分を触ったので、書きたいと思います。 先にReact.jsについてですが、本家がチュートリアルをしっかりと用意しており、学習コストも高くなく、悪くないものだなと思いました。 しかし、Reduxが入った途端、めっちゃ複雑になった印象があります。chromeのプラグインを入れて開発するのが普通とか言われたのですが、そんなものを使わないと作業できないくらいに複雑で辛いなぁという印象です（Javascriptは、console.logがあれば、ほぼ開発できる気がします。） ここから先は、こんなこと考える人も居るんだなぁ程度で見てください。Reduxが好きな人はすごく嫌な記事かもしれません。その場合は、ここでそっ閉じしてください。 Reduxはモダンだから採用した これよく聴くのですが、本当に辞めてほしいです。jQ
Reactで作ったページにTwitterCardsとOGPのメタデータを埋める - sambaiz-net
Twitter CardsやOGPのmetaタグを埋めるとTwitterやFacebookにURLを貼ったときに上のように表示されるようになる(上はFacebookの例)。そこで、react-helmetでこんな感じで動的に埋め込んだんだが読んでくれない。 <Helmet title={'sambaiz.net'} meta={[ {"name": "twitter:card", "content": "summary"}, {"name": "twitter:site", "content": "@sambaiz"}, {"name": "twitter:title", "content": "sambaiz.net"}, {"name": "twitter:description", "content": "僕のホームページ"}, {"property": "og:title", "c
React VR | A framework for building VR apps using React
React VR lets you build VR apps using only JavaScript. It uses the same design as React, letting you compose a rich VR world and UI from declarative components. import React from 'react'; import {AppRegistry, Pano, Text, View} from 'react-vr'; class WelcomeToVR extends React.Component { render() { // Displays "hello" text on top of a loaded 360 panorama image. // Text is 0.8 meters in size and is
ReactとAngularのいいとこ取り？ 2017年こそ学びたいVue.jsの始め方
Angular、Reactと並んで海外で人気が高まっている「Vue.js」。ReactとAngularの開発経験がある著者がVue.jsをチュートリアルを通じて特徴をまとめました。2017年、新しく学び始めるきっかけにどうぞ。 2016年9月、人気のJavaScriptフレームワークVue.jsがv2をリリースしました。それ以来ぜひ使ってみたい、どのようなものか知りたいと思っていました。AngularとReactを使い慣れた者の1人としては、Vueが似ているところや違うところも知りたかったのです。 Vue.js 2.0はすばらしいパフォーマンスを誇ります。データサイズが比較的小さく（バンドルされるVueのランタイム版は一度最小化してgzip圧縮したら16KBしかありません）、Vueのvuexや、vue-routerのような付属の状態管理ライブラリーもアップデートされました。1つの記事ではと
React のソースコードを読んでみよう！ - マルシテイア
こんにちは id:amagitakayosi です。 株式会社はてなで主にフロントエンド開発を担当しています。 この記事では React 本体のコードを読んでみます！！ この記事は Reactアドベントカレンダー 2016 の7日目の記事です。 昨日は yutaszk さんで「react-router v4 でFlux アプリケーションをHot Module Replacement する」でした。 目次 はじめに (Kyoto.js の宣伝) 準備 ディレクトリ構造 monorepo Haste Gulp と Grunt コードリーディング react ReactComponent react-dom ReactMount ReactReconciler ReactCompositeComponent ReactDOMComponent まとめ おわりに はじめに (Kyoto.js の宣
React with Reduxによる大規模商用サービスの開発 / nodefest2016
東京Node学園祭2016で話したブッキングテーブルのやつ
フロントエンドの適材適所と、エンジニアは何を学ぶべきか
Kaizen Platform フロントエンドエンジニアの中村です。 現在開発中のプロダクトでは、フロントエンド開発のフレームワークに React + Redux を採用しています。 当初は自分が一人で開発していましたが、チームのRubyエンジニアの皆が次々と React を習得、気がつけばフロントエンドの機能実装も担うようになり、おかげでフロントエンド専門の自分はUIデザインの補佐 & UXの向上へ手が回せるようになりました。 弊社のビジョンは『21世紀の新しい雇用と働き方の創出』ということで、会社の壁を越えた適材適所を目指しているのですが、社内でも「適材適所」が進んでいるというわけです。 畢竟、開発チームの皆さんが仕事しやすいよう、技術基盤の整備に邁進するのですが、新しいツールやライブラリを導入するにも適宜判断が必要になりまして、じゃあ何をどう選ぶかについて意見を持てる & 説明ができ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React 副作用分割パターン - mizdra
GitHub - apollographql/react-apollo: :recycle: React integration for Apollo Client
React Starter Kit – Glitch – Medium
Material UIを使ってカッコいいUIのReactアプリケーションを作ってみた
