Nuxt3で個人的にuseFetchよりuseAsyncDataを推したい理由
はじめに Nuxt3の安定版がリリースされ、しばらく経った。現在筆者もNuxt3を活用しているプロジェクトがある Nuxt3は以前の2系にも増して更に強力な機能を公開しており、快適な開発体験を提供してくれる 代表的な機能としては Auto-imports Data-fetching utilities Zero-config TypeScript support Universal rendering (Server-side rendering and hydration) といったものがある。またNitroという新しいサーバーエンジンが導入され、より高いパフォーマンスでのレンダリングが可能になった そしてNuxt3では2つの新しいAPIであるuseFetchとuseAsyncDataが導入されている(useLazyFetchとuseLazyAsyncDataも含めれば4つ)。useFe
React.ComponentProps 型を積極的に使おう
Atomic Design でいう Atoms に相当する、汎用コンポーネントについての小話です。次の様に Props 型定義を用意し、解説している記事をよく見かけます。<input />タグを使わずコンポーネント化している理由は style を施すためかと思いますが、このコンポーネントが受け取れる Props は限定的で、メンテナンスコストが高いためお勧めできません。 type Props = { value: string; onChange?: React.ChangeEventHandler<HTMLInputElement> onBlur?: React.FocusEventHandler<HTMLInputElement> } export const Input = ({ value, onChange, onBlur }: Props) => ( <input value=
Alfredの代替としてRaycastを使っている - 詩と創作・思索のひろば
新春ツール入れ替えシリーズです。macOS における Spotlight 的なランチャーツールとして Alfred を長いこと使ってきたが、最近 Raycast を使ってみてこれがよかったので、以来ずっと使い続けている。 Raycast - Supercharged productivity 開発者のための便利ツールという売り文句のようで、そういう点がまさに気に入った。 カレンダーの次の予定が表示される まずこれがいい。これだけで十分使える。ランチャーを起動したときにカレンダーの次の予定を表示してくれる。Enter でそのまま Meet や Zoom を開いてくれるのでキーボードから手を離す必要がない。 もともとカレンダーの確認には Dato を使っていたし今も使ってるが、これでミーティングへのアクセスがかなりよくなった。 コミュニティベースの Store で機能を追加できる https:
10 React Developer Tools You Might Have Missed
Here’s a few tools you might have missed, out of my React tooling shortlist that deal with performance, visibility and debugging. Note that some of the more generic, less DOM dependent tools apply to React on React Native as well. React Sight React Sight is a React visualization tool with a live state and prop tree viewer that complements React devtools.
React Server
Getting Started with React Server The easiest way to get started is with our yeoman generator. Open your terminal and type: # install yeoman npm install -g yo # install the react-server generator npm install -g generator-react-server # make a new react-server project in the CURRENT directory yo react-server # run the new app npm run start # go to http://localhost:3000 That hooks you up with react-
React.Component – React
These docs are old and won’t be updated. Go to react.dev for the new React docs. These new documentation pages teach modern React: React.Component This page contains a detailed API reference for the React component class definition. It assumes you’re familiar with fundamental React concepts, such as Components and Props, as well as State and Lifecycle. If you’re not, read them first. Overview Reac
React.js cheatsheet
React is a JavaScript library for building user interfaces. This guide targets React v15 to v16. Components Components import React from 'react' import ReactDOM from 'react-dom' class Hello extends React.Component { render () { return <div className='message-box'> Hello {this.props.name} </div> } } const el = document.body ReactDOM.render(<Hello name='John' />, el) Use the React.js jsfiddle to sta
React.js and Dynamic Children - Why the Keys are Important
React.js and Dynamic Children - Why the Keys are Important … and check why 5600+ Rails engineers read also this React.js and Dynamic Children - Why the Keys are Important Recently I’ve been building a pretty dynamic interface based on google analytics data for one of our customers. There was a bug that I couldn’t quite figure out because of my wrong understanding of how react works. In the end it
Introducing Relay and GraphQL – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. Data fetching for React applications There’s more to building an application than creating a user interface. Data fetching is still a tricky problem, especially as applications become more complicated. At React.js Conf we announced two projects we’ve created at Facebook to make data fetching simple for developers, even
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
