React.jsをES6で書き直した

React.jsのコード例を自分用にまとめてみる(JSX)のまとめのコードをES6に書き換えてみた。

いくつか注意しないといけない点があった。

[amazonjs asin="B01MUS2RP9″ locale="JP" title="JavaScriptエンジニアが手っ取り早くReactの基礎を理解するための「超」入門書"]

classの作成方法

React.jsのクラスの作り方は、React.createClass関数を使っていた。

var Component = React.createClass({
 /// ・・・・
});

これを React.Componentクラスをextendsすることでクラスを作成する。

class Component extends React.Component {
    // ・・・
}

 

propsの使い方

React.jsの場合、propsはthis.props.hogeで呼び出せたが、ES6で書く場合はconstructorで呼び出す必要がある。

    constructor(props){
        super(props);
    }

 

stateの使い方

React.jsの場合、stateはgetInitialState関数で作成した。

    getInitialState: function(){
        return {count: 0};
    }

ES6の場合は、constructorでstateを定義する。

    constructor(props){

        this.state = {count: 0};

    }

一方、stateの変更はReact.jsと同じく、setState関数を使う。

 

まとめを書き直してみる。

React.jsのコード例を自分用にまとめてみる(JSX)のまとめのコードをES6に書き換えてみた。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>まとめ</title>

</head>
<body>
    
    <div id="main"></div>

<!-- React.jsの読み込み -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<!-- ReactDOM.jsの読み込み -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<div id="main"></div>
<!-- JSXを使うためのBabelの読み込み -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>

<script type="text/babel">

/* div#main にh1タグを追加してタイトルを挿入する */

// コンポーネントの作成
class Component extends React.Component {

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

        // addCountを無名関数で定義した
        this.addCount = () => { this.setState({count: ++this.state.count}); };
    }

    render(){
        return(    
            <div>
                <h1>{this.props.title}</h1>
                <input type="button" value="+" onClick={this.addCount} />
                <br />
                <span>{this.state.count}</span>
            </div> 
        );   
    }
}

// レンダリングする
ReactDOM.render(
    <Component title="カウンター"></Component>,
    document.getElementById("main")
);
</script>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

こっちのほうがわかりやすいかな（主観）

共有:

いいね:

いいね読み込み中...

Related posts:

  1. React.jsのコード例を自分用にまとめてみる(基本)
  2. React.jsのJSXの解説
  3. React.jsのコード例を自分用にまとめてみる(JSX)
  4. React.jsで入力フォームを作成する

_,React.jsES6,React.js

Posted by umentu_blog