個人開発で参考になるNext.jsリポジトリ10選
OpenStatus - ステータスページ App Router Turborepo Drizzle Clerk tRPC Tailwind shadcn/ui LLM Report - OpenAI モニタリング App Router Prisma NextAuth shadcn/ui Stripe Dub - URL 短縮 App Router Turborepo Prisma NextAuth Tailwind Stripe slug - URL 短縮 Prisma NextAuth tRPC Tailwind Cal.com - 日程調整 Turborepo Prisma NextAuth tRPC Tailwind Taxonomy - ブログ App Router Prisma NextAuth Tailwind Rowy - ローコード GUI Firebase Dorf -
Tremor
React components to build charts and dashboardsReact components to build dashboards20+ open-source components built on top of Tailwind CSS to make visualizing data simple again. Fully open-source, accessible and customizable.20+ open-source components built on top of Tailwind CSS to make visualizing data simple again. Fully open-source, accessible and customizable.
useEffect内でsetTimeoutを使用する時の注意 - Qiita
TL;DR useEffect内でsetTimeoutを使用するときは、ちゃんとクリーンアップ処理を書きましょう。 useEffect(() => { let timeoutId = setTimeout(() => { // 5秒経過したら閉じる setIsOpen(false) }, 5000) // こういう処理を書く + return () => { + clearTimeout(timeoutId) + } }, []) クリーンアップ処理がないと起こりうるつらさ コンポーネント状態が更新され、かつその状態がsetTimeoutの設定に依存している場合、意図しない動きをするケースがあるからです。 例えば数秒待機して自動で閉じるモーダルを実装するとします。 この場合、コンポーネントの実装としては以下のようになるかと思います。 const Modal = () => { const
【React】react-helmet-asyncを使ったheadの設定方法 - URLごとに切り替える
今回はreact-helmet-asyncを使ってheadの設定方法について説明します。 前提条件は以下 VSCode上でcreat react appを使ってReact、TypeScriptの環境で行うESLint（Airbnb）とPrettierを追加して、VSCode上の拡張機能と連動させているURLごとにheadの中を変更させる（titleやdescription、canonicalなど）OGPの設定はしない 環境は以下です。 macOS Catalina v10.15.5Visual Studio Code v1.57.0React v17.0.2TypeScript v4.5.5react-router-dom v6.2.2react-helmet-async v1.2.3node.js v16.13.1
React Hooks でカスタムフックを作ってみよう
React Hooks とは React 16.8 で追加された新機能が React Hooks です。 関数コンポーネント内でも、state や様々な React の機能を使うことができます。 React Hooks を使うと、基本的[1] に関数コンポーネントだけで実装ができます。 カスタムフックとは フックは JavaScript の関数であり、カスタムフックは独自に作ったフックです。 フックを使うと以下のようなメリットがあります。 コンポーネント内で複雑になったロジックを分離できる ロジックを再利用しやすくなる テストが簡単になる では、実際にカスタムフックを作ってみながら、メリットを体験してみましょう。 カスタムフックを作ってみる いくつかフックを使うためにはルール（後述）がありますが、まずは作ってみましょう。 説明のための サンプルコード を用意しました。 ボタンをクリックする
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> の
具体例で理解するuseMemoとuseCallbackの使い方。Reactパフォーマンスチューニング | Enjoy IT Life
コンポーネントや関数のメモ化を行うことで、不要な計算やレンダリングを抑えられるためパフォーマンス向上が期待できます。 useMemoやuseCallbackはメモ化の機能を提供するフックです。 関数コンポーネントにおいて、メモ化を活用したパフォーマンス改善をする場合はuseMemoやuseCallbackを利用します。 今回はuseMemo・useCallbackの利用方法について具体例をもとに紹介します。 reactは17.0.1を利用しています。 今回利用するサンプルアプリケーションについて パフォーマンスが改善されていることを確認するため、ボタンをクリックした回数が表示されるアプリケーションをサンプルとして用意しました。2つボタンを配置し、片方だけクリックの処理を重くしています。 パフォーマンスチューニング前のサンプルアプリケーションでは、クリックの処理のコストがコンポーネント全体に
【Recoil】Reactの状態管理ライブラリ基礎学習 ~リファクタ編~ - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは、ラクス入社1年目のkoki_matsuraです。 本日は前回記事の「【Recoil】Reactの状態管理ライブラリ基礎学習 ~第三部~」で作成したToDoアプリのRecoil部分をリファクタするとともにパフォーマンスを上げるためにどうするかについてご紹介させていただきます。 もし、前回の記事を読んでいない方は下記のリンクから読んでいただけると嬉しいです。 tech-blog.rakus.co.jp アジェンダは以下の通りになっています。 Recoilを用いたToDoアプリの問題点 複数人でRecoilを使うときに意図しない状態変更が行われる可能性 無駄な部分まで走る再レンダリング 解決方法 「複数人でRecoilを使うときに意図しない状態変更が行われる可能性」の解決方法 「無駄な部分まで走る再レンダリング」の解決方法 コード修正 TodoStateの修正 Atomの正規化 変更
MUI コンポーネント (v5) に独自のスタイルを設定する (sx prop、styled)
MUI v5 以降のカスタムスタイル設定MUI v5 以降でコンポーネントにカスタムスタイル (CSS) を割り当てる方法には、大きく下記の 2 つのやり方があります。 sx prop を使う方法MUI のコンポーネントには sx prop が定義されていて、ここにスタイルオブジェクトを渡すことで、個別にスタイルを調整できます。つまり、使い捨てのスタイル設定を行う方法です。sx prop は HTML 要素本来の style プロパティと比べて簡潔な構文で記述できます。例えば、margin や padding の設定用に 1 文字 (m, p) のプロパティ名が定義されていたりします。styled API を使う方法既存のコンポーネントをラップする形で、スタイル拡張したコンポーネントを生成します。sx prop を使った方法に比べて再利用性が高い方法で、複数個所で使用するコンポーネントにス
MUI入門
はじめに 実務でMUIを本格的に使用することになりそうなので、MUIに入門していきたいと思います。 なお、筆者はMUIの前身のMaterial UIは少し使用したことがあり、Material Designについてはエアプです。それらを踏まえて対戦よろしくお願いします。 本記事で触れること パッケージ構成からみるMUIの概要 MUIのカスタマイズ MUIで何ができるのか その他のUIコンポーネントライブラリと比較した場合のMUIの立ち位置 本記事で触れないこと MUIの導入手順 MUIの具体的な使用方法 パッケージ構成からみるMUIの概要 ※この章は基本的には以下のページを和訳したものとなります。 まずMUIには以下の2種類のプロジェクトが存在します。 MUI Core MUI X みなさんがMUIと聞いて思い浮かべるのはMUI Coreの方だと思います。 MUI Xは複雑なユースケースに対
プロパティ"........."は型'JSX.IntrinsicElements'に存在しません。 - Qiita
import styled from "styled-components"; const Title = () => { <titlefont>Hacker News</titlefont>; }; const titlefont = styled.div` color: black; font-size: 20px; font-weigh: normal; `; export default Title; この状態でエラーが発生してしまいました。 内容としては プロパティ"........."は型'JSX.IntrinsicElements'に存在しません。 です 何が原因であったか 結果として、コンポーネントを大文字から始めないといけないようです。 参考先 他にもこのようなエラーに注意した方がいい、などあればコメントお願いします。
[React] `<></>`とは何のことか
class Hoge extends React.Component { render() { return ( <> <span>Hello</span> </> ); } } 親要素が不要なケースで使用するFragmentとしての認識はあったが、これをどういう使い分けをするのか知らなかった。（ググラビリティが悪すぎて検索できない） 答え フラグメントの省略記法のことらしい。 class Hoge extends React.Component { render() { return ( <React.Fragment> <span>Hello</span> </React.Fragment> ); } }
![[React] `<></>`とは何のことか](https://cdn-ak-scissors.b.st-hatena.com/image/square/e3bcc1ec05c5657b4d3b3264d3403ea0c5b7d93c/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--znCcDV17--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%25255D%252520%252560%25253C%25253E%25253C%25252F%25253E%252560%2525E3%252581%2525A8%2525E3%252581%2525AF%2525E4%2525BD%252595%2525E3%252581%2525AE%2525E3%252581%252593%2525E3%252581%2525A8%2525E3%252581%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Ahiro%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2M2MzA3N2E1OTAuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Material-UIのwithStylesでカスタマイズ
はじめに Material-UI のコンポーネントのスタイルを変更したいなーと思った際に、公式ドキュメントだけでは"withStyles"の利用方法が分かりづらかったので。 色々と使い方はあるみたいだが、とりあえず基本の基本をピックアップ。 withStyles の基本 下記のように withStyles によってコンポーネントを作成し配置する。 const CustomComponent = withStyles({ root: { // ここにスタイルを書いたり }, label: {}, // etc... })(カスタムしたいコンポーネント) // コンポーネントの配置 <CustomComponent /> 直接 className や style にスタイルを指定してもよいが、同じレイアウトのものを複数作成したり、変更点が多い場合にスッキリしたコードが書けるのでおすすめ。 ro
こんにちはMUI！ 新しくなったMaterial UI v5
どうもよしです。久しぶりの投稿になります。 元々、Material Design をベースとした UI コンポーネントライブラリである、Material UI の v5 が遂にリリースされました！ v4 からどう変わったのか自分でも試すなど、さらっと見てみたので、ここにまとめてみました。 ※2023/11/25 MUI の更新に伴い、MUI v5.0系のドキュメント参照したほうが良い部分はリンクを差し替えました。 Material UI とは？ 元々、Google の Material Design をベースに開発された、UI コンポーネントライブラリです。 Material UI の概要や v4 の機能に関しては、以前に記事を書いていますので、よろしければそちらをご参照ください。 ※今回の記事は、主に以下の公式ブログ記事をもとにしています。引用文の出典もそちらです。 そのため、すでにそち
Reduxのstateが更新されない - Qiita
という振る舞いを実装したい。 元にしたcode sandbox 製作者に感謝m_ _m ディレクトリ構造とかは今回簡易的な試すだけなのでご了承下さい。 ①Aのbuttonを実装する Redux(Toolkit)知ってるよって人は飛ばしてください。 hogeSlice というfileにreducerやら、stateが格納されていてexportしてます stateを使うときは useSelector で参照する exportした関数は dispatch(hoge(payload)) で実行する Reduxと比べて非同期処理がシンプルに書ける この辺りが特徴かと思います。 import React from "react"; import { useSelector, useDispatch } from "react-redux"; import { plusA } from "./count
React | Redux(Actions, Reducers, Store)による状態管理 - わくわくBank
Reduxによる状態管理の動作確認を行います。Actions, Reducers, Storeなどの役割を実際の処理を通じて確認します。 Reduxの3原則 動作確認をする前に、Reduxの3原則を復習しておきます。 https://redux.js.org/introduction/three-principles にてReduxの3原則が説明されいています。 Single source of truth State is read-only Changes are made with pure functions Reducerは純粋関数でなければならないなどのReduxを利用する上での注意点が述べられています。
2022年秋版 最新React/Typescript開発環境の作成 - Qiita
vite4がリリースされましたが、プロジェクト作成時に「vite@latest」を指定しているため問題ありません。 vite4は、以下を参照してください。 https://vitejs.dev/blog/announcing-vite4.html はじめに Reactの開発環境は、CRA(Create React APP)がよく使われますが、CRAは沢山のモジュールの整合性の確認などのため、アップデートがリリースされるまでの間隔が結構あります。 また、使われているモジュールをアップデートするとエラーに悩まされたりします。 ゼロからReactの開発環境を作成していたのですが、いろいろとトライを繰り返すうちに以下の方法に落ち着きました。 比較的短時間で環境が作成できますし、全て最新のモジュールが使えます。 Vite nodejsを用いたJavaSriptプロジェクトは、、Webpackなどでプ
ステートフックの利用法 – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 state：コンポーネントのメモリ useState フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 フックの導入のページで以下の例を挙げてフックの紹介を行いました： import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactのトレンドよくわからん
フラグメント – React