React&ES6でカウンターアプリ作ってみた

15925 ワード
es6 React es6 テキストリンク

〇参考サイト
ドットインストールReact入門

作るもの

商品の在庫数をカウントできる、カウンターアプリ

カウンターをクリックすれば、果物の個数が増えていきます。

初期設定

まず初めに、Chromeの拡張機能である、React Developer Toolsを導入します。検索すれば出てきます。
また今回は、ローカルファイルで開発するので、「拡張機能を管理」 → 「ファイルへのアクセスを許可する」をONにしてください。
そうすれば、上の画像のように赤いカッコいいマークが出てきます。

コード

コードの説明はコメントで書いています。
headのscriptの部分はReactの公式サイトの開発用スクリプトをコピペしています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>React Practice</title>
    <link rel="stylesheet" href="MyreactApp/css/styles.css">
    <!-- Reactの本体 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- Reactの結果をブラウザのDOMに反映させていくためのライブラリ -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- JSXやES6の文法を使うためのBabelというライブラリ -->
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
    <!-- Reactを使ったUIを表示する領域を作る -->
    <div id="root"></div>
      <script type="text/babel">
    //即時関数で囲いたい→JSXの記法であるアロー関数式
        (() => {

    //   Props(propaties)がここに渡される
      function Counter(props){
        return(
            <li style={{backgroundColor:props.counter.color}} onClick={() =>
            props.countUp(props.counter)}>
                {props.counter.id}-{props.counter.count}
            </li>
        );
    }

    // propsが渡ってくる
    function CounterList(props){
    // 渡ってきたpropsのcountersをmapで処理
    const counters=props.counters.map(counter => {
        return(
            <Counter
            //{}でJavaScriptの式を書ける←JSXの記法
                counter= {counter}
                // ループ処理するために値を付ける
                key={counter.id}
                countUp={props.countUp}
            />
        );
    });
    return(
        <ul>
            {counters}
        </ul>
    );
}

// Counterの情報をこのstateで管理　stateを変更できるのはここだけ
class App extends React.Component{
    constructor(){
        super();
        this.state = {
            counters: [
                {id: 'Melon', count: 0, color: 'limegreen'},
                {id: 'Grape', count: 0, color: 'purple'},
                {id: 'Apple', count: 0, color: 'red'},
                {id: 'Orange', count: 0, color: 'orange'},
                {id: 'Coconut', count: 0, color: 'white'},
                {id: 'Lemon', count: 0, color: 'yellow'}
            ],
            total: 0
        };
        this.countUp=this.countUp.bind(this);
    }

    countUp(counter){
        this.setState(prevState => {
            const counters=prevState.counters.map(counter => {
                return{id: counter.id, count: counter.count, color: counter.color};
            });
            const pos=counters.map(counter => {
                return counter.id;
            }).indexOf(counter.id);
            counters[pos].count++;
            return{
                counters: counters,
                total: prevState.total + 1
            };
        });
    }

    render(){
        return(
            // HTMLで言うclassはclassNameで書く
            <div className="container">
                <CounterList
                // ここにカウンターのデータが渡ってくる
                    counters={this.state.counters}
                    countUp={this.countUp}
                />
                <div>TOTAL INVENTORY: {this.state.total}</div>
                </div>
            ); 
    }
}
        ReactDOM.render(
        <App/>,
        document.getElementById('root')
        );
    })();
    </script>
</body>
</html>

Reactの仕組み

ここで仕組みを少し解説します。
Reactで重要なのが、

  • Componet
  • props
  • state

です。
stateはUIの書き換えに必要となるComponentの変数を管理しています。
そして、propsはComponent間の変数の受け渡しをしています。

ReactではComponent単位で細かく変数を管理することで、機能を拡張したり再利用したり、を簡単にしています。

つまずいたこと

ある時、エラーが出て、Developer Tools(Ctrl+Shift+iで表示)で確認したら、「〇行目が間違ってるよー」と出ました。
その行のコードと30分以上にらめっこしていたが全く分からず。
原因は,を付けていないことでした。