React †
- Reactは、Facebookが公開しているユーザーインタフェースを効率的に構築することを目的としたWebフロントエンドフレームワーク（JavaScriptライブラリ）
- Reactの特徴
- シンプル ... Reactを使ってUIを実装すると、「アプリケーションがどのように見えるか」を単純に表現できる
- 叙述的 ... コンポーネントの状態がReactによって管理され、データに変更があるときには更新の必要があるコンポーネントだけ更新されるようになる
- コンポーネントベース
- 「状態」の管理がカプセル化されたコンポーネントを使って、複雑なUIを構築することができる
- コンポーネントの組み合わせでアプリケーションを構築することにより、コードの再利用やテストなどを実施しやすくなる
構成要素 †
- Reactでは「コンポーネント」を生成し組み合わせていくことでUIを構築していく
- コンポーネントはデフォルトで用意されているものもあれば、自分で定義することもできる
- コンポーネントは直接使用するのではなく、インスタンス化して使う
- コンポーネントのインスタンスのことを「エレメント」と呼ぶ
- Reactではコンポーネントやエレメントといった仮想的なDOMを通してUIを構築する。この仮想的なDOMのことを「Virtual DOM」と呼ぶ。
- コンポーネントは、自分自身の「状態」を保持することができる
- 状態は「state」に保持され「setState」によって変更できる
- 「state」が変更されたときには「render」が呼び出され、自動的に再描画される
- 状態の変化に応じて効率的に処理できる点が、Reactの最大の特徴
- エレメントを生成するコードは「JSX」を使うと、よりシンプルに記述できる
- JSXはECMAScript（JavaScript）にXMLライクのシンタックスを追加する言語拡張
- JSXを使うと、JavaScriptコード中にHTMLタグを埋め込んでいるかのように記述できる
- Webページ内でJSXを使用するには、「Babel」を導入する方法が最も簡単
- Babelは、ECMAScript（JavaScript）の次期バージョンを現行のブラウザ上で実行可能な形式に変換する機能を持つ、JavaScriptコンパイラ
- BabelはJSXシンタックスを変換する機能を持っているため、Babelを導入することでJSXシンタックスを使用できる
React+Redux †
- Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワーク
- Reactではstateの管理するデータフローにFluxを提案しているが、ReduxはFluxの概念を拡張してより扱いやすく設計されている
- Reduxはstateを管理するためのライブラリなので、React以外にもAngularJSやjQueryなどと併せて使用することもできる
Reduxの3原則 †
- Single source of truth
- アプリケーション内でStoreは1つのみとし、Stateは単独のオブジェクトとしてStoreに保持される
- State is read-only
- Stateを直接変更することはできず、actionをStoreへdispatchすることでしかStateは変更できない
- Mutations are written as pure functions
- Stateを変更する関数（Reducer）はpureな関数にする
JSX †
webpack †
- webpackは、browserifyと同様、複数のファイルの依存関係を顧慮してビルドを行うツール
$ npm install -g webpack
$ nom init
$ npm install --save react react-dom @types/react @types/react-dom
$ npm install --save-dev typescript awesome-typescript-loader source-map-loader
- [プロジェクトフォルダ]/tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}
- [プロジェクトフォルダ]/webpack.config.js
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
// webpackの出力をデバッグするためのsourcemapsを有効化
devtool: "source-map",
resolve: {
// 解決可能な拡張子に'.ts'と'.tsx'を追加
extensions: ["*", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
// '.ts'または'.tsx'の全てのファイルを、'awesome-typescript-loader'で扱う
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }
],
/*
// webpack v1
preLoaders: [
// '.js'の全てのファイルに、'source-map-loader'によて予め処理されたsourcemapsを持たせる
{ test: /\.js$/, loader: "source-map-loader" }
]
*/
// webpack v2
rules: [
{
test: /\.tsx$/,
exclude: /node_modules/,
loader: 'awesome-typescript-loader',
/*
query: {
type: 'babel'
}
*/
}
],
},
// インポートしたモジュールのパスが下記のいずれかにマッチする場合、
// それに相当するグローバル変数が存在するものとしてそれを使用します。
// 依存性の全てを扱うことを避けることができるようになり、
// ビルド間でそれらのライブラリがキャッシュ可能になるため重要です。
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
};
React Native †
- React native meetup ... プレゼン資料が見れる
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
