7章 Netlifyでいったん公開してみよう｜ReactとPythonでAPI販売サービスを作ろう
コンポジション vs 継承 – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 React は強力なコンポジションモデルを備えており、コンポーネント間のコードの再利用には継承よりもコンポジションをお勧めしています。 この章では、React を始めて間もない開発者が継承に手を出した時に陥りがちないくつかの問題と、コンポジションによりその問題がどのように解決できるのかについて考えてみます。 子要素の出力 (Containment) コンポーネントの中には事前には子要素を知らないものもあります。これは Sidebar や Dialog のような汎用的な “入れ物” をあらわすコンポーネントではよく使われています。 このようなコンポーネントでは特別な children という props を使い、以下のようにして受け取った子要素を出力するこ
create-react-app で作った Reactプロジェクト から Hello World (不要ファイル削除) - Qiita
Reactの開発環境を作るときに公式とかで使われる create-react-app で何かやるときに不要ファイル削除すること多いのでざっくりそのやり方のメモ 作ったところから不要ファイルを削除して Hellow World の表示までやってみる やることは大雑把にこんなかんじ．．． React プロジェクト作成 Win11 React プロジェクトから不要ファイル削除（./src直下削除） Hellow World 表示のjSを作成 index.js のみで表示 index.js から App.js 読み込んで表示 React プロジェクト作成 Win11 こちらのページ参考、Node.jsインストールからやってます React プロジェクトから不要ファイル削除（./src直下削除） 不要ファイル削除（./src直下削除） コマンドプロンプト or PowerShell で以下を入力して
きつねちゃん Ruby on Railsでアプリ作ったけど、本番環境への公開ってどうすればいいんだろう？ こんな悩みを解決します。 私は現在React + Ruby on RailsでWebアプリを開発しています。 フロントは全てReactで作り、Ruby on RailsはAPIモードで作ってます。 そして、ある程度形になってきたので、実際にサーバ上に公開してみて動作確認をしようとしたのですが、めちゃくちゃ苦労しました。 らけ 正直、開発よりもこっちの方が大変でした・・・ 出てくる情報のほとんどがDockerを使ったもの、それ以外はUnicornを組み合わせた複雑なものばかりです。 ローカルでDockerコンテナ内で開発していないのに、わざわざDockerコンテナ作るのも嫌だったのと、Dockerコンテナ上でサービス動かして、それを本番運用するのはちょっと怖かったためDockerを使った
Reactでeventの属性の取得 - Qiita
Select, Optionで各種属性を取得する方法に迷ったのでメモ。 見た目は下記のような最低限。 valueの取得 まずはvalue。普通にe.target.valueで取れる。 import React from 'react'; const items = [ { id: 1, name: "hoge", address: "tokyo", age: 11 }, { id: 2, name: "foo", address: "osaka", age: 22 }, { id: 3, name: "boo", address: "fukuoka", age: 33 }, ] function App() { return ( <div style={{ margin: 40 }}> <select name="username" + onChange={(e) => alert(e.t
react-nativeでiosアプリを開発していた時の話 最初は楽だからexpoで開発を進めていたが、ネイティブコードを記述する必要が生じたため急遽RNCLIでの開発環境に移行することになった。 expoではデータベースを用いるのに"expo-sqlite"というライブラリを利用していたが、RNCLIでは使用できないため、"react-native-sqlite-storage"を用いる必要があった。 生じたトラブル SELECTしてきたデータを正しく変数に格納できていない 具体的に見ていきましょう。まず、expo-sqliteのコードを示します。 const db = SQLite.openDatabase('DATABASENEME.db'); db.transaction((tx) => { tx.excuteSql( "SELECT * FROM TABLENAME;", [],
検証環境 Jest React Testing Library Create React App(上記が含まれるので) 背景 サードパーティ製のComponentを避けてテストを行うために、ComponentをMockする必要がありました。 特に、Amplify-uiなど事前設定が必要なComponentに対しては有効な手段となります。 テスト環境を作成 # 作業フォルダを作成 mkdir work && cd work # Package ManagerでCRAを利用してReact Applicationを生成する pnpm create react-app jest-app --template typescript # フォルダに移動 cd jest-app # componentsとtestフォルダを作成 mkdir src/components src/tests # Edito
ReactでSPA（Single Page Application）を実装してみる - ts0818のブログ
www.itmedia.co.jp 利用料金は、個人ユーザーは無料で利用可能。月間50回までのセキュリティスキャンも利用可能です。登録はメールアドレスのみで、AWSのアカウントも不要。 AWS版「GitHub Copilot」な「Amazon CodeWhisperer」が正式版に 個人ユーザーは無料、VSCodeに対応 - ITmedia NEWS ⇧ ありがたや、「GitHub Copilot」は有償になったから手が出せんかったけども、こちらを試してみますかね。 ReactとVue、選択に迷うよね JavaScriptのフレームワークが様々あるけれど、3大フレームワークと言うと、 Angular React Vue って感じになるとは思うのだけど、世界的にはReactが主流らしいですと。 最近、Vue 2.xから3.xでの破壊的変更があったせいで、移行作業に苦しめられた人にとっては、
こんなの作りました はじめに Reactで何か作てっみたいなと考えた際に、「どうせなら業務で役に立つものを作ってみよう！」ということで今回の「勤怠状況管理アプリ」を作成しました。 本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。 そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。 スキルレベル（筆者自身） HTML,CSS,JavaScript（実務経験2年） React 設計 必要な機能をざっとまとめてみました。 当日出勤・退勤したらボタンを押してステータスを変更する メンバーの全員分の勤怠状況を一覧で確認できる 初期表示で最低でも1週間分の出勤予定情報は表示させたい 不特定多数のユーザーが同時にアクセスすることがあるが、ユーザー認
私は2022年10月より実務未経験でフルスタックエンジニアとして事業会社に入社し、 現在はReactとRubyを用いたシステム開発に携わっています。 ReactとMUI（UIフレームワーク）を利用して開発に取り組む機会が多々あるので、 こちらでは「ReactとMUIを利用したログイン画面の作成方法」について紹介しようと思います。 開発環境は以下のとおりです。 OS : macOS Monterey 12.6 ブラウザ : Google Chrome テキストエディタ : VS Code React/React-dom : v 17.0.2 / v 17.0.2 MUI（Material-UI） : v 5.11.12 React学習を始める前に まずはじめにReact学習の最低限必要な知識として、「HTML」と「JavaScript」について理解している必要があります。この時点で「HTML
初めに バリデーションテストで直接useFormの挙動をテストするのが難しかったので「ObjectSchemaのテストができればform側の問題に限定できるんじゃね？」と思った次第。 コード jestを想定。例えば以下のformを考える。 export const UserSchema = object().shape({ name: string().trim().required(), age: number().required(), })
React公式チュートリアルの三目並べに追加機能を実装してみた #3（トグルボタンを追加しろ！編） - Qiita
はじめに はい、ということでReact公式チュートリアル追加機能実装第三弾やっていきたいと思います。 今回実装する機能はこちら↓ 「Add a toggle button that lets you sort the moves in either ascending or descending order.」（日本語訳：動きを昇順または降順に並べ替えることができるトグル ボタンを追加する。）です！ 、、、、どういう機能だ？？ 今のところ機能はこのようになっています。 このボード履歴のボタンの順序を並べ替えられるようになればいい、、のでしょうか？ はい、この記事ではそういうことにしておきましょう。（正しいニュアンスわかる人いたら教えてください(꒪ཀ꒪)） それでは早速実装に移っていきます！ 実装 実装の方針としては、useStateで順序が正になっているか逆になっているか状態を管理してあげ
目次 1. どんな人にオススメの記事?? 2. 自己紹介 3. まえがき 4. 作ったサイトについて 5. 使った言語やライブラリなど 6. どうやって勉強したの? 7. 作ったアプリの反省 8. 今回得たこと 9. 今後の展望 10. 終わりに 1. どんな人にオススメの記事?? この記事の読者対象は次のような方にオススメです Webアプリケーションを作ってみたいけど何から学べばよいか分からない ある程度HTMLやCSSは触れるけど、バックエンドの知識は全くない 2. 自己紹介 電気通信大学の学部4年生で情報系の専門です プログラミング歴については大学に入ってから始めたので3年ほどになります C++で競技プログラミングをしていて現在700台をうろうろしていて緑色を目指しています アルバイトはSaaSの企業でエンジニアをしています Web開発については何から始めてよいのか特にバックエンド側
React入門 - Qiita
はじめに Reactは、Facebookが開発したJavaScriptのライブラリで、ユーザーインターフェイス（UI）の構築に使用されます。Reactは、コンポーネントベースのアプローチを採用しており、再利用可能なUIの部品を作成することができます。 Reactの主な特徴は以下の通りです。 仮想DOM（Virtual DOM）：Reactは、仮想DOMを使用して効率的にUIを更新します。 仮想DOMは、実際のDOMの軽量なコピーで、変更の検出と適用を最適化します。 コンポーネントベース：Reactは、UIをコンポーネントに分割することを推奨します。コンポーネントは、独立した再利用可能な部品で、プロパティ（props）を受け取り、JSXを使ってレンダリングします。 単方向データフロー：Reactでは、データは親コンポーネントから子コンポーネントへと一方向に流れます。これにより、アプリケーショ
こんにちは。Wakka Inc.メディア編集部です。 Reactを使ってWebサイトを開発するための環境構築について、わかりやすく解説していきたいと思います。 Reactは、Facebookが開発したJavaScriptのライブラリで、ユーザーインターフェースを構築するために使われています。 Reactを使えば、効率的で、保守性の高いWebサイトを開発することができます。 初めてReactを使う人にとっては、何をインストールすればいいのか、どのような設定が必要なのか、といった環境構築が大変かもしれません。 本記事では、Reactの基礎知識から、開発環境の準備、実際の開発方法まで解説していきます。 Reactの基礎知識Reactを使ってWebサイトを開発するには、まずReactの基礎知識を身につける必要があります。Reactの定義や歴史、特徴やメリット、そして仕組みや基本概念について説明して
StackBlitz上でモックサーバーを立ち上げてTanStack Query(React Query)を素振りしてみる
こんにちは！CastingONEの大沼です。 始めに プログラミングの勉強をする際は実際に書いて学ぶのが良いと思っていますが、オンライン上で気軽に書けるとコードの共有＆動作確認という観点で尚良いと思っています。僕も簡単なコードの実装はStackBlitzを愛用しています😊 StackBlitzではNodeの実行もできるためバックエンド側の実装を書くこともできるのが魅力です。これによってreact-queryのようなAPIとの通信が必要になるライブラリもモックサーバーを同時に立てることでStackBlitzのみで検証することができます！ そこでこの記事では具体例としてjson-serverとreact-queryを使ってStackBlitz上で実装する例を紹介したいと思います。 サンプルコード 先に今回作成したサンプルコードを以下に貼ります。単純に環境が欲しいだけの方やコードの詳細を見たい
Reactを始める前に環境を整える
Reactとは UI実装に特化したJavaScriptライブラリ やったこと 1. nvmインストール nvmって？ Node Version Manager (ノード・バージョン管理ツール) の略 nvmによって、複数のバージョンを必要に応じて切り替えることができる やったこと curlコマンド curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash パスを通す(~/.zshrcに以下を追加) export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$
はじめに バックエンドへのデータ送信や、バックエンドから受け取ったデータをフロントエンド側で加工するのはよくあることかと思います。 ただ、加工処理をそのまま実装していくと、バリデーションであったり、場合によってはエラー制御であったりとコードが煩雑になっていくことかと思います(少なくとも僕みたいな村人Aエンジニアはそうでした...) そのような際に、RHFとZodを用いることで、フォームのバリデーション・データ加工・型定義まで行えて、僕のQOLが爆上がりしたため備忘録として残します デモ 今回は、nameとageをformに設置し、それらを加工してデータ送信する簡素なデモを作成します。 デモプロジェクトはViteで作成しています またソースコードはこちらにあげてあります 環境 react 18.2.0 axios 1.6.8 reach-hook-form 7.51.3 zod 3.23.6
最近、FigmaのDev ModeのPlaygroundを使用する機会があり、こちらが便利だと感じたので紹介させていただきます。 サマリー 開発とFigmaデザインの不一致で、保守性が下がることがある。Dev ModeのPlaygroundを使うことで改善できそう。 Playgroundとは、FigmaデザインのComponent Propeatyを簡単に試すことができるツール こちらを使用して設計することで、開発の保守性・効率が上がることが期待できる よくある設計方法とその課題 以下のようなButtonを設計する際、どのような設計方法があるでしょうか。 色が背景または、枠線に表示されるパターンがあったり、テキストの横にアイコンがあったりと複数の状態があるようです。 エンジニアが目視で複数の状態を比較し、それを以下のようなPropsとして定義して実装を進めるようなやり方があると思います。
はじめに 近年では、JavaScriptに型の構文を持たせる手法としてTypeScriptが広く採用されています。 しかし、TypeScript以外にもJavaScriptに型の構文を持たせるツールは存在します。そのひとつがMetaによって開発されているFlowです。 FlowはMeta社によって開発されていることもあり、TypeScriptにはないReactに特化した型を持ちます。 この記事ではFlowの構文を簡単に紹介した後に、Reactに特化したFlowだけの構文を紹介します。 Flowに興味を持つきっかけや、React開発に対するなんらかのインスピレーションになればと思います。 Flow Flowが提供する型の構文はTypeScriptと似ています。全ては書ききれませんが、基本的な型について紹介します。 変数に対する型は: で付与します。 TypeScriptと同じようにプリミティ
JSおよびReact初心者で、学習中に題名の問題が発生しました 結構詰まったものの、原因が基本的な事だったため同じ轍を踏まないよう記事とします 問題 以下のコードで発生しました export const DataTable = ({data}) => { return ( <div> {data.map((col) => { <span>{col.key}</span> })} </div> ) };
DRYなソフトウェアテストで保守性を向上 | Reactテストで学ぶ効率的なテスト戦略 | Muscle Coding
日々、開発の中でテストを書くことも多いと思います。 しかし、テストを書くことに対して、以下のような悩みを抱えていませんか？ テストコードが冗長になってしまう テストコードの重複が多く、保守性が低い 実装の変更に伴い、テストコードの修正箇所が多くなってしまう テストコードの重複を減らすことは、テストの品質を向上させる上で重要なポイントです。 そこで本記事では、ソフトウェアテストにおけるDRY原則の重要性と、React テストでDRYを実現する方法について解説します。 本記事を読むことで、テストコードの重複を減らし、テストの品質を向上させることができるようになります！ DRY原則とは ソフトウェア開発におけるDRY原則とは、「Don't Repeat Yourself」の略で、同じことを繰り返さないことを指します。 たとえば、同じコードを複数の場所に書く代わりに、関数やクラスとして一箇所にまと
puck puckはドラッグ＆ドロップでWebページを作成できるセルフホスト可能なReact向けコンテンツエディターです。 上記SSのようによくあるUIのコンテンツエディターでD&Dで操作可能、サードパーティのヘッドレスCMSと統合してコンテンツを読み込んだりpuckを介して直接インライン編集する事も可能だそうです。 完全OSSなのでベンダーロックイン等の心配もありません。既存アプリの利便性向上にいかがでしょうか。ライセンスはMITとの事です。 puck
create-react-appで作成したファイルをGitHub Pagesにdeployする方法 - Qiita
上記のバージョンで本記事の内容に関しては操作していますので、この記事を見て対応される方はこの設定にしてから行っていただくスムーズに進むかと思います。 まず、私の場合では、Ubuntuを用いてGithub操作をしているため、下準備しておかないといけない点がひとつあります。 Ubuntuでのpushの際の認証はユーザー名とトークンで認証を行うのですが、トークンの作成をするさいにworkflowsの項目を選択して発行したものを用いる必要があります。 また、GitHub Actionでは、現在nodeのバージョン16に対応していないので、nodeのバージョンを確認して20まで行進しておいてください。 nodeのバージョン管理の方法に関しては、さまざまな対処法がネット上に挙げられていますが、windowsなのか、macなのか、等環境によってできるできないがあるかもしれません、、、。私の場合、nを使っ
レス一覧画面（画像表示） アンカーに対応しようとして行き詰まってしまったので、方向を変えてまずは画像から対応してみたいと思います。 png/jpg/jpeg/gif等、画像と思われるURLがあった場合にインライン表示してください。 "jpg"や"jpeg"という文字列しか表示されず、画像が表示できていません。修正してください。 画像が表示されるようになりましたが、画像の下に"jpg"や"jpeg"という文字が表示されています。この文字を消してください。 const parts = content.split(/(https?:\/\/\S+\.(?:jpg|jpeg|png|gif))/gi); 画像の拡張子をグルーピングしているところでキャプチャされ、その文字列が分割後の配列に含まれていたようで、?:で解決でした。TypeScriptのsplitに正規表現を渡すと()でキャプチャして分割
はじめに Reactを学習していて、初心者向けチュートリアルを一周したので一度簡単なアプリを作ってみようと思い作成しました。 初学者のため、間違っている記載があればご指摘いただけると幸いです。 アプリの概要 背景色と文字色のカラーコードを入力して、「色を変更」ボタンを押すと「サンプル」ボタンの配色が変わるというシンプルな機能です。 App.js import './App.css'; import React, { useState } from 'react'; function App() { const [inputBackgroundColor, setBackgroundColor] = useState('#0f0a95'); const [inputFontColor, setFontColor] = useState('#ffffff'); const [ButtonSty
React.js の フォーム要素には 制御コンポーネント (controlled component) と 非制御コンポーネント (uncontrolled component) があります。フォーム要素とは input や textarea などを指します。 非制御コンポーネント – React 今回は非制御コンポーネントで初期値 (defaultValue) を後から変更する方法を紹介します。 非制御コンポーネントについて ざっくり説明すれば、制御コンポーネントと非制御コンポーネントは下記のような違いがあります。 制御コンポーネント: value と onChange をバインドする ➡ React で値を管理する 非制御コンポーネント: defaultValue と ref をバインドする ➡ DOM で値を管理する React のメリットを活かすために、通常は制御コンポーネントを
React Ariaを使ってアクセス可能なUIコンポーネントを作成しよう - Qiita
はじめに Webアプリケーションのアクセシビリティは、ユーザーが利用しやすいかどうかを左右する重要な要素です。障害のあるユーザーやアシストテクノロジーを利用するユーザーにも良好なユーザーエクスペリエンスを提供するために、アクセシビリティを考慮したコンポーネントを開発することが必要です。そこで登場するのが「React Aria」です。 React Ariaとは？ React Ariaは、アクセス可能なUIプリミティブを提供するReact Hooksのライブラリです。WAI-ARIA Authoring Practicesに従い、スクリーンリーダーやキーボードナビゲーションのサポートを提供します。これにより、ユーザーがアプリケーションをより簡単に操作できるようになります。 WAI-ARIA Authoring Practicesとは？ WAI-ARIA Authoring Practices（
import React, { useState } from 'react'; function App() { const [newMessage, setNewMessage] = useState(''); const [messages, setMessages] = useState([]); const handleSendMessage = () => { if (!newMessage) return; setMessages([...messages, newMessage]); setNewMessage(''); } return ( <div className="App"> <textarea value={newMessage} onInput={(e) => setNewMessage(e.target.value)} /> <button onClick=
Next.js 13.5では、ローカルサーバの起動が22％高速化するとともに、HMR（Fast Refresh）が29％高速化、メモリ使用量が40％削減、パッケージのインポートが最適化されるなどパフォーマンスと信頼性が向上している。 開発チームはバージョン13.4以降、App Routerアプリケーションのパフォーマンスと信頼性の向上に重点を置いており、今回リリースされたNext.js 13.5におけるローカルサーバ起動やHMRの高速化、メモリ使用量の削減が実現した。こうしたパフォーマンスの向上は、低速な操作をキャッシュまたは最小限に抑えることによる作業量の削減、コストのかかるファイルシステム操作の最適化、コンパイル時の増分ツリー走査の進化、不要なブロッキング同期呼び出しの削減、大規模なアイコンライブラリの自動構成などの最適化によって達成している。 パッケージインポートの最適化では、以前の
どーも！ たかぽんです！ 今回は先日Reactを触っていて出会ったエラーについてです！ Reactでtextareaを使っていたら出たエラー 先日HTMLのTextarea要素をReactで使用していたんですが... 以下のようなエラーが出てきました...! Use the `defaultValue` or `value` props instead of setting children on <textarea>. in textarea
wslでReact Native開発環境を整える
手順 主に以下の手順 wslインストール android studioインストール wslで各種設定 React Native立ち上げ wslインストール 公式が圧倒的にわかりやすいので、公式に従う android studioインストール wingetでインストール Android SDK Appearance & Behavior > System Settings > Android SDK Android SDK Location: %userprofile%\Appdata\Local\Android\Sdkにする SDK Platforms タブで以下をチェック Android 13.0 (Tiramisu) にチェック SDK Tools タブ で以下をチェック Android Sdk Build-Tools 34-rc2 Android Sdk Command-line T
（１）はじめに 普段はソーシャルワーカーとして障がいをお持ちの方の支援をしています。Advent Calendarに合わせてバージョンアップさせてきたReact Nativeでの3D表示について、今回で仕上げの投稿になります。前回はReact NativeでSocket通信しようで3DキャラクターをSocket通信でマルチプレイができるコードを紹介しました。今回はイカゲームに出てくる、だるまさんが転んだの要素（イカゲームの流行に乗っただけ）を追加して完成にしたいと思います。 大きな敵キャラクターが振り向いたときに、自身のキャラクターが動いているとアウトとなり初期位置に戻ります。githubで公開しましたので、ご興味のある方はどうぞ。 gl.pixelStorei() doesn't support this parameter yet! from TextureLoader が出ますのでn
フロントエンド開発で人気のライブラリである React は、Webアプリケーションの開発において広く使われています。 しかし、React は Webアプリケーションだけでなく、スマホ（モバイル）アプリケーションの開発にも使うことができます。 そのためには React Native というライブラリを使います。 このチュートリアルでは、React Nativeを使用してシンプルなタッチゲームを作成します。 React をある程度使ったことがある一方、 React Native は初めてという方を対象としていますので安心してください。 なお、今回作るコードは GitHub にあげてありますので、すぐ試したいかたは git clone しても OK です！ React といえば Web ブラウザで動くアプリケーションを作るためのライブラリです。 一方、React Native は Web ブラウ
投稿の趣旨 ポートフォリオサイトを作成する際にスライダーでReact-Slickを使用したのですが、React-Slickのレスポンシブに関する情報が少なくて僕自身困ったので、今回得た知見を投稿しようと思います そのため、これはReact-Slickの網羅的な内容を解説する内容にはなっていません React-Slickでの設定 import React from "react"; import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; export default function SimpleSlider() { const settings = { dots: true, //スライダー下の点の表示/
ChatGPTモドキを作ってみた - LangChain + React・Flask・SQLite + Docker - - Qiita
OpenAI等の大規模言語モデルサービスを利用した開発をサポートするライブラリとしてLangChainがあります。今回はこのLangChainをベースに、WebサーバーとしてFlask・SQLite、チャット画面としてReactを使用して、Dockerで動作するAIと対話するチャットアプリ(ChatGPTモドキ)を作成しました。このアプリだけでは実用性は微妙ですが、LangChainをベースにしたアプリを作成する際のひな形に使えるのではないかと思っています。 概要 コードはこちらのリポジトリで公開しています。 https://github.com/k8shiro/LangChainReactChatApp/tree/v0.0.1 本記事投稿時点のコードはv0.0.1のタグになります Docker環境があれば起動可能で、起動させると以下のようなチャットアプリになっています。 機能としては、O
ReactでSwiperを使う方法 swiperをインストール swiperをインストールします。 npm install swiper --save swiperのデモページをチェックする https://swiperjs.com/demos 上の公式のデモページからイメージに近いものを調べます。 使いたいものが見つかったら、Reactのボタンを押すと、コードとプレビューが同時にみれるcodesandboxが開きます。 必要なものをインポート // Import Swiper React components import { Swiper, SwiperSlide } from "swiper/react"; // import required modules import { Navigation, Autoplay, Pagination } from "swiper"; Swi
ReactのSuspenseコンポーネントを理解する
throw はエラー以外も投げられる throw構文は、一般的にエラーに対する例外処理として使われ、頭がその作りだったため、「Promiseをthrowする」という設計について、理解が追いついていなかったが、Javascriptの構文上は、throwではエラーインスタンス以外のデータ型も使える。 よって当然、Promiseのインスタンスもthrowして、親コンポーネントで捉えることができる。 function throwNum() { throw 1; } function throwString() { throw "hoge"; } function throwObj() { throw { type: "type", data: "data" }; } function catchTest() { try { throwNum(); } catch (e) { console.log
react + typescript において data fetch や reload を行う際に、loading 中は placeholder などを表示し、loading が終わったらデータを表示する、というようなことはよくやると思いますが、その際に loading の true/false と、fetch したデータが取得できているか（undefined でないかどうか）を両方チェックしていると、コードが冗長になりがちです。 ということで、これをいい感じに扱える hooks を作成しました。 なお Suspence は利用しない時代の話です。 作成した hooks import { useState, useCallback } from "react"; export const useWithLoading = <P extends unknown[], R>( fn: (...
React 向けヘッドレスUIライブラリの紹介
昨今様々なヘッドレスUIライブラリ登場しています。ヘッドレスUIは特定のスタイルがなく、UIコンポーネントの基礎となるロジックと機能のみを提供することに焦点を当てたものです。 この記事ではRadixUIをはじめとするいくつかのヘッドレスUIライブラリを紹介していきます。 RadixUI ヘッドレスUIの代表格で、効率的な実装、容易なメンテナンス、アクセシビリティを優先しているUIライブラリです。開発者が完全にスタイルを制御できるプリミティブを提供し、複雑なアクセシビリティのロジックや状態管理を抽象化しています。32のコンポーネントが利用可能で、設定を排除することで開発を効率化しプロジェクトにコンポーネントを迅速に組み込めるようになっています。 GitHub stars: ~13.5k Npm weekly downloads: ~1,345,900 コンポーネント数: 32 Headles
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Ruby on Rails】Nginx+React+Pumaで本番環境のVPSへと公開する方法 | うちガジェ
react-native-sqlite-storageとexpo-sqliteの罠 - Qiita
どうやってReact Function ComponentをMockするか - Qiita
Reactで作る勤怠状況管理アプリ - Qiita
（初学者向け）React + MUI v5(Material-UI)
React/Yup/ObjectSchemaのテスト
初めてのWebアプリケーションを作ってデプロイした話(React / Express) - Qiita
ReactでWebサイトを開発するための環境構築ガイド | 手順と注意点を解説
【react】RHFとZodでリクエスト・レスポンスのデータ整形を良しなにやる
Dev ModeのPlaygroundを活用したReact Component設計
Reactに特化した構文を持つFlowを覗いてみる - Qiita
【アロー関数】ReactのJSX内でmapを使って表示ができない問題 - Qiita
ドラッグ＆ドロップでWebページを作成できるセルフホスト可能なReact向けコンテンツエディター・「puck」
React Native & ChatGPT モバイルアプリ開発(10)
Reactで簡単なボタン配色確認ツールを作成する - Qiita
React で input の defaultValue の変更を反映させる
ChatGPT と始める React ：ステート管理と例外処理編 - Qiita
Webアプリケーション用Reactフレームワーク「Next.js 13.5」がリリース
【React】Reactでtextarea要素を使っていたら出たエラー
React Nativeでイカゲーム！ - Qiita
React Native で作るはじめてのタッチゲームアプリ【初心者向け】 | Muscle Coding
React-Slickでレスポンシブデザイン実装する方法を簡単に解説 - Qiita
【React】でSwiperを使う方法 | devsakaso – プログラミングの独学サイト
react + typescriptでloadingをいい感じに扱うhooksを作った