爆速で説明するreact-routerの使い方 - Qiita
目的 自分が読んだreactの最近の参考書にはreact-routerの使い方の説明が一切書かれていなかったため、公式ドキュメントを参考にして備忘録として使い方を記す。 実践 index.jsx(ts使うならtsx)に下記のように記載する。 各コンポーネント、ファイルの置き場所をsrc/routes,src/components配下としたが、これは特に定められているわけではないので場合によってはもっとネストさせたディレクトリの下などから呼ぶこともあるだろう。 index.jsx 結局index.jsxを"root"にレンダリングするため、全てのRouteをindex.jsxに記載する。 HeaderやFooterなどの固定するものはどこのページでも表示するため、内外に記載する。 <Route path="/" element={<Home />} />では、URLを例えばhttp://lo
Reactで初期のサイトパスを変更する方法
{ "name": "sample-react", + "homepage": "/app", "version": "0.1.0", "private": true, "dependencies": { ... } } これで、ビルド時にすべてのアセットのパス（favicon.icoやmanifest.jsonなど）がindex.html上で相対的に読み込まれるようになる ルーティングの設定 サイトのベースパスを考慮したルーティングを設定するには、React Router v6が提供する<BrowserRouter>コンポーネントのbasename要素を次のように設定する import { BrowserRouter, Routes, Route } from 'react-router-dom' function App() { return ( - <BrowserRouter> +
Splide - アクセシビリティに配慮した軽量・高機能スライダー
アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
WebページやスマホアプリのUIデザイン・モックアップが簡単に！Adobe XDのプラグイン「Spectrum」が便利
WebページやスマホアプリのUIデザインで、一貫したコンポーネント・テーマ・カラー・タイポグラフィ・アイコンなどを作成・管理できるAdobe XDの無料プラグイン「Spectrum」を設計したAdobeのデザインシステム・デザインマネージャーの解説記事を紹介します。 Spectrum for Adobe XD: Adobe’s design language in its experience design tool by Jacob Frank 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Spectrumの機能と開発した経緯 Spectrumを使用した結果 Spectrumのインストール方法 Spectrumの今後の機能 ご意見をお聞かせください はじめに アドビのデザインシステムであるSpectrumは、5年前
)
Grid.js - React/Angular/VueをサポートしたHTMLテーブルライブラリ MOONGIFT
HTMLで使ってデータをテーブル表示するのは簡単です。しかし、ちょっとUIをよくしたり、ソートなどの機能を追加しようと思うと、途端に面倒になります。素のHTMLのままではとても使い勝手がいいとはいえません。 そんなHTMLテーブルを手軽に高機能化してくれるライブラリがGrid.jsになります。 Grid.jsの使い方 データはJSONで渡すだけです。 HTMLを使うこともできます。 ページネーションも使えます。 キーワードによるフィルタリング。 ソート。 横に長いテーブルも問題ありません。 Grid.jsはライブラリ依存がないJavaScriptで作られています。しかし、Angular/React/Vueをサポートしており、フレームワークと組み合わせて高機能なテーブルを提供できます。足りない機能はフレームワーク側で提供すればいいでしょう。 Grid.jsはTypeScript製のオープンソ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
