金曜日のネコ

8割日記、2割技術

入門Reactを半分読んでとりあえず一旦まとめる

去年買って本棚の肥やしと化していた入門Reactを読み始めた。

入門 React ―コンポーネントベースのWebフロントエンド開発

入門 React ―コンポーネントベースのWebフロントエンド開発

私事だが就活で今のところ2戦2敗している。

どちらも自社のwebサービスを抱えている所謂メガベンチャーのようなIT企業なのだが、御社の技術者や人事の方と話して何となく就活のために今やるべきことが見えてきた気がする。

大学院に入学して一年間、思考の面では頑張ってきたつもりだが、web系の企業を志す技術者としてのアウトプットが皆無だった。

2,3月は研究に関してもブーストが必要だが、モダンな技術に触れて何かのアウトプットを出さなければならない。

とりあえず自分のポートフォリオサイトを大改装しようとして読むに至る。

とりあえずjQueryしか分からない古い人間が入門Reactを読んでの知見をまとめておく。

Reactについて

Facebookが開発したDOM操作ライブラリ。XHPというPHPフレームワークJavaScriptに移植したもので、従来のDOM操作ライブラリと異なりページ全体をレンダリングし直すという考え方。しかも仮想DOMという手法を採っているので高速。とのこと。

React.CreateClass()の構成

実際にReactのコーディングをまだ行っていないのでCreateClass関数での定義をさらにどう使うかはまだ知らない。

CreateClass関数でDOM構造をコンポーネントという単位で定義し、コンポーネントの組み合わせでUI部品や、更に新たなコンポーネントを作っていくというのがReactの考え方らしい。

CreateClassの中では既にキーが定義されているオブジェクト内に一つ一つ関数を書いていき、決められたライフサイクルでそれぞれの関数が実行されていくらしい。render関数でDOM構造をreturnするとそれが仮想DOMに反映されてUI上に表示することができるらしい。

CreateClass内でのデータの受け渡し

CreateClass内でデータの受け渡しに使用できるpropsとstateという2つのオブジェクトが用意されているらしい。

間違っているかもしれないが、propsは汎用的な変数、stateは関数から別の関数へ状態の変化を渡したい時に使う変数だと解釈した。

JSXについて

Reactを書く時はJSX(JavaScript + XML)という言語でJSのコードとDOM構造を混ぜ込んで記述し、それをBabelやらでトランスパイルしてブラウザで実行できる形式にするらしい。

JSとの違いは

  • 構文の中にXML形式でHTMLのDOM構造(のようなもの)を記述できる
    • class要素はclassName
  • {}を用いることでXML内にJavaScriptの変数やオブジェクトや関数の戻り値や三項演算子なんかを入れられるらしい。テンプレートエンジンに似てる

明日の目標

実際にReactで書かれたコードを読んで学ぶ。とりあえず今のポートフォリオサイトのフロントエンドをReactでリファクタリングする。