React

比較 †

↑

入門 †

既存のウェブサイトに React を追加する

React初学者が必ず押さえておきたい考え方とは？【コンポーネント指向のフロントエンド】

Windows での NodeJS のインストール

↑

React †

Reactは、Facebookが公開しているユーザーインタフェースを効率的に構築することを目的としたWebフロントエンドフレームワーク（JavaScriptライブラリ）
Reactの特徴
- シンプル ... Reactを使ってUIを実装すると、「アプリケーションがどのように見えるか」を単純に表現できる
- 叙述的 ... コンポーネントの状態がReactによって管理され、データに変更があるときには更新の必要があるコンポーネントだけ更新されるようになる
- コンポーネントベース
  - 「状態」の管理がカプセル化されたコンポーネントを使って、複雑なUIを構築することができる
  - コンポーネントの組み合わせでアプリケーションを構築することにより、コードの再利用やテストなどを実施しやすくなる

エレメントを生成するコードは「JSX」を使うと、よりシンプルに記述できる
JSXはECMAScript（JavaScript）にXMLライクのシンタックスを追加する言語拡張
JSXを使うと、JavaScriptコード中にHTMLタグを埋め込んでいるかのように記述できる

Webページ内でJSXを使用するには、「Babel」を導入する方法が最も簡単
Babelは、ECMAScript（JavaScript）の次期バージョンを現行のブラウザ上で実行可能な形式に変換する機能を持つ、JavaScriptコンパイラ
BabelはJSXシンタックスを変換する機能を持っているため、Babelを導入することでJSXシンタックスを使用できる

↑

構成要素 †

↑

コンポーネント †

Reactコンポーネントへの理解を深める

Reactでは「コンポーネント」を生成し組み合わせていくことでUIを構築していく
コンポーネントはデフォルトで用意されているものもあれば、自分で定義することもできる
コンポーネントは直接使用するのではなく、インスタンス化して使う
コンポーネントのインスタンスのことを「エレメント」と呼ぶ
Reactではコンポーネントやエレメントといった仮想的なDOMを通してUIを構築する。この仮想的なDOMのことを「Virtual DOM」と呼ぶ。
コンポーネントは、自分自身の「状態」を保持することができる
状態は「state」に保持され「setState」によって変更できる

↑

propsとstate †

React は View を構築するためのデータとして、props とstate の2つを利用する
props ... 親から受け取るデータで、自身のコンポーネントでは更新しない
state ... 自身の状態を表すもので、setStateメソッドで更新する
setStateでsteteが更新されると、Reactはこのツリーを含めてViewを全て更新する
stateは一番上位のルートコンポーネントが管理し、子のコンポーネントはstateを持たず、必要なデータは全て親からpropsとして受け取るステートレスなコンポーネントとして実装するのが一般的
stateを監理するルートコンポーネントを「コンテナコンポーネント」と呼ぶ

↑

開発環境の準備 †

Installation - React

Node.js のインストール
Create React App のインストール
```
$ npm install -g create-react-app
```

プロジェクトの作成、

$ create-react-app [プロジェクト名]
$ cd [プロジェクト名]
$ npm start

雛形の削除
```
$ rm -rf src/*
```

↑

webpack †

webpack - MODULE BUNDLER

webpack のチュートリアルをやってみる

webpackは、browserifyと同様、複数のファイルの依存関係を顧慮してビルドを行うツール

↑

webpack-dev-server †

起動
```
$ webpack-dev-server
```
起動（プログレスバー表示、色付けあり）
```
$ webpack-dev-server --progress --colors
```

↑

loader †

↑

PostCSS †

PostCSSはNode.js製の「CSSツールを作るためのフレームワーク」
プラグインを組み合わせることで様々な変換を可能にする
Facebook, GitHub, Google等、日本では Qiitaで使われている

インストール

$ npm install --save-dev css-loader postcss-loader postcss-easy-import extract-text-webpack-plugin

webpack.config.js

const webpack = require('webpack');
  :
module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          'css-loader!postcss-loader'
        ),
      },
  :
plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          require('autoprefixer')({
            browsers: ['last 2 versions']
          })
        ]
      }
    }),
],

↑