React

最近のフロントエンドは、様々なツールやフレームワーク、ライブラリ等を利用し、

いろいろなものを組み合わせてコーディングしているようです。

こうなってくると、細かいファイルが沢山生成されていきますね。

それぞれの管理をどうするのか、というと細かいファイルをガッチャンコとまとめてくれるツールを利用するわけですね。

今回触るparcelもがっちゃんこしてくれるツールの一つです。

公式サイト

https://parceljs.org

特徴といえば、設定ファイルがないこと。

Webpackは便利で情報も多く、導入している方も多いかと思いますが、設定ファイルを作るのが、なんとも面倒。

parcelさんは、そんな面倒さをなんとかしてくれるかもしれない救世主となるのか。

ということで、今回はparcelを導入し実際に実行してみて便利さを味わっていきます。

こんにちは、しきゆらです。

最近、怖いと思っていたライブラリやフレームワークは、使ってみると大したことないということに気づき始めました。

Reactさんもその一つです。

基本的なReactの環境構築や使い方をまとめようと思っていますが、今回はちょっとしたメモです。

環境

Webpack、Babelを使ってES6をトランスパイルするという状況です。

Uncaught TypeError: this.setState is not a function

Reactでstateを変更するときにお世話になる関数であるsetState。

この間、stateを変更すべくsetStateを実行していたら「Uncaught TypeError: this.setState is not a function」とエラーが・・・。

コードはこんな感じでした。

import SubComponent from './SubComponent';

class MainComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data,
    }
  }

  updateState(data) {
    this.setState({
      data,
    })
  }

  render(){
    return(
      <SubComponent
        updateState={this.updateState}
      />
    );
  }
}

Mainの方のデータをSubから更新しようとしています。

このとき、上記のようなエラーが起こりました。

原因と対策

原因は「this.updateState」のthisがundefinedになることが問題のようです。

対策としては、classで定義する場合constructor内でbindしないと行けないようです。

constructor(){
  super(props); 
  this.state = { data: props.data }

  this.updateState = this.updateState.bind(this); // <= これが重要
}

これでエラーが出ずに更新できるはずです。

わかってしまえば案外簡単ですが、そうでないと無駄に時間がかかってしまいますよね。

今回はここまで。

おわり

こんにちは、しきゆらです。

前々回から、Raspiを使ったダッシュボードを作ろうとしています。

今回は、クライアントサイドの方で使いたいと思っているReactさんと戯れていこうと思います。

環境構築から、簡単な触り方までを見ていきます。