Reactで外部APIを呼び出して表示させる

Cordovaを使ってReactでスマホアプリを作り始めたのでReactに触れて行きます。

とりあえずReactでAPIを呼び出して表示させるまでのメモ。

開発自体はReactプロジェクトのyarn startで実行します。

ソース変更ごとに読み込みなおすしエラー個所を表示してくれるのが便利です。

ただし外部APIは基本的に読み込めない（CORS）ので、そこまで含めたテストはビルドしてcordova run androidでテストします。

まずはReactでリストを表示。

{}で挟むことで仮想DOMにスクリプトを挟むことができます。

DOMのリストを返す必要があるためforEachでなくmapを使用。

constructor(props) {
  super(props);
  this.state={
    data: [1,2,3],
  };
}
render() {
  return (
    <div className="App-main">
      {this.state.data.map((v)=>{
        return <p className="list-item">{v}</p>;
      })}
    </div>
  );
}

constructor(props) {

super(props);

this.state={

data: [1,2,3],

};

}

render() {

return (

{this.state.data.map((v)=>{

return <p className="list-item">{v}</p>;

})}

</div>

);

}

javascriptに慣れていれば以下のように処理して表示させる方がやりやすいかも。

render() {
  let _list = [];
  this.state.data.forEach((v)=>{
    _list.push(<p className="list-item">{v}</p>)
  });
  return (
    <div className="App-main">
      {_list}
    </div>
  );
}

render() {

let _list = [];

this.state.data.forEach((v)=>{

_list.push(<p className="list-item">{v}</p>)

});

return (

{_list}

</div>

);

}

あとは適当なAPIの結果を一覧表示するためにdataを書き換えるだけです。

const api = require('./logic/api.js');
...
componentDidMount(){
  api.getXXXX().then((v)=>{
    this.setState({data: v.YYYY});
  });
}

const api = require('./logic/api.js');

...

componentDidMount(){

api.getXXXX().then((v)=>{

this.setState({data: v.YYYY});

});

}

これはDOMが追加された後に呼び出される処理です。

そこでバインドされたデータを書き換えています。

今回は他でモデュール化した関数を使ってますが、importで統一したほうがいいような気もします。

所感

仮想DOMがめちゃくちゃ便利です。

javascriptプラグインは時々導入に手こずることがあってHTML構造やクラスを指定されたり、意図しないところで動作したりすることがありました。

Reactを使うとHTML構造はテンプレートとしての用途でしかなくなり、ページ構造と関数をまとめて管理できるため開発・保守・流用などが楽そう。

DOM(HTMLタグ)とjavascript（ついでにCSS）を同時に管理することができる。

親子間でないなら基本的に互いに影響もないので問題が起きにくい。

Reactプラグインがやけに多い理由が分かりました。

所感

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル