『Reactハンズオンラーニング 第2版』4章

Reactの門を眺める

『Reactハンズオンラーニング 第2版』をオライリージャパンさんから頂いた。

www.oreilly.co.jp

今のところ、ReactやJavaScript、フロントエンドの技術は守備範囲外で、必要に迫られて急場しのぎ、という事が多い。 今後、フロントエンドの話題についていくためにもある程度メジャーな技術に触れておこうと思い、『Reactハンズオンラーニング 第2版』に挑戦してみることにした。 僕の場合、ちょっとかじってすぐにやめる、というケースが多すぎるのでこれは継続してきたいが果たして。

Reactの基礎

Reactの最小単位である要素とコンポーネントを学ぶのが4章である。

React.createElement("h1", {id: "recipe-0"}, "Baked Salmon");

とすると、ReactがDOM要素に変換してくれる。 JavaScriptがそのままHTMLになるのは面白い。 実際に描画しているのはReactライブラリじゃなくてReactDOMライブラリであるが。

UIの部品をReactではコンポーネントと呼ぶ（Reactじゃなくてもそう呼びそう）。 過去にReactコンポーネントを作成する方法はReact.createClassやES2015のclass構文で作成していたらしいが、今は関数として実装するのが普通らしい。 2章や3章はJavaScriptの関数型プログラミングに費やされている。

    function IngredientsList({items}) {
        return React.createElement(
            "ul",
            {className: "ingredients"},
            items.map((ingredient, i) =>
                React.createElement("li", {key: i}, ingredient)
        )
        );
    }

    const items = [
        "1 cup unsalted butter",
        "1 cup crunchy peanut butter",
        "1 cup brown sugar",
        "1 cup white sugar",
        "2 eggs",
        "2.5 cups all purpose flour",
        "1 teaspoon baking powder",
        "0.5 teaspoon salt"
    ];

    ReactDOM.render(
        React.createElement(IngredientsList, {items}, null),
        document.getElementById('react-container')
    );

コンポーネントとデータを分離できる、というのが売りであるが、この例ではコード上では分離できているが同じHTMLに埋め込んでいるだけじゃん、となる。 もっと発展した例は次章以降で出てくるのだろう。