著者アーカイブ asaba

著者:asaba

【cordova/react】create-react-app内でもjqueryしたい！！

jqueryは通常、ファイルをダウンロードしてhtmlに組み込むかcdnでリンクを作り（下のコード参照）

これをそのまま貼って使う方法があります。

create-react-appで作ったアプリでもhtmlで組み込めそうだと思い、jquery公式ページでダウンロードしたjquery3.3.1ファイルを

index.htmlが入っている場所publicフォルダ内に入れて、生成されたindex.htmlのコードに埋め込もうとしましたが$ is not definedで

怒られてしまいました。

最初からcreate-react-appで作ったindex.htmlは、タグ内の要素を組み込んで表示することしかしてくれないので読み込んでくれないみたいです。

共存させるには、npmを使ってjqueryをインストールする必要があります。

コマンド内でnpm install jqueryと入力してenterキーを押せばすぐに最新版をダウンロードしてくれます。

そして、jqueryを使いたいjsファイルに下のように定義します。

import $ from 'jquery';

これでreact内でもjqueryを使ったajaxの通信も問題なくできるはずです。

同じjqueryでもzeptoのほうが軽く、最初はそっちを入れたのですがcreateelement辺りでバグっぽいのがあったのでやめました。

reactでもjquery使いたい！という方は是非試してみてください、それでは。

著者:asaba

FileReaderAPIの使い方

FileReaderは、自分の写真やギャラリーにアクセスしてその画像を取得することができるオブジェクトで、最近のアプリを作るのに必ずと言っていいほど必要になります。

今日は、そんなFileReaderを使い始めた人の目線で説明していきます。

まずは、コードの全貌から。。。

PhotoSelect(e) {

const file = e.target.files[0];

const fr = new FileReader();

fr.onload = () => {

const imgNode = this.refs.image; imgNode.src = fr.result;

};

fr.readAsDataURL(file);

}

上記のスクショがデバイスで画像をアップロードするコードのひな型になります。表示するだけならこれだけです。

まず、PhotoSelectでイベントハンドラを作ります。

その後にconst fileにてアップロードする画像の配列の大きさを決めています。target.files[0]なので、ここでは配列を一つと決めています。

その後に、const fr = new FileReader();でオブジェクトを生成します。

そして、onload関数で画像を取得しています。ちなみにリサイズや向きの変更もこの関数内で行います。

最後のreadDataURLでアップロードするファイルを決めてアップロードをします。

短めですが、これでテンプレートの説明は終わりです。

このままではスマホで撮った画像がそのままアップロードされるので、実用性はあまりありません。

しかし、onload内でプラグインを使ったりキャンバスオブジェクトを使ってjpgやpngを操作したりと自由にカスタマイズができるので

慣れてしまえばすぐに実装できてしまったりします。

しかし、reactのバージョンなどで使い方が変更されている、或いは使えなくなったプラグインも存在するので最初は結構苦労するかもしれないです。

やはり本実装の前に自分が開発しているnpmやreactのバージョンを確認をしてみるといいかもですね。

著者:asaba

【create-react】Cannot read property ‘thisCompilation’ of undefined npm ERR!

npm install –save-dev webpackで最新のwebpackをインストールしてnpm run webpackしたところで

Cannot read property ‘thisCompilation’ of undefined npm ERR! というエラー出現

npmのバージョンとインストールしたwebpackのバージョンに開きがあったのが原因でした。

なので、一旦ダウンロードした新しいwebpackをnpm remove webpackでアンインストールして

一回り古い@3.11.0をインストールして解決。同じことではまっている方は今使っているnpmのバージョンを確認してみてください。

それでは！

著者:asaba

【cordova react】Invariant Violation: You should not use Route> or withRouter() outside a Router>

reactのチュートリアル中にハマりました。

チュートリアル中せっかくなのでアプリを画面遷移させるところまで試してみようと思い、index.jsとMyComponentをコーディングしてyarn run buildでビルド。

そしたら下のエラーに遭遇。

<span style="color: #ff0000;">Invariant Violation: You should not use Route> or withRouter() outside a Router>
</span>

訳すと、ルーターの外でwithRRouterを使ってはいけません。です。

export default withRouter(MyComponent)ってスコープ内だっけと思いましたがそんな訳ないよなと思いスタックオーバーフローへ。

するとありました。解決方法と原因。めっちゃシンプルでした。↓

https://stackoverflow.com/questions/47314541/you-should-not-use-route-or-withrouter-outside-a-router-when-using-react-route

<BrowserRouter></BrowserRouter>を定義していない・・・だと・・・

考えてみたらコンポーネントを上記のタグで囲まない限りいつまでも場外扱いですよね。

Routerを使いたいのにRouterを定義していないならそりゃ使えないよねと(汗)反省して下記のようにindex.jsを編集しました。

画面遷移はreact-routerの使い方を理解すれば大丈夫そう。筆者もここにきてようやくstateとpropなどのライフサイクルが分かってきたので、複数のコンポーネントで値を渡していじれるようになれば少しは楽に開発できるかなと感じました。

長いですが頑張て行きたいと思います。