Minarai Tech Blog

プログラミング初心者の備忘録

React.js事始め

執筆の動機

React.jsを使用する仕事に初めてアサインされた。自分が仕事にキャッチアップする過程で学んだことを記録したい。今回は,キャッチアップの初期に学んだ概念を中心に紹介する。

React.jsとは

FacebookOSSとして公開している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 SwitchTwitterNetflixなどの有名サービスでも使用されている。コンポーネント指向によるモジュール性の高さが採用の理由とのことである(参考

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"にチェックを入れた。

f:id:ht-eightyeight:20180921232347p:plain

公式ページ以外の教材