前回はアイコンやテキスト情報を表示しましたが、色を直接指定することができませんでした。primary
やerror
など意味を示す物でしたよね。今回はデフォルトで定義されている色などを変更するテーマ機能を触ってみます。
はじめてのReact #28 「CSSフレームワークを導入する」Material-UI グリッド編
はじめてのReact #27 「CSSフレームワークを導入する」Material-UI インストール編
Reactでは通常のWebサイトと同様、自由自在にCSSを記述し反映することができるわけですが、ゼロから書き始めるのは個人的に正直ダルい。そんなときにタグにクラス名を適当に指定すればチャチャッといい感じに表示してくれるCSSフレームワークを導入したいと思います。
今回はよく名前を見かけるMaterial-UIを使ってみることにします。長いものには巻かれろ精神。 material-ui.com
続きを読むはじめてのReact #26 「ルーティングに対応する」設定をJSONにまとめる編 react-router@v5
これまでルーティング関連の記事では以下のような内容を取り上げてきました。
今までは以下のように直接
を書いてルーティングの定義を行ってきましたが、今回はこれらの設定をJSONなどで定義し、いつでも外部のファイルに出せるようにします。
<!-- befor --> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/auth" component={Auth} /> <Route path="/area/:cd" component={Meisan} /> </Switch>
このままでも動くんですけどね。ロジックと設定は分離して置いた方がメンテしやすくなりますからね。
続きを読むはじめてのReact #25 「ルーティングに対応する」認証とリダイレクト編 react-router@v5
はじめてのReact #24 「ルーティングに対応する」URLパラメーター編 react-router@v5
はじめてのReact #23 「ルーティングに対応する」基本編 react-router@v5
React Routerは雑に言うとリクエストされたURLのパスと、ReactのComponentを紐付けてくれる便利なモジュールです。
例えば /foo
にアクセスされたら FooComponent
を、/bar
にアクセスされたらBarComponent
を実行することができるようになります。
reacttraining.com
今回は3月21日に登場したばかりのReact Router v5を触ってみます。本来はv4.4として出す予定だったそうですがReact 16との互換性が大きく改善されたとのことでメジャーバージョンアップの運びとなったとのこと。使い方もv4系とあまり変わらないようですね。
続きを読む