create-react-app でreact-styleguidist をつかってReactコンポーネントのスタイルガイドを作成する

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

プロジェクトの作成

プロジェクトを作成

create-react-app ui-react

ui-reactフォルダに移動
styleguidistとnode-sassを入れます

yarn add react-styleguidist

package.json

scriptsに追記


"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "styleguide": "styleguidist server"//これを追加
  }

ボタンのコンポーネントの作成

src/components/atoms/btn/
でフォルダを作成して、


Btn.jsx
Btn.scss
Btn.md

のファイルを作成

ボタンのjsx作成


import React from 'react';
import './Btn.scss';
export const Btn =(props)=>{
  return(
    <div 
      className='btn'
      onClick={(e)=>{this.props.handleClick(e)}}
    >
      {props.children}
    </div>
  )
}

ボタンのscss作成


@mixin btn {
  border-radius:4px;
  padding:4px;
  font-sie:12px;
  text-align:center;
  &:hover {
    cursor:pointer;
    font-weight:bold;
  }
}

.btn {
  @include btn;
}

ボタンのmd作成

このファイルにスタイルガイドに表示するものを記述
いろいろ設定できます(Documenting components)


```jsx
<Btn handleClick={}>.btn</Btn>
```

スタイルガイド作成


yarn styleguide

コンパイルすると、


yarn run v1.7.0
$ styleguidist server
Loading webpack config from:
D:\work\FrontendJ\react-styleguidist\node_modules\react-scripts\config\webpack.config.dev.js

You can now view your style guide in the browser:

  Local:            http://localhost:6060/
  On your network:  http://172.24.138.209:6060/

 DONE  Compiled successfully!

 
 


http://localhost:6060/

このurlを開くと表示されます。
 
 

 
 

気をつけること

  • 1つの.jsxに1つのコンポーネント

React native の Android release build で起動しても落ちる時の解決法

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してはいけない。必ず後にやる。

その後 react-native run-android –variant=release で実機にデプロイしテストするが、このとき入れてるnodeモジュールによってはエラーが出る。エラーメッセージが Error: Duplicate resources なら、このメッセージの直前に出力されるファイルパスの該当ファイルをすべて削除すれば動くはず。

Algoliaでネストされた値をフィルタリングする方法

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

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

※ダッシュボードの変更は、セーブしないと適用されないのでちゃんとセーブしましょう。セーブボタンは、右上あたりに出てると思う。( 多分 )

index.search({
    facetFilters: ” ここにダッシュボードで設定したキーをいれる”
},
(err,content) => {
    if(err) throw err;
    console.log( content );
});
のように、facetFilters:” 設定したキー”で、フィルタリングした値が取れる。

[react.js] リアクトでイベントリスナー


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);

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

react-map-glのMarker

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]}

>

<div><span>{info}</span></div>

</Marker>

);

});

}

react-map-glの導入

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’;

class Map extends React.Component{
constructor(props){
super(props);

this.state = {
viewport:{
width :400,
height :400,
latitude :37.7577,
longitude :-122.4376,
zoom :8
}
};
}

render(){
const {viewport} = this.state;
return (

<ReactMapGL

mapStyle=”mapbox:~~~”

{…viewport}

onViewportChange={

viewport => this.setState(viewport);

}

>

</ReactMapGL>

);

}

3.webpackに以下を追加

process.env[‘MapboxAccessToken’]= “~~~~”;

以下略———————–>>

plugins:[

new webpack.EnviromentPlugin([‘MapboxAccessToken’])

]

<<——————–以下略