リンク

Redux

React

 

Chromeの拡張機能

react detector:リアクトアプリの検出

show me the react:リアクトコンポーネントのハイライト表示する

react developer:リアクトのデバッグツール

 

Javascriptの関数、アロー関数とthisについて

アロー関数:宣言された時点でthisを束縛する(呼び出し元のオブジェクトによってthisが変化しない)

伝統的な関数:呼び出し元のオブジェクトによってthisが変化する

 

アプリケーションの作成

npx create-react-app {アプリケーション名}

 

Reduxのインストール

npm install --save redux

 

ReactとRedexを繋ぐライブラリのインストール

npm install --save react-redux

 

実行

npm start

 

エラー対処:JSXパースエラー

・エラーコード

render(
    <div>Data1</div>
    <div>Data1</div>
)

・エラー対処

// ルートとなるタグを1個にする
render(
    <div>
        <div>Data1</div>
        <div>Data1</div>
    </div>
)

 

エラー対処:this is undefined

・エラーコード

import React from 'react'
import ReactDOM from 'react-dom'

class Counter extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            count: 0
        };
    }

    countUp(){
        // this is undefined
        this.setState({
            count: this.state.count + 1
        });
    }

    render(){
        return (
            <div>
                <button onClick={this.countUp}>CountUp</button>
            </div>
        );
    }
}

ReactDOM.render(
    <Counter />,
    document.getElementById("root")
)

・対処法1

// thisをバインドする
<button onClick={this.countUp.bind(this)}>CountUp</button>

・対処法2

class Counter extends React.Component{
    constructor(props){
        ...

        // 予めバインドしておく
        this.countUp = this.countUp.bind(this);
    }

 

PropTypeについて

・指定することでpropsの入力チェックを行ってくれる・

・参考サイト様

https://qiita.com/sfatsfc/items/d32b28ccd10e04bc87ae