React.js事始め
執筆の動機
React.jsを使用する仕事に初めてアサインされた。自分が仕事にキャッチアップする過程で学んだことを記録したい。今回は,キャッチアップの初期に学んだ概念を中心に紹介する。
React.jsとは
FacebookがOSSとして公開しているUIを作るためのJavaScriptライブラリ。
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.
React.jsはFacebookのほか,Nintendo Switch,Twitter,Netflixなどの有名サービスでも使用されている。コンポーネント指向によるモジュール性の高さが採用の理由とのことである(参考)
component
上の引用文にある通りReactではコンポーネントを作成し,それらを組み合わせることで,複雑なUIを表現する。 自分がアサインされた仕事のプロトタイピングでは,以下のディレクトリ構造でSPAの開発を行っている(一部抜粋)
components └Layout.js pages ├about.js ├index.js └item.js
Layout.jsでは,children, title='hoge', pageTitle
を引数にとる無名関数がconst Layout
に代入されている。無名関数における処理として,ページのメタデータ,ページ上部のリンクと下部のフッターがJSX(後述)で記述されている。また,上部のリンクと下部のフッターの間には,{children}
を包含している。それをLayout
コンポーネントとしてexportし,他のファイルから呼び出せるようにしている。
pagesディレクトリの各ファイルには,ページの本体が記述されており,Layout
コンポーネントを呼び出す。この結果,ページ上部のリンクと,本体,下部のフッターが合わさり,SPAとして描画される。
※ children 子要素をwrapするような子要素のこと(参考)
JSXの記法
コンポーネントはマークアップとロジックの双方を含んだ小さな塊である。一般にReactを用いた開発では,JavaScriptのExtensionであるJSXという記法を用いて,文章構造を記述する。
const element = <h1>Hello, world!</h1>;
This funny tag syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript.
Atomエディタでの開発環境
自分の開発環境には,パッケージlinter-js-standardが既にインストールされていた。そのまま開発に着手したが,JSXの記述部分についてSyntax Errorの通知が赤色で表示されてしまう。そこで,以下のパッケージをインストールした。
加えて,linter-js-standardをver6.0.0にアップデートし,Settingsで"Only lint if installed locally"
と"Skip if ESLint is installed locally"
にチェックを入れた。
公式ページ以外の教材
- ドットインストール React入門
- free code camp 実際に手を動かしながら勉強できる
- 速習 React 速習シリーズ 2018-09-22現在Kindle Unlimited対象
- 出来る限り短く説明するReact.js入門 参考資料が豊富