react-konva - declarative canvas components for React
High quality exports into data URLs, image data, or image objects import { Stage, Layer, Rect, Circle } from 'react-konva'; export const App = () => { return ( // Stage - is a div wrapper // Layer - is an actual 2d canvas element, so you can have several layers inside the stage // Rect and Circle are not DOM elements. They are 2d shapes on canvas <Stage width={window.innerWidth} height={window.inn
【React】React.lazy + React.Suspense + React Routerを使ったローディング画面実装とコード分割 - 7839
React の SPA を実装する際に、画面遷移時にローディング画面を挿入したいことがある。今回、React v16.6 から利用可能になったReact.lazy と React.Suspense を初めて使ってみたので、備忘録として残しておく。 React.lazy とは React.Suspense とは React.lazy + React.Suspense + React Router の実装 まとめ 関連資料 React.lazy とは React.lazy を使用することで、動的に読み込んだコンポーネントを通常のコンポーネントとしてレンダリングすることができるようになる。 // 従来のimport import OtherComponent from './OtherComponent' // React.lazy + Dynamic import const LazyComp
Reactを自作しよう
この記事は Build your own React を翻訳したものです。 Reactを1から書き直していきます。 実際のReactコードのアーキテクチャに従いますが、最適化機能と必須ではない機能は今回は実装しません。 Step 1: createElement関数 Step 2: render関数 Step 3: 並列モード Step 4: ファイバー Step 5: Render Phase と Commit Phase Step 6: 差分検出 Step 7: 関数コンポーネント Step 8: Hooks Step 0 復習 最初にいくつかの基本的な概念を確認しましょう。 React、JSX、およびDOM要素がどのように機能するかをすでに理解している場合は、この章はスキップしても構いません。 今回は、次のわずか3行のコードをReactアプリの例として使用します。 const ele
フロントエンド（React Testing Library）で TDD（テスト駆動開発）をする
私はフロントエンドエンジニアとして働いてはいるのですが、巡り合わせが悪いのでしょうか？まともなテストを書いたことがないんですよね。まあ、それもでテストくらい書けないとなぁ。なんて思ってはちょいちょい調べたりする日々を過ごしていました。 そんなある日、たまたま TDD（テスト駆動開発） についての動画を視聴してみました。 TDD 自体は知ってはいて、なんとなく知っているくらいの知識ではありましたが、分かりやすい説明とその思想が好きで、のめり込むように見てしまいました。 その後も何度か視聴して、フロントエンドでも TDD したいなと考え始めました。 普段テストすら書いていないのにいきなり TDD とも思わないこともなかったですが、実際に普段自分がさわっているようなコードに落とし込んで書いていくと、テストする本当の意味というものが、より正確に理解できてきたような気がします。 そんなテスト初心者の
安全に React Hooks を使用する - Qiita
React Hooks はとても便利で、Custom Hooks を上手く実装することで、再利用性の高いコードを、簡潔に実装することができます。 しかし、Hooksを不用意に使用してしまうと 意図しない無限ループに陥ったり、正しくStateが反映されなかったりすることがあります。 useCallback を使い無限ループを避ける 例えば以下のようなDivの大きさを取得するuseRectというCustom Hooksについて考えてみます。 const useRect = () => { const [rect, setRect] = useState<ClientRect | DOMRect>(); const ref = useRef<HTMLDivElement | null>(null); useEffect(() => { const target = ref.current; if
Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPAN トップ
React Hooks Jest + enzyme + act で useEffect を含むコンポーネントのテストする - かもメモ
react-create-app で作成した React Hooks を使ったアプリケーションのテストのメモ TL;DR 下書き途中にしたまま数ヶ月が経過してしまったので、少し情報が古くなってしまってるかもですが書きかけていた Jest + enzyme + act で React Hooks のテストをしてみたエントリーを揚げます🍤 Jest Jest · 🃏 Delightful JavaScript Testing GitHub - facebook/jest: Delightful JavaScript Testing. Facebook 製 JavaScript のユニットテストツール群。 Snapshot Test などさまざまな単体テストを書くためのfunction群と、テストを実行するテストランナーが含まれている。 create-react-app で作成したアプリには
Effective React Hooks - 東京ラビットハウス - BOOTH
みんな大好きReactの、新しい作り方 React Hooks についての解説書です。 第一版: 技術書博覧会（技書博） 第二版: 技術書典7 実用的なアプリを2本交えて解説する本です。 1. いつでもどこでも使えるメモ帳 (Firebase + PWA) https://github.com/erukiti/sample-editor/ 2. JavaScriptが動くサンドボックス（Cryber-Dojoみたいなやつ） https://github.com/erukiti/sandbox-editor 本書は2019年2月に正式リリースされた新しい仕組みであるReact Hooksについて解説するものです。 React Hooksの特徴は、コンポーネント作成をシンプルにできることです。 React Hooksは段階的に導入することもできます。必ずしも全てのコンポーネントをReact H
React使い必見！ Immutable.jsでReactはもっと良くなる | Wantedly Engineer Blog
Reactを導入して半年近くが経ちましたWantedlyでは、今年の初めからReact(+Redux)の導入に取り組み始めたので、気付けば半年近く立っていることになります。今自分がこの記事を書いているエディタから、Wantedly Adminのチケット画面まで、ある程度大きなアプリケーションを開発してきました。 そこで今回は、チームで継続的に開発していく過程で遭遇した問題と、それを解決するために導入したImmutable.jsについて紹介します。 増え続けるCallbackとAction、肥大化するStoreReactとセットで語られることが多いFluxアーキテクチャ。ここでは詳しい説明は省略しますが、とてもシンプルな考え方なので、チュートリアルなどで簡単に学ぶことができます。しかし、実際にチームで開発していくと、たしかに動いてはいるけど、綺麗とは言い難いコードが増えてしまいました。 Ac
ReactとImmutable.jsで関数型を体験してみて思ったこと #scripty06
2016/9/14の勉強会にて発表された資料です。 SCRIPTY#6 ～フロントエンド紳士・淑女のための勉強会～ http://scripty.connpass.com/event/38935/Read less
お前らのReactは遅い - Qiita
煽りタイトルですみません。 最近、Reactのプロジェクトのページを動かしていて、 もっさりしてる（レンダリングの負荷が高いな）と思ったので どうやったら無駄なレンダリングを減らせるか思考錯誤したことをまとめました。 preactとか別ライブラリの話はしません。 よかったらこちらもどうぞ ReactJSで作る今時のSPA入門（基本編） 2019年07月06日追記： ブラウザのレンダリングの仕組みに関して良記事があったので先に一読しておくことをおすすめします。 良記事１：実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか 良記事２：ブラウザレンダリング入門〜知ることで見える世界〜 １ピクセルがブラウザに表示されるまで：Life of a Pixel 2018 この記事に関してはReactのDOMツリー（レイアウト）レンダリングに関する最適化戦略です。 2020年02
Reactで開発するチームが共通認識しておきたい重要な概念 - KitchHike Tech Blog
SFC, Redux, HOCなどコンポーネント指向とReact開発のキーワード CTOの Shoken です。キッチハイクでは2年前にRailsへのReact導入、1年半前に0ベースからReact Nativeでアプリ開発を始めました。この記事では、React, React Nativeで開発しているチームが共通認識したいReactの重要な概念について紹介します。 2018/11/07 追記（はてブコメントより） Reactリポジトリで名称の変更が行われ、変数名やクラス名が変更されました。いままでの Functional Component が Function Component となり、 Stateless は使わなくなって Function に統一されるようです。 Terminology: Functional -> Function Component #13775 Before
Vueを昔触った後Reactをどっぷり触ってもう一回Vueを触ってReactに戻って得た感想
最近ReactとVueをどっちも触る機会があったり、「ReactとVueどう選定するの？」という問いを投げられ、スッと答えられなかったな、と後悔があったりしていたので、Vueを触って得られた感想をまとめてみる。 結論としてなにか新しいことを発見したというものではなく、世間で言われている事を自分なりに再構築しただけの結論になったと思う。 TL; DRVueからは全体的に優しさ（Gentleさ）を感じる事が多く、良い点だと感じた大規模になるときReactの堅牢さは魅力的。Vueが大きくなった時に支えられ設計が出来るかは個人的には懐疑的。「こうだったらVue、こうだったらReact」みたいな分岐点があるというわけではないので、最終的には好みになってくると思う。ぞうさんが好きかきりんさんが好きか。これまでのフレームワーク遍歴今回の話をするにあたって、僕と各フレームワークの付き合いをまとめておくと、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
8 React Open-Source projects to learn and become a React.js Developer
GitHub - jaredpalmer/razzle: ✨ Create server-rendered universal JavaScript applications with no configuration
React Hook Form - performant, flexible and extensible form library
宣言的UI
Jenkins Design Language (JDL)
React製のSPAのパフォーマンスチューニング実例
Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ
