reactjs サンプルコード集 [個人用]

# reactjs
reactjs用コードサンプルいろいろ作ってみる。
対象バージョン: [React - v15.4.2][v15.4.2]

# 基本構造
```html:index.html
<div id="root">
  <img src="data:image/gif;base64,...今回はローディング用の画像をBase64にエンコードし、用意した==" alt="ローディング" />
</div>
```
自作ツール:　[base64エンコード 
][base64]

## チュートリアル01
最新版は、JAX?とかいうテンプレートコンパイルがなくなっているみたい。
現バージョン代わりに、jsで記述することで、テンプレート替りみたいだったので、チュートリアルから学びます。

まずは、ハローワールドから。[チュートリアル01](https://facebook.github.io/react/)

```js:App.js

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello, ",
      this.props.name,
      " !!"
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "You Name" }), document.getElementById('root'));
```

## チュートリアル02

つづいて、クラスに関するチュートリアルをマスターしましょう。
[チュートリアル02](https://facebook.github.io/react/)


```js:App.js
// Classの宣言
class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { secondsElapsed: 0 };
  }

  tick() {
    this.setState(prevState => ({
      secondsElapsed: prevState.secondsElapsed + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return React.createElement(
      "div",
      null,
      "Seconds Elapsed: ",
      this.state.secondsElapsed
    );
  }
}

//ReactDOMのレンダー
// class化にすることで、使い回しが可能になる
ReactDOM.render(React.createElement(Timer, null), document.getElementById('root'));

```

# 基本文法を学ぶ

やっぱり、es6で書かなくては意味ないと思うので、ここはes6用のコードも意識して、構築してみます。

```js:App.js
//まずは、javascriptでよくあるfunctionで書いてみる。
//やっぱりテストコードとかは、まだ書き慣れたこっちの方が書きやすいし、読みやすい...
function imgdata(src_url) {
  return src_url._encode_ + src_url.imgdata01;
};

// Eventの受け取り
function opener(e) {
  const eventType = e.type; // "Click Event"
  const divelement = document.getElementById('box01');
  console.log(eventClass.className);

  setTimeout(function() {
    console.log("functionで宣言");
  }, 0);

  // 「function」　を「=>」に変更したes6用コード
  setTimeout(() => {
    console.log("=>(アロー)で宣言");
  }, 0);
}

//---  styleも書ける  ---//
const styles = {
  background: 'url('+imgdata(src_url)+') no-repeat right 18px',
  height: '40px'
}

//--- ライブタイプとコンパイルタイプのelement宣言方法 ---//
// Liveタイプ
// タグのclassへNameを入れたい場合は、classではなく、classNameとすること。
//　理由:classはjavascriptの予約語のため。
const element = (
   <h1 id="h1_01" className="opener" onClick={ opener } style={ styles }>Title</h1>
 );

//--- ↑も↓も一緒 ---//
// Compilerタイプ
const element = React.createElement(
    'div',
    'null',
    'h1', {
      id: 'h1_01',
      className: 'opener', 
      onClick: opener,
      style: {
       background: 'url('+imgdata(src_url)+') no-repeat right 18px',
       height: '40px',
     },
   },
   'Title'
 );

// ちなみに、コンパイルタイプで、div外に一括で作成したい場合は、以下のようにReact.Elementで毎回区切る必要がある。
// 　　　　React.createElement('div', {className: 'shopping-list'},
//   React.createElement('h1', ...),
//   React.createElement('ul', ...)
// 　　);

```

# 応用編 『アコーディオン（Toggel）を組んで、全てを学ぶ』
これまでに学んだことを踏まえ、Toggelタイプのアコーディオンを作成してみます。
cssは下記を参照。
※Pythonっぽい書き方になってるかもしれないけど、そこは目をつぶってやってください。

```css:css
#root .close {
  display: none;
}

#root .open {
  display: block;
}

```

```js:App.js
// Classの宣言
class Toggle extends React.Component {
  constructor(props) {
  super(props);
  }


  // functionは要らない。
  imgdata(src_url) {
    this.src_url = src_url;
    return this.src_url._encode_ + this.src_url.imgdata01;
  }
 
  onClick(event) {
  // eventから受け取れる情報
  console.log(event);
  //　ちなみに、Codepenのコンソールには、下記の内容が表示されますので、ブラウザのデバッグコンソールで確認してください。
  // >> Log Skipped: Sorry, this log was too large for our console. You might need to use the browser console instead.
  // ブラウザのデバッグコンソールでは、以下の内容が表示されます。受け取り用のイベントネームがあるので、それを使います。今回は、「type」と「target」の情報を受け取っています。
  // >> r {dispatchConfig: Object, _targetInst: h, nativeEvent: MouseEvent, type: "click", target: h2#02.opener…}

  const eventType = event.type; // "click"
  const eventTarget = event.target; // "target"
  const Targetdiv = document.getElementById('box_'+eventTarget.id);

  // setTimeout(function() {...},0);のような場合は、=>(アロー)を使いましょう。
  setTimeout(() => {
    console.log(eventTarget.id); // => eventTarget.id
    console.log(eventType); // "click"
    console.log(Targetdiv.className); // "close ? open"
    if(Targetdiv.className == 'close') {
       Targetdiv.className = 'open';
      eventTarget.style.backgroundPosition = 'right -40px';
    } else {
       Targetdiv.className = 'close';
      eventTarget.style.backgroundPosition = 'right 18px';
    }
  }, 0);

}
 
  render() {
    
    const src_url = {
    _encode_: 'data:image/png;base64,',
    imgdata01: 'iVBORw0KGgoAAAA...長いため、省略...='}
    return React.createElement(      
      'div',
      'null',
      React.createElement(
        'h1', {
          id: '01',
          onClick: this.onClick,
          className: 'opener',
          style: {
            background: 'url('+this.imgdata(src_url)+') no-repeat right 18px',
            height: '40px',
          },
        },
        'Title'
      ),
      React.createElement(
        'hr'
      ),
      React.createElement(
        'div', {
          id: 'box_01',
          className: 'close',
        },
        'TextTextTextTextTextTextTextText...'
      ), 
      React.createElement(
        'h2', {
          id: '02',
          onClick: this.onClick,
          className: 'opener',
          style: {
             background: 'url('+this.imgdata(src_url)+') no-repeat right 18px',
            height: '40px',
          },
        },
        'Title'
      ),
      React.createElement(
        'hr'
      ),
      React.createElement(
        'div', {
          id: 'box_02',
          className: 'close',
        },
        'TextTextTextTextTextTextTextText...'
      )
    );
  }
}

//ReactDOMのレンダー
ReactDOM.render(React.createElement(Toggle, null), document.getElementById('root'));

```

↓動作確認用 (codepen)

<iframe height='290' scrolling='no' title='jybVOP' src='//codepen.io/jacklow/embed/jybVOP/?height=290&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/jacklow/pen/jybVOP/'>jybVOP</a> by jacklow (<a href='http://codepen.io/jacklow'>@jacklow</a>) on <a href='http://codepen.io'>CodePen</a>.
</iframe>
<a href='http://codepen.io/jacklow/pen/jybVOP/'>
![スクリーンショット 2017-01-09 22.59.17.png](https://qiita-image-store.s3.amazonaws.com/0/12007/4ca2255b-330c-a095-2a66-f8724faa0716.png)
</a>

# 参考URL
[v15.4.2][]
[hello-world][]
[style][react-dom-style]
[react-without-es6][]
[dom-elements][]
[events][]


[----link----]://
[base64]:http://jsdo.it/jack3low/pfVy
[hello-world]:https://facebook.github.io/react/docs/hello-world.html
[react-dom-style]:https://facebook.github.io/react/docs/react-dom.html#style
[react-without-es6]:https://facebook.github.io/react/docs/react-without-es6.html
[dom-elements]:https://facebook.github.io/react/docs/dom-elements.html
[events]:https://facebook.github.io/react/docs/events.html

[v15.4.2]:https://github.com/facebook/react/releases/tag/v15.4.2
[]://