[B! react] kk42のブックマーク

How to Build a Calculator App Using React Native – A Step-by-Step Tutorial

kk42 2023/12/26

リンク

[React,react-hooks,closure]そのstate更新がうまくいかないのは、stale-closureのせいかも? - Qiita

[React,react-hooks,closure]そのstate更新がうまくいかないのは、stale-closureのせいかも?JavaScript TypeScript非同期処理React react-hooks はじめに Reactで非同期処理を用いてStateを更新する際、処理の書き方に気をつけないとクロージャの性質によって最新の値を基にStateが更新されないことがある。 useEffectで値のSubscribeをしてるときなどは、特に注意が必要である。(筆者はこれでハマったため) 本稿は、stale-closure(古くなったクロージャ)が引き起こすstate更新での問題とは何か？とその解決策を解説する。 stale-closureによってどんな問題が起きるか例えば、以下のようにsetIntervalを用いて1秒ごとにカウントアップを行うプログラムがあったとする。 CodeS

kk42 2022/11/28

リンク

A Visual Guide to useEffect

Here is what happens when you try to fetch data directly from the body of a functional component in React 👇 Why does this happen and what tools does React offer to solve this probl em? Side effects If your React component affects anything outside of itself, it’s called a side effect. Side effects shouldn’t happen during component render. Therefore they do not belong to the body of a functional com

kk42 2022/01/14

react

リンク

Atomic Designをやめてディレクトリ構造を見直した話｜食べログフロントエンドエンジニアブログ

こんにちは。フロントエンドチームの金野と申します。食べログでは現在、React+TypeScriptでフロントエンドのリプレースを進めています。以前の記事で、食べログではAtomic Designをどのように取り入れているかの紹介をしました。しかし、最近のリプレース作業では、Atomic Designとは異なるディレクトリ構造を採用しています。今回の記事では、「なぜAtomic Designをやめたのか」という理由と、「どのようなディレクトリ構造にしたのか」を紹介します。 Atomic Designを導入したねらいと導入した結果上記の記事で言及した通り、当初Atomic Designを導入したねらいは以下になります。 1. コンポーネントの責務がより明確になる 2. 見た目の粒度だけでなく、ロジックの責務も明確にできる 3. 「ドメインが入るか／入らないか」。「抽象的か／そうでな

kk42 2021/12/10

リンク

useEffect完全ガイド

あなたは Hooks を使って複数のコンポーネントを書きました。ちょっとしたアプリも作ったことがあるでしょう。満足もしている。API にも慣れて、その過程でコツも掴んできました。しかも重複したロジックを転用できるよう Custom Hooks を作り、同僚に自慢して見たり。でも useEffect を使う度、いまいちピンときません。class のライフサイクルとは似ているけど、何かが違う。そしていろんな疑問を抱き始めます。 🤔 componentDidMount を useEffect で再現する方法は？ 🤔 useEffect 内で正確に非同期処理を行う方法とは？　[]ってなに？ 🤔 関数をエフェクトの依存関係として記すべき？ 🤔 非同期処理の無限ループがたまに起こるのはなぜ？ 🤔 古い state か props がエフェクト内にたまに入るのはなぜ？私も Hooks を使

kk42 2019/09/13

react
redux

リンク

Re-ducksパターン：React + Redux のディレクトリ構成ベストプラクティス

Re-ducks というディレクトリ構成のベストプラクティスについてまとめる。Re-ducksパターンを使うことで、React + Redux を用いた開発がよりメンテナンスしやすいものになる。 Ducks パターン名前からもわかるように、Re-ducks は Ducks というパターンをベースにしている。 erikras/ducks-modular-redux Ducks パターンが解決すること： actionType、action、reducerが散らばっててつらい結局のところ actionType、action、reducer は密結合なので、ducksパターンではこれら3つを1つのファイルにまとめる。 // widget.js // Actions const LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widget

kk42 2019/09/09

リンク

Web最新技術がてんこ盛りのreact-native-domから目が離せない - ナカザンドットネット

パリで発表されていたReact向けプロダクトがあまりにも未来に生きていて興奮したので、紹介させてください。目次目次この記事のゴール想定読者はじめに今回ベースとするソースコード React Nativeは何をするツールか Reactは何をするツールか React DOMとReact Nativeの違い Reactアプリケーションを描画するものたち React DOMの役割 React Nativeの役割 1. ネイティブ処理系の上でJavaScript処理系を動かす 2. Reactを動かす 3. Reactから渡された差分をネイティブViewに適用する React Native DOMはどこがReact Nativeなのか React Native DOMのやばいところ6連発 ReactからはReact Nativeに見えてるのがやばい Objective-C実装をJavaSc

kk42 2018/05/26

リンク

私たちはなぜReactではなくVue.jsを選んだのか | POSTD

Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。レガシーなDrupalのシステム（qwintry.com）ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com）その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの）プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内最大の郵送先のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で

kk42 2018/02/21

リンク

これからReactを勉強する人が最初に見るべきスライド７選

React.js（以下、React）は、Facebookが作ったJavaScriptのビュー・ライブラリです。最近よく耳にするけどあまり理解していないという人も多いのではないでしょうか。そこで今回は、「Reactって最近よく聞くけど一体何？」「jQueryと何が違うの？」といった疑問にこたえてくれる初心者向けのスライドを厳選して紹介します。JavaScriptは苦手だけど概念だけは理解したいといった人のために、なるべくわかりやすいものを選んでいます。＊もし、「このスライドもおすすめ」というものがあったら教えてください。 Reactとは？なぜ人は必死でjQueryを捨てようとしているのかなぜjQueryを捨て、Reactを採用しようとするのかについて説明してくれるスライドです。ページ遷移のないシングルページアプリケーション（SPA）への需要が増えてきているといった最近のトレンド

kk42 2016/07/12

react

リンク

はてなブックマーク

タグ

関連タグで絞り込む (15)

reactに関するkk42のブックマーク (9)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス