Journey with Icons Continues
[[toc]] About one year ago, I wrote a blog post Journey with Icons, sharing the tools I have made for solving my needs on using icons in frontend projects. During this period, the Vite along its community has evolved quite a lot. The mindsets of Vite have inspired many projects to come up with efficient and innovative solutions. In this post, I will share the continuation of my journey with icons
Web アプリ共通ライブラリ "React Shared Component" の紹介 | Wantedly Engineering Handbook
Wantedly のフロントエンドは React で書かれており、フロントエンドコードは複数のリポジトリに分かれています。 元々は一つのモノリシックなリポジトリでフロントエンドも管理していましたが、新規で作成するページの大部分は新しいリポジトリで書かれています。 そして、この新しいフロントエンドのリポジトリも、企業側管理画面、ユーザー側画面とで分かれています。 一方で、ヘッダーやサイドバー、フッターなどといったナビゲーションなど、リポジトリ間で共通の UI があります。 実装が重複しないよう、それらを Wantedly 共通の React コンポーネントライブラリに切り出しています。 以下は実例です。これらのページは異なるリポジトリで実装されてます。 一方、青色で囲われたヘッダーは共通なので、ライブラリの中で実装され、それを各リポジトリで呼び出しています。
Slinkity
To eleventy and beyond Follow along on Twitter for project updates ❤️ ⚠️ Slinkity is no longer maintained. The project owner (@bholmesdev) now works on Astro full-time. If you want to build component-driven content sites, give Astro a try! If you're committed to 11ty and want to use client components, consider 11ty's WebC project. Slinkity is the simplest way to handle styles and component framewo
Reactハンズオンラーニング 第2版
Facebookが開発したJavaScriptライブラリ「React」の解説書。2013年にオープンソース化されたReactですが、ここ数年で大きな変更が加えられ、またReactを取り巻くエコシステムも大きく変化しました。本書では実際に動くコンポーネントを作りながら、最新のReactの記法について解説しつつ、最新のツールやライブラリも紹介します。初心者から中上級者まで、Reactの今をすばやく学習することができます。 賞賛の声 まえがき 1章 Reactの世界へようこそ 1.1 本書のねらい 1.2 Reactの過去と未来 1.2.1 第2版の変更点 1.3 環境の構築 1.3.1 GitHubリポジトリ 1.3.2 React Developer Tools 1.3.3 Node.jsのインストール 2章 React学習に必要なJavaScriptの知識 2.1 変数の定義 2.1.1
Recoil 0.4 | Recoil
We are pleased to announce the release of Recoil 0.4 with configurable selector caches, improved API for transactions with multiple atoms, and other optimizations and fixes. Configurable selector cachesThe new cachePolicy_UNSTABLE property in selectors and selector families allows you to configure the caching behavior of a selector's internal cache. This property can be useful for reducing memory
Headless UI v1.4: The One With Tabs
We just released Headless UI v1.4, which includes a brand new Tab component, and new APIs for manually closing Popover and Disclosure components more easily. Tabs Earlier this year we started working on Tailwind UI Ecommerce, and we realized pretty quickly we were going to need to support tabs in Headless UI to be able to build the new interfaces we were designing. import { Tab } from '@headlessui
【LINE証券 FrontEnd】Recoilを使って安全快適な状態管理を手に入れた話
こんにちは。LINEフィナンシャル開発センター フロントエンドエンジニアの峯です。 先日新卒としてLINE証券プロジェクトに配属となり、最初のタスクとしてRecoilによる状態管理の導入に取り組みました。 その際、なぜRecoilにしたのか、また本番開発にRecoilを使うにあたって設計に気をつけたことなどを本記事でご紹介しようと思います。 技術選定 いままでの状態と課題 LINE証券フロントエンドではReact+Typescriptによる開発を採用しており、いままでのグローバルな状態管理にはUnstated を用いていました。 Unstatedでは Container classを状態の単位とし、その内部の stateを setState によって更新します。状態を使用したいコンポーネント側では、<Subscribe> コンポーネントによって情報を読み出すことができます。 一方ご存知の通
React Hooks in Action
Read it now on the O’Reilly learning platform with a 10-day free trial. O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers. Book description Build stylish, slick, and speedy-to-load user interfaces in React without writing custom classes. React Hooks are a new category of functions that help you to manage s
Fower
Atomic PropsWrite styles with Atomic Props, rapid to develop complicated UI by composing Atomic Props. Scoped styleBorned with scoped styles, So don't worry any conflicts due to the globalnamespace. Type SafePerfect support for TypeScript, which bring Type definition,IntelliSense,Self documentation.
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
tRPC - Move Fast and Break Nothing. End-to-end typesafe APIs made easy. | tRPC
Move Fast and Break Nothing. End-to-end typesafe APIs made easy.Experience the full power of TypeScript inference to boost productivity for your full-stack application.
How to Solve the Infinite Loop of React.useEffect()
useEffect() hook manages the side-effects like fetching over the network, manipulating DOM directly, and starting/ending timers. Although the useEffect() is one of the most used hooks along with useState(), it requires time to familiarize and use correctly. A pitfall you might experience when working with useEffect() is the infinite loop of component renderings. In this post, I'll describe the com
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mafs: React components for interactive math
GitHub - udecode/plate: Rich-text editor with AI and shadcn/ui
Release v1.0.0 · pmndrs/jotai
GitHub - joshwcomeau/use-sound: A React Hook for playing sound effects
Recoil 0.3 | Recoil
Cookpad Online Spring Internship 2021
Release Version 7.0.0 · react-hook-form/react-hook-form
GitHub - forgojs/forgo: An ultra-light UI runtime
