爆速で説明する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> +
)
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製のオープンソ
Gatsby - Markdown×Reactによる静的サイトジェネレータ MOONGIFT
静的サイトを作る時にはコンテンツを作ってリロードして表示を確認するのが基本です。その時、ライブリロードのような仕組みを使っていても基本は変わりません。SPA（シングルページアプリケーション）であれば一番上まで戻ってしまうでしょう。確認がだんだん面倒になっていくはずです。 そこで使ってみたいのがGatsbyです。Markdown + Reactを使った静的サイトジェネレータです。 Gatsbyの使い方 Gatsbyのインストールはnpmでできます。 npm install -g gatsby インストールしたらまずサイトのベースを生成します。 $ gatsby new my-test-gatsby-site 07 Sep 08:00:44 - log: Cloning git repo "git://github.com/gatsbyjs/gatsby-starter-default.git
Show me the React! - Reactを使っているサイトが一目で分かる！ MOONGIFT
Reactでの開発を学ぶ上で、既存のReactを利用しているサイトを見てその内容を把握するのは良い材料になるでしょう。しかし表面上はDOMを出力しただけなのでReactを使っているのかどうかは分かりづらいです。 そこで使ってみたいのがShow me the React!です。Reactを使っているWebサイトがあればアドレスバーで通知してくれるようになります。 Show me the React!の使い方 Reactで作られているサイトを見ると、アドレスバーにReactのアイコンが出るようになります。 さらにクリックするとReactを使っているDOM部分がハイライト表示されます。 こんな感じでどの部分がReactで生成されているのかが視覚的に分かりやすくなります。 React開発時のヘルパーとして入れておくと便利ではないかと思います。今後、増えていくと思われるReactのシェアを知る上でも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
