Useful Patterns by Use Case | React TypeScript Cheatsheets
Wrapping/MirroringWrapping/Mirroring a HTML ElementUsecase: you want to make a <Button> that takes all the normal props of <button> and does extra stuff. Strategy: extend React.ComponentPropsWithoutRef<'button'> // usage function App() { // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.(2322) // return <Button type="foo"> sldkj </Button> // no error return <B
結局 React のコンポーネントにはどうやって型をつければ良いのさ - kk-web
React TypeScript Cheatsheet の Useful Patterns by Use Case の Wrapping/Mirroring に答えが書かれていました。 自分は function でなく const で作成することが多い(どっちが良いんですかね？)ので、以下のように書くのが良さそうです。 import React, { ComponentPropsWithoutRef, FC } from "react"; export type ButtonProps = ComponentPropsWithoutRef<"button"> & { specialProp?: string; }; const Button: FC<ButtonProps> = ({ specialProp, ...props }: ButtonProps) => { console.lo
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=
それSWRじゃなくてgetServerSidePropsでいいよねっていう場面の話
Next.jsでフロントエンドを作っているプロジェクトにSWRを導入した際に「SWRかgetServerSidePropsのどちらでデータ取得をすればいいのか迷う」みたいな意見があったので、チームで方針を作ったときに考えたことの話。 フロントエンドの構成については、バックエンドのREST APIを叩きに行ってデータを取得・更新する至って普通の構成。ただユーザーの認証をする必要があり、sessionの有無を見つつページの出し分けとかAPIの取得をする形になっている。認証部分はAWSのCognitoでクライアントにはnext-authを使用した。 データ取得の方針 データ取得・更新について、基本的にSWRを使用する方針にした。SWRについては周知の通りキャッシュ機構で高速にデータの表示ができるので使わない手は無いと思う。 また、next-authのuseSessionを使ってsession(に
究極のReact向けルーターライブラリ「Rocon」を作った - uhyo/blog
こんにちは。先月くらいからReact向けのルーターライブラリ「Rocon」を作っていて、この度alphaリリースという形で公開まで漕ぎ着けたので宣伝します。 現在のところ、以下のURLでチュートリアルを読むことができます。 このチュートリアルサイトはRoconを用いて作られています。 Roconチュートリアル: https://rocon.uhyohyo.net/Roconの特徴は非常に型安全であることです。 何よりも型安全性・型周りの快適性を優先してAPIが設計されています。 当然、TypeScriptと一緒に使うことが前提です。 また、Roconはreact-router-domの代替となることを意図しています。 そのため、Roconを使うべきとき・使うべきでないときをまとめると以下のようになります。 Roconを使うべきとき: 今react-router-dom等を使ってSPAを作っ
TypeScript and React
Welcome to this little primer on TypeScript and React! A match made in heaven! Why? JSX is syntactic sugar. Every JSX element you open and pass properties through, is nothing but a function call in React (or Preact or Vue or Dojo… you name it). This gives us one big advantage in TypeScript: JavaScript can be parsed, understood and evaluated. Which means you get all the tooling and compilation bene
TypeScript で書く React コンポーネントを基礎から理解する - Qiita
この記事は Recruit Engineers Advent Calendar 2019 の 23日目の記事です。 TypeScript のプロジェクトで React コンポーネントを書いていると、コンパイラに怒られることがたびたびあります。ネット上にあるサンプルコンポーネントが JavaScript で書かれていると、プロジェクトにもってきたときにコンパイルできないということはよくあるんじゃないでしょうか。any でコンパイラを黙らせることもできますが、せっかく TypeScript を使っているので、安全に解決したいよねってことでこのような記事を書きました。 型定義は @types/react@16.9.17 にしたがっています。目次をみて、この程度のことはもう知っているよという方は react-typescript-cheatsheet をみてください。React + TypeScr
業務で使える簡単なSSR + SPA のテンプレートを公開した - hiroppy's site
久しぶりのブログです。 よく Node.js の人と思われがちですが、普段は Node.js でのバックエンド開発はもちろんですが React や Vue を書いていますので、たまにはフロントエンドネタを投稿しようと思います。 GitHub - hiroppy/ssr-sample: A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App - GitHub ... リポジトリにあるコード見たほうが早いと思いますので、ここでは注意点等を列挙していこうかなと思います。 主な技術スタック de
React Higher-Order Components in TypeScript made simple
Note: this post was originally published on my Medium profile When refactoring a Higher-Order Component (HOC) in a TypeScript project at work, there was some confusion regarding how to write them properly. After a discussion with my friend and colleague Marek, I decided to write this guide for future reference. I hope it helps you too. What are HOCs? As per the official docs, HOC is a higher-order
Container ComponentをTypeScriptで書く - 僕は音楽ができない
react-reduxのContainer ComponentをTypeScriptで書き直した。 嫌いじゃないが、もう少しシンプルにならないものか。 途中でAtomからVS Codeに切り替えたが、 特にカスタマイズをしなくてもTypeScriptに対応していたり、 IntelliSenseがpropsやstateに対して効いてくれるのは助かる。 しばらく使ってみようと思う。 gistdcbb4d372e5fde5018a3c2a717fec90c 参考 Typesafe Container Components with React-Redux’s Connect and TypeScript
GitHub - wadahiro/bitbucket-browser: Viewer for Atlassian Bitbucket (formerly Stash).
{ "title": "Bitbucket Browser", "baseUrl": "/bitbucket-browser/bitbucket", "linkBaseUrl": "http://your-bitbucket-host/bitbucket", "debug": false, "items": { "project": { "displayName": "Project" }, "repo": { "displayName": "Repository" }, "branch": { "displayName": "Branch" }, "branchAuthor": { "enabled": false, "displayName": "Branch Author" }, "branchCreated": { "enabled": true, "displayName": "
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
react-redux の Hooks API に Generics は要らない - Qiita
GitHub - notable/notable: The Markdown-based note-taking app that doesn't suck.
GitHub - wexond/browser-base: Modern and feature-rich web browser base based on Electron
eShopOnContainersDDD/src/Web/src/app at e82bceb2b52d8573593784d5ce1a9a050f42326a · charlessolar/eShopOnContainersDDD
GitHub - wasd171/chatinder: Unofficial desktop messaging client for Tinder.
GitHub - birkir/hekla: Hekla for Hacker News (open source React Native app)
GitHub - RobinRadic/checkers: Checkers game written in Typescript using React.
React + TypeScript (+ Electron)でアプリを書き始めるときにやってること - Qiita
GitHub - emonkak/feedpon: A feed reader like LDR
