Reactで社内向けUIライブラリ開発・ビルド・公開・布教入門【2024年】
会社で複数の新規事業を立ち上げる機運が高まったことをきっかけに社内向けUIライブラリを開発し、限定公開して利用を始めました。 本記事ではReactで社内向けUIライブラリを開発・ビルド・公開・布教するためのアレコレを共有します。 以下のような話題について知りたい方に特に読んでほしいです。 Private Packageの作り方、配布の方法のイメージがつかない方 CommonJSとES Modules、今はどちらでビルドするのがいいのか知りたい方 ライブラリの作り方について網羅的に知りたい方 前提 利用側のアプリケーションはNext.js固定を前提とする Tailwind CSSを内部的には利用する 利用側のアプリケーションはパフォーマンス（Lighthouseスコア）重視することが多い 社内の様々なレベルのエンジニアがContributeする可能性がある 端的に言うと、社内のプライベートリ
React Libraries for 2024
Follow on FacebookReact has been around for a while. Since then, a well-rounded yet overwhelming ecosystem of libraries evolved around the component driven library. Developers coming from other programming languages or libraries/frameworks often have a hard time figuring out all the libraries for creating web applications with React. At its core, React enables one to create component-driven user i
【2023年】SWR & TanStack Query比較
はじめに 今回はSWRとTanStack Queryの比較によってそれぞれの特徴と違いを整理したいと思います。背景としてネット上にある両者の比較記事は2022年以前のものが多く、当時に比べSWR2.0がリリースされたことなどで比較の観点が変化したように感じました。改めて整理することで技術選定の参考になればと思います。 前提 今回は以下のバージョンを前提にします。（2023/08/26時点でLatest） SWR v2.2.0 TanStack Query v4.34.0 また、私自身はTanStack Queryを業務で1年ほど扱ったことがありSWRは全く経験がない状態です。この記事はどちらが優れているかを示すためのものではなく、あくまで客観的に比較することを目的にしています。 目次 ここでは以下の3つの観点から比較を行い考察をします。 interfaceでの比較 機能面での比較 キャッシ
React 周辺ツールの React v18 サポート
方針 対応中のものは GitHub で watch できるようにできるだけ issue か discussion を貼る なにか見つけた情報あったら気軽に貼ってください！ 他にまとまっている情報
react-router 作り方
history で自分だけの最強のルーターライブラリを作ろう！ react-router は history というライブラリを内部で使用しています。ブラウザの history API の抽象化を提供するのが目的のライブラリです。 react-router v5 の API に useHistory というカスタムフックがあります(v6 から名前が変更されています)が、それはまさに history ライブラリの実体を取得するための関数になっています。 ルーティングに関する以下の処理は history ライブラリ内部で行われています。 現在の URL から Location オブジェクトを作成する 履歴の操作を行う 履歴の変更を検知してコールバックを実行する react-router は React 用のインターフェイスを提供しているに過ぎません。 つまり、 history をベースに Re
React State Management Libraries and How to Choose
The idea of state is one of the trickier things to nail down when you’re starting with React, and as your app grows, so do your state management needs. In this post I’ll give you the Grand Tour of state management options in React and help you decide which one to use in your project. What is State? Just so we’re on the same page, let’s talk about state for a second. Every interactive app involves
Rewriting Recoil from scratch
Published September 9, 2020 - (Updated October 5, 2022) Recoil is a slick new React library written by some people at Facebook that work on a tool called "Comparison View." It came about because of ergonomics and performance issues with context and useState. It's a very clever library, and almost everyone will find a use for it - check out this explainer video if you want to learn more. At first I
Crank.js | Introducing Crank
By Brian Kim – Published April 15, 2020 After months of development, I’m happy to introduce Crank.js, a new framework for creating JSX-driven components with functions, promises and generators. And I know what you’re thinking: oh no, not another web framework. There are already so many of them out there and each carries a non-negligible cost in terms of learning it and building an ecosystem to sur
What’s new in react-query v1.0 - LogRocket Blog
react-query v1.0 was released on 26 February, which brought about a change in the react-query API and all-new dedicated devtools. In this post, I will be discussing the following changes on: Query keys and query functions useQuery Hook The new queries operation handler, queryCache react-query-devtools A comprehensive list of the updates (mostly minor changes) can be found on the changelog. Moving
プロダクト間共通の React コンポーネントライブラリを運用する話 - SmartHR Tech Blog
こんにちは、 フロントエンドエンジニアの @nabeliwo です。 弊社には SmartHR というプロダクトの他に SmartHR の従業員 DB を利用して開発・提供される SmartHR Plus アプリ (以下、 Plus アプリ)というものがあります。 SmartHR CTOが語る中長期戦略。徹底的なアプリ開発とAPI対応で「プラットフォーム化」促進へ - SmartHR ガイド 既に多くの Plus アプリがリリースされており、そのほとんどのプロダクトのフロントエンドは React x Redux という技術スタックで構成されています。 オンライン雇用契約 カスタム社員名簿 ラクラク人事レポート etc Plus アプリは毎回新規でプロジェクトを立ち上げて開発していくことになります。 とはいえブランディングの観点から見ると、基本的なトンマナや UI パーツは SmartHR
Drupal JavaScript Initiative: The Road to a Modern Administration UI | Lullabot
Resources Articles Drupal JavaScript Initiative: The Road to a Modern Administration UI It's now been over 10 years since Drupal started shipping jQuery as part of core, and although a lot of Drupal's JavaScript has evolved since then it's still based on the premise of progressive enhancement of server-side generated pages. Meanwhile, developing sites with JavaScript has made huge strides thanks t
recomposeではじめるReact Higher-order Components(HoCs) - Qiita
最近、recompose を使用して React を書いており、ある程度知見が溜まって来た為、整理の意味を込めて纏めてみました。不備、不明点等がありましたら、コメント頂ければ幸いです。 TL;DR HoCs 、recompose とは recomposeの代表的な API の紹介・使い方 setDisplayName：Component に任意の名前付与 withStateHandlers：State 、handler の管理 compose：複数の recompose API を束ねる lifecycle： React のライフサイクル管理 pure：不要なレンダリング削減(パフォーマンス向上) onlyUpdateForkeys：不要なレンダリング削減(パフォーマンス向上) branch：Boolean を使用した Component の出し分け renderNothing： 常に n
A guide to React forms and events using Formik - LogRocket Blog
So, you’ve started building React apps and now you’re wondering how to work with forms in React? Fret not. In this tutorial, I will explain how React deals with forms and events. I’ll also walk you through how to write code that helps get input from different form components and submit the data in a React application. Finally, I’ll show you how to use the Formik library to build all kinds of forms
shallow-equal for Object/React props
オブジェクトとReactのProps向けのShallow(浅い) equalライブラリを書きました。 Shallow Equalは対象のオブジェクトのプロパティをそれぞれ1段だけ比較することを言います。 ものすごく単純に書くならば次のようなことをするライブラリです。 const object = {}, targetObject = {}; const isEqualed = !Object.keys(object).some(key => { return object[key] !== targetObject[key]; }); const { shallowEqual } = require("shallow-equal-object"); shallowEqual({ a: 1, b: 2 }, { a: 1, b: 2 }); // => true shallowEqual({
Rethinking drag and drop
introducing react-beautiful-dndDrag and drop is an intuitive way of moving and rearranging things. We at Atlassian have recently released react-beautiful-dnd which makes drag and drop for lists on the web more beautiful, natural and accessible. PhysicalityThe core design idea of react-beautiful-dnd is physicality: we want users to feel like they are moving physical objects around. This is best ill
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS in JSとしてVanilla-Extractを選んだ話と技術選定の記録の残し方
UI Fabric is evolving into Fluent UI - Microsoft 365 Developer Blog
Redirecting to https://www.godaddy.com/engineering/2018/04/04/isomorphic-asset-system-for-react-and-react-native/