Manusha Chethiyawardhana, Technical writer and Developer If you are a React developer in Europe, good news — you're in high demand! Europe's IT worker shortage is projected to grow, meaning job openings for React developers are on the up and up. That being said, it's always important to expand your skillset to stay up to date with the latest in the world of React to be a competitive player in the
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取
こんにちは。技術部クックパッドサービス基盤グループのkaorun343です。我々のチームでは レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 にて紹介したとおり、レシピサービスを Next.js ベースの新システムへと移行しています。今回はこの新システムの CSS の話 です。 背景 クックパッドのレシピサービスを Next.js と TypeScript で置き換えはじめた当初、CSS については Next.js に標準で組み込まれているCSS in JS ライブラリである styled-jsx を使っていました。プロジェクトが大きくなりはじめたタイミングで 「CSS の技術選定を考えなおしてもいいかもしれない」とチームの中で話し合い、改めて技術選定をしました。 技術選定 結論として、本システムでは CSS in JS ライブラリのem
Context API と useReducer で custom hook を作る時のテンプレート2020-12-10 Context API と useReducer で custom hook を作る例が見つからなくて色々と思考錯誤をしていたのですが、現時点で自分なりにたどり着いた答えを紹介します。 フォルダ構成とそれぞれの役割 context, reducer, hooks で分けています。ただこだわりはなく、実際にはフォルダ構成はなんでもいいと思いますし、手を抜きたい時は Context のファイルに reducer を書いたりしています。 それでも技術的な関心には分離できるのでそのように分けることを意識しています。 context Context の作成と Provider でラップできる関数を作ります。 import { createContext, Dispatch, Re
開発初期に「どのスタイリング手法でいくべきか」などとよく悩むと思います。 筆者ならそこで「悩むよりもとりあえず書き始めよう」と言いたいところですが、規模が大きいプロジェクトなどでは途中でスタイリング手法を変えようとすると大きな負担になったりと柔軟な変更ができないことがあります。 だがしかし！！ Google先生で調べようものなら 「CSS-in-JSをやめた理由」 「CSS Modulesをやめた話」 などなど... じゃあ何ならええねん！ そもそもReactにおけるスタイリング手法は多種多様で、時代によって流行が移り変わっていくものでもあり、Googleのトップに来るのは古い情報ばかりです。 そんな悩めるあなたにこの記事では筆者が利用したことのあるスタイリング手法を、CSS-in-JSやCSS Modulesに限らず、筆者の使用感もふまえて紹介していきます。 古い情報だけでなく、zero
Mihaela for WorksHub Posted on Apr 13, 2021 • Updated on Oct 11, 2021 Introduction: Over the years, the massive growth of React.JS has given birth to different state management libraries, amongst other things. The state management libraries available in React at our disposal at the time of this article are enormous. Therefore, knowing what state management library to choose for a particular projec
Are you building or planning to build a React application, and need some way to handle your state? Then you are spoiled for choice. The state management scene might have been calming down after its initial explosion in 2014, but there are still plenty of both stable and cutting edge alternatives to look into. Redux has been the market leader for years now, but thanks to developments in both React
If you’re not yet familiar with the useState and useEffect hooks, I highly recommend checking them out. They are the most commonly used hooks, which are essentially how React now manages state in (what used to be considered “stateless”) functional components. In a recent interview, I was asked to refactor one of my Class components into a functional component. As I began building out the functiona
こんにちは。フロントエンドチームの金野と申します。 食べログでは現在、React+TypeScriptでフロントエンドのリプレースを進めています。 以前の記事で、食べログではAtomic Designをどのように取り入れているかの紹介をしました。 しかし、最近のリプレース作業では、Atomic Designとは異なるディレクトリ構造を採用しています。 今回の記事では、「なぜAtomic Designをやめたのか」という理由と、「どのようなディレクトリ構造にしたのか」を紹介します。 Atomic Designを導入したねらいと導入した結果 上記の記事で言及した通り、当初Atomic Designを導入したねらいは以下になります。 1. コンポーネントの責務がより明確になる 2. 見た目の粒度だけでなく、ロジックの責務も明確にできる 3. 「ドメインが入るか／入らないか」。「抽象的か／そうでな
import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return <div>failed to load</div> if (isLoading) return <div>loading...</div> return <div>hello {data.name}!</div> } In this example, the useSWR hook accepts a key string and a fetcher function. key is a unique identifier of the data (normally the API URL) and will be passed to f
Auth0 Marketplace Discover and enable the integrations you need to solve identity Explore Auth0 Marketplace If you're bootstrapping a new React application today, ingrained habits might lead you to pick Redux. After all, you need to manage the state. Should you start with Redux, though? That has become a valid question. The latest versions of React have improved their offerings for state handling
先日、VioletというTumblrクライアントアプリをReact Native + Expoで作りました。iOSとAndroidに対応していて、先日無事に審査が通り、現在App StoreとGoogle Playで公開しています。 ※有料アプリですが、もし良かったら買って使ってみてください！ 2021年にまさかTumblrアプリ！というのはさておき、開発の上でのもろもろを書いておきます。 経緯 もともとTumblrが好きで、スマホでよくTumblrを見ています。しかし、特にAndroidには純正アプリを含めて、「ここがもう少しこうだったらいいのにな」というアプリが多く、ならば自分が一番使いやすいTumblrクライアントアプリを作ろう、と思ったのがきっかけです。 開発当初はAndroidをメインで使っていましたが、iPhoneもよく使っていました。そこで、どうせならiOS/Androidの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く