#React を #Codepen で始める ( フロント苦手意識の克服、あるいは愚直な試行錯誤の赤裸々な公開 )

# ぐぐったらだいたい出てくるっしょ？

![image](https://user-images.githubusercontent.com/13635059/56468433-4eebdc00-6467-11e9-92c7-cb03b5f4e685.png)

# これこれ。

https://codepen.io/lbain/pen/ENpzBZ

# HTML CSS JS の3セット

![image](https://user-images.githubusercontent.com/13635059/56468436-60cd7f00-6467-11e9-9dfe-770f9aa2010f.png)

# Js 以外は大したこと書かれていなさそうなのでしまっとく

![image](https://user-images.githubusercontent.com/13635059/56468441-78a50300-6467-11e9-9d35-f0b76b5b2076.png)

# js 

```js
class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 1,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}

React.render(<Button />, document.getElementById('app'));
```

# Fork すると自分用のURLが割り振られて好きに使えるよ！

![image](https://user-images.githubusercontent.com/13635059/56468449-9c684900-6467-11e9-9cc8-02dd9ad52683.png)
https://codepen.io/yumainaura/pen/eoKMwm?editors=0110

# ボタンを押すたびカウントが増えるよね

ぽちぽち推して6まで増やしたぜ！

![image](https://user-images.githubusercontent.com/13635059/56468463-c7eb3380-6467-11e9-92a8-0810d036c593.png)
![image](https://user-images.githubusercontent.com/13635059/56468465-c883ca00-6467-11e9-83ad-a096c04eeccc.png)

# なんか construction が初期値とかを決めてそうだな！

count 1 って書いてあるし。
![image](https://user-images.githubusercontent.com/13635059/56468478-fe28b300-6467-11e9-9126-169c75acf8d0.png)

# updateCount っていうメソッドがあるぞ！

メソッドって呼ぶの？知らんけど。

![image](https://user-images.githubusercontent.com/13635059/56468482-13054680-6468-11e9-8d48-65fee2091532.png)

`prevState.count` に対して '+1` しているな！

# render って書いてあるのがボタン表示部分だよね！

変数的なものはブレースで囲ってあるみたいだね

 `{this.state.count}` 
![image](https://user-images.githubusercontent.com/13635059/56468491-3d570400-6468-11e9-8122-69f9ef3efec6.png)

# ってことはもちろん並べても書けるよね！

![image](https://user-images.githubusercontent.com/13635059/56468510-71322980-6468-11e9-8935-7c9e7b5f0df4.png)

# 並んで increment するようになったよ！

Codepenで Save -> Run しておこう

![image](https://user-images.githubusercontent.com/13635059/56468512-7d1deb80-6468-11e9-9560-1ebf7690c590.png)
![image](https://user-images.githubusercontent.com/13635059/56468513-7e4f1880-6468-11e9-97b5-7667b1ac8a5b.png)

# こっちも増やしたら 3ずつ増えるようにならないかなー！

ならなかったけど今までどおり動いてるみたいだよ。謎いよね。

![image](https://user-images.githubusercontent.com/13635059/56468525-b22a3e00-6468-11e9-9c83-8f92a86e29b0.png)

# で、この最後の render ってなんなの？

HTMLの閉じみたいに見えるけど。

あと HTML 側の id に何かを全部渡してるような気もするけれど？


![image](https://user-images.githubusercontent.com/13635059/56468629-fa962b80-6469-11e9-9825-87c6afef19c5.png)

この名前変えたら、ボタンも表示されなくなるみたいだな！

# もしかしてこの一番上のクラス名？

たしかに両方の名前を、てきとうに変えてみると、元通りに動くな！

HTML部品的にクラス名さえ記述するのかー！ 確かに Button の際しの文字が大文字だよね。

噂通りですね react さん！

![image](https://user-images.githubusercontent.com/13635059/56468656-2e715100-646a-11e9-832d-6adf1f5f531a.png)
![image](https://user-images.githubusercontent.com/13635059/56468657-2f09e780-646a-11e9-8360-50e6ed524f2a.png)


# ということで

一瞬触るだけでずいぶん苦手意識が克服できるよね！

フロント開発にまよったらとりあえずググってCodepenでも触ってみると良いよね！

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/1370








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->