React

vue.jsだと、vue.nextTickでできる

this.$nextTick(()=>{
  ...
});

Javascriptでよく使われるのはsetTimeout

setTimeout(()=>{
  ...
},0)

Promiseでもできる

先日スタートアップカフェコザで行ったセッション（コンポーネント指向UI開発で学ぶReact入門 沖縄フロントエンド塾 in スタートアップカフェコザ）で紹介したReactコンポーネントのスタイルガイドの作成を記載します。
ボタンのコンポーネントを作成してスタイルガイドで表示するまでの手順です。

React nativeをandroid向けにRelease buildして署名済みapkを生成する方法は基本的に公式ドキュメントに書いてあるようにすればいいが、そのままやっても起動後すぐに落ちるようになってしまった。結果的には、jsファイルがうまくbundleされてなかったらしいので、自分でやる。

公式ドキュメント中のGenerating the release APKで ./gradlew assembleRelease を実行した直後のタイミングで、プロジェクト直下で react-native bundle –platform android –dev false –entry-file index.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res/ を実行する。この時、./gradlew assembleReleaseを実行する前にbundleしてはいけない。必ず後にやる。

Algoliaでindexからネストされた値をもとにフィルタリングするには、

AlgoliaのダッシュボードにあるdisplayタブにあるFaceting項目のAttributes for facetingに下のようにフィルタリングしたい値を設定して、

const element =  findDOMNode(this.refs.element);
element.addEventListener('mouseover'),(e)=>{
  this.mouseover(e);
});
element.addEventListener('mouseout'),(e)=>{
  this.mouseout(e);
});

こうしてあげる

this._mouseover = this.mouseover.bind(this);
this._mouseout = this.mouseout.bind(this);</p>
<p>const element =  findDOMNode(this.refs.element);
element.addEventListener('mouseover'),(e)=>{
  this._mouseover(e);
});
element.addEventListener('mouseout'),(e)=>{
  this._mouseout(e);
});

1.Popupをインポート

import {Popup} form ‘react-map-gl’;

2.使い方

hoge(){

return (

<Popup

tipSize={5} //座標を指すチップのサイズ。

anchor=”top” //座標に対するポップアップの位置を示す文字列。オプションはtop、bottom、left、right、top-left、top-right、bottom-left、bottom-right。

1.Markerをインポート

import { Marker } form ‘react-map-gl’;

2. 使い方

hoge(){

return data.map((element,i)=>{

const {info,coordinates} = element; //data情報を取得

return (

<Marker key={i}

longitude= {coordinates[0]}

latitude={coordinates[1]}

);

});

}

1.react-map-glをインストール
npm i --save react-map-gl

2.react内で使う
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ReactMapGL from ‘react-map-gl’;