Golang製Web Framework「gin」とjavascriptライブラリ「React」を合わせてウェブサービスを作ることを考えます。
ルーティング部分でちょっと詰まったので覚書き。
カテゴリー: React
GO→WebAssembly→React→Cordova
前回やった内容で「golang webassembly」と検索してもあまり情報がなかったけど、ReactやCordovaとWebAssemblyの組み合わせは全く出てこなかった。
React＋Cordovaでアプリを作るテストもしていたので、せっかくだから手探りでアプリ化までしました。
今回はその備忘録です。
Reactで非同期処理をするタイミングと画像キャッシュ対策
ファイル読み込みや書き込みなんかの非同期処理をするときにReactだとどこに書いていいかわからないことがあります。
読み込みに関してはcomponentDidMountなどで呼び出せば配置後に１度だけ呼び出すことはできますが、更新処理でちょっと困ったのでメモ。
【Cordova × React】Nend広告表示コンポーネント
index.htmlに以下のような標準コードを加えるだけで広告の表示自体はできる。
|
1 2 3 4 |
<script type="text/javascript"> var nend_params = {"media":xxx,"site":xxx,"spot":xxx,"type":x,"oriented":x}; </script> <script type="text/javascript" src="https://js1.nend.net/js/nendAdLoader.js"></script> |
ただ位置を調整したり複数表示する場合に使いにくいのと、アプリ化したときにリンクの不具合が起きる。
検索してコンポーネントを見つけたがSDKを使う用途の本格的なものだったので簡単なものを作った。
【React×Material-ui】Iconの一覧と使い方
ReactのMaterial-UIコンポーネントには大量のアイコンが用意されている。
|
1 2 3 4 5 |
import FavoriteIcon from '@material-ui/icons/Favorite'; ... render( <FavoriteIcon /> ); |
これで
が表示される。
一覧が見当たらなかったのでフォルダにある分を表示するようにしました。
【React×Material-ui】Modalでスクロールできなくする
以前にMaterial-uiコンポーネントのモーダル（ポップアップ）を使ってみました。
モーダルが出ている間は背景のスクロールは出来なくなっています。
しかしスマホで見ると後ろ画面がスクロールしてしまったのでその対策方法。
【React×Material-ui】Modalの実装方法
Material-uiにはモーダル（ポップアップウインドウ）が用意されています。
表示だけならサンプルで動きますが実装するにあたって色々考えたのでメモ。
【React】MATERIAL-UIを使ったデザイン作成
Material-uiはReactのなかでも人気のコンポーネントみたいです。
コンポーネント全体で思うことですが、これも少し使うための知識がいるのでReactに慣れてから手を出した方がいい気がする。
今回はフッターメニューを作ってみます。
Reactのthisに関するTips
Reactの仮想DOMでイベントから関数を呼び出すとき、bindしないとthisでクラス関数が呼び出せないです。
バインドしないでもthisが使える書き方もあったのでメモ。