Build strongly typed polymorphic components with React and TypeScript - LogRocket Blog
In this detailed (and explanatory) guide, I’ll discuss how to build strongly typed polymorphic React components with TypeScript. We’ll cover the following sections: Real-world examples of polymorphic components Chakra UI’s as prop MUI’s component prop Building a simple polymorphic component Problems with this simple implementation The as prop can receive invalid HTML elements Wrong attributes can
ReactのComponentProps型を使って不要なPropsとお別れしよう！！ | Reactおじさんブログ
ReactのComponentProps型を使って不要なPropsとお別れしよう！！2022-10-202022-10-21 どうもReactおじさんです。 ブログをリリースして満足していましたが、記事を執筆しないと価値が無くなってしまうので、だらけずにアプトプットしていこうと思います。 今回は汎用コンポーネントの作り方です。 一般的な汎用コンポーネントの作り方フロントエンドエンジニアであればコンポーネント作成は避けて通れない道ですよね、、 今回のメインに行く前に一般的に作られているコンポーネントの作り方をおさらいしましょう。 ボタンコンポーネントの場合import type { FC, ReactNode } from "react"; type Props = { children: ReactNode; onClick: () => void; }; export const But
React TypeScript Material UI のインラインスタイルで型エラーにハマる - かもメモ
Material ui の Modal のサンプルを TypeScript にコピペしたら JSX でインラインスタイルの指定に CSS のオブジェクトを渡している箇所で形エラーになってしまった const style = { // インラインスタイルに使う CSS }; const MyComponent = () => { return <div style={style} /> // => style={style} の箇所が型エラーになる } 環境 typescript@4.1.6 react@17.0.2 @mui/material@5.2.7 結論 通常の JSX にCSS のオブジェクトを渡す際は React.CSSProperties の型をつける Material UI の sx に渡す CSS のオブジェクトは as const するか SxProps<Theme> の
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=
【初心者】React × TypeScript 基本の型定義
はじめに ここ最近TypeScriptの学習をしていまして、その学習記録をZennに投稿し続けていました。 その中で、TypeScriptの基礎学習の最後として投稿した以下の記事では、TypeScriptを用いてReact開発をする際に最低限必要となるであろうTypeScriptの型について簡単にまとめました。 TypeScript 学習記録 #8（Reactに関わる型定義） 先述の記事を書いている際、TypeScriptを用いたReactの基本的な型定義について網羅的にまとめている記事がまだまだ多くないように感じたため、今回「React × TypeScriptの基本の型定義」について改めてまとめ直してみることにしました。 TypeScriptの基礎学習を終え、これからTypeScriptを利用してReactやNext.jsでの開発をしてみようという方の参考になれば幸いです。 そこそこ長
React with TypeScript Cheatsheet
Table of Contents:· Table of Contents: · How to type React props ∘ Creating a type alias for the props ∘ Typing optional props ∘ List of types for React component props · How to type React function components · How to type React hooks ∘ Typing useState hook ∘ Typing useEffect and useLayoutEffect hooks ∘ Typing useContext hook ∘ Typing useRef hook ∘ Typing useMemo hook ∘ Typing useCallback hook ∘ T
TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
【検証】React.FC と React.VFC はべつに使わなくていい説
こんにちは、クレイの正岡です。 コロナ禍が始まってから小学生時代以来のゲーム生活を送っています。ゲームボーイと呼んでください。 さて、今回は React × Typescript でコードを書いている人／書こうとしている人に向けて、Reactコンポーネントの型定義について頭の片隅に置いておいて欲しい情報を共有したいと思います。 寝ながら使えてしまうReactコンポーネントの3つの型 () => JSX.Element 型 interface Props { text: string } const Hoge = ({ text }: Props) => { return ( <p>{ text }</p> ) } 上記のように返り値の型を特に指定していない場合、 このコンポーネントは JSX.Element型 を返す関数（ () => JSX.Element ）として返ります。 React
create-react-appで React + Typescript な環境を構築する - Qiita
はじめに facebook社公式のReactプロジェクト生成ツールである create-react-app が 2018/10/29リリースの v2.1.0 でTypeScriptをサポートするようになりました。 とても簡単に React + Typescript の開発環境を構築できるようになっているので、その方法をまとめています。 よりよい方法やバグ等ございましたら、アドバイスいただけると光栄です。 尚、執筆時のバージョンは以下のようになっております。 最新の方法について知りたい方は 公式ドキュメント をご覧ください。
【React+TypeScript】Netflixのクローンを作るチュートリアル
このチュートリアルではNetflixクローンを作る過程で、React・TypeScriptの基礎やAPIを利用したWebサービス開発について学んでいきます。 【学べる事】 - Reactの関数コンポーネントとTypeScriptの基礎理解 - React Hooksによるstate管理 - Reactでの外部APIとの連携方法 - Postmanを使ったAPIテストの方法 - コンポーネント分割の考え方 - Tailwind CSSの基礎理解 - Vercelを使ったデプロイ方法 【余談】 また直接、プロダクトコードには関連しないですが、余談として以下の解説も行なっています。 - APIとは？ - HTTPステータスコードのついて - ReactフレームワークとReact環境の選択肢 - .envについて - 非同期処理について - スプレッド構文とは？ - 三項演算子 VS 条件式(if
2021年 は Fullstack Next.js 元年なので、有望な Next.js 系フレームワークを全部試した
この記事は、Next.js Advent Calendar 2020 の6日目。 突然だが、2021年 は Fullstack Next.js 元年になる。 その理由として自分は以下のものがあると思っている。 ベストプラクティスとしての TypeScript のデファクト化 Next.js の Dynamic Routes による動的パス、 getStaticProps/getServerSideProps による使い勝手の向上 Vercel によるISRの発明 prisma の成熟 Vercel / Serverless / Cloudflare Workers / Cloudrun 等による Node.js サーバーの運用コスト減 参考: Frontend Study #1: 基調講演 - Frontend 領域を再定義する Blog - Next.js 9.3 | Next.js R
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Social Network for Programmers and Developers
Making a UI Library with React & TypeScript
React + TypeScriptでpropsと型を便利に扱うTips集
Building a React app with TypeScript and Material Design