- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2017-04-15T22:56:36+09:00","default:admin","admin")
#author("2017-05-05T03:13:56+00:00","default:admin","admin")
-[[出来る限り短く説明するReact.js入門 - Qiita:http://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19]]
-[[Reactを使うとなぜjQueryが要らなくなるのか:http://qiita.com/naruto/items/fdb61bc743395f8d8faf]]
-[[今話題のReact.jsはどのようなWebアプリケーションに適しているか？:https://html5experts.jp/hokaccha/13301/]]
-[[いまさら聞けないReact、Virtual DOM、JSX超入門 :http://www.atmarkit.co.jp/ait/articles/1607/26/news138.html]]
-[[ReactとAngular 2の比較（React vs. Angular 2）:http://mae.chab.in/archives/2929]]
-[[ReactとAngular2の選択で迷ったときに考えたいこと:http://qiita.com/kmszk/items/2e3d6d2a71ae774d080a]]
-[[ReactとAngular2の使い方やコードの違いをコンポーネント単位で比較する:http://www.atmarkit.co.jp/ait/articles/1704/04/news012.html]]
*React [#hfc2d1f1]
-Reactは、Facebookが公開しているユーザーインタフェースを効率的に構築することを目的としたWebフロントエンドフレームワーク（JavaScriptライブラリ）
-Reactの特徴
--シンプル ... Reactを使ってUIを実装すると、「アプリケーションがどのように見えるか」を単純に表現できる
--叙述的 ... コンポーネントの状態がReactによって管理され、データに変更があるときには更新の必要があるコンポーネントだけ更新されるようになる
--コンポーネントベース
---「状態」の管理がカプセル化されたコンポーネントを使って、複雑なUIを構築することができる
---コンポーネントの組み合わせでアプリケーションを構築することにより、コードの再利用やテストなどを実施しやすくなる
**構成要素 [#n8e3fae7]
-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 [#u9ecde29]
-[[React+Redux入門:http://qiita.com/erukiti/items/e16aa13ad81d5938374e]]
-[[Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita:http://qiita.com/kiita312/items/49a1f03445b19cf407b7]]
-[[Redux入門 6日目 ReduxとReactの連携(公式ドキュメント和訳) - Qiita:http://qiita.com/kiita312/items/d769c85f446994349b52]]
-[[Reduxのファイル構成は『Ducks』がオススメ:http://qiita.com/uryyyyyyy/items/a88f37b76fe434c62bac]]
-Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワーク
-Reactではstateの管理するデータフローにFluxを提案しているが、ReduxはFluxの概念を拡張してより扱いやすく設計されている
-Reduxはstateを管理するためのライブラリなので、React以外にもAngularJSやjQueryなどと併せて使用することもできる
**Reduxの3原則 [#ic899b8e]
+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 [#i674bcec]
*webpack [#m6d3ee21]
-[[webpack - MODULE BUNDLER:https://webpack.github.io]]
-[[webpack 入門:http://qiita.com/soarflat/items/28bf799f7e0335b68186]]
-[[Reactを「webpack + babel-loader」でビルドする方法:http://mae.chab.in/archives/2891]]
-webpackは、browserifyと同様、複数のファイルの依存関係を顧慮してビルドを行うツール
*React with TypeScript [#d16ca6aa]
-[[React + TypeScript + Webpackの最小構成:http://qiita.com/uryyyyyyy/items/63969d6ed9341affdffb]]
-[[React + Redux + TypeScriptの最小構成:http://qiita.com/uryyyyyyy/items/3ad88cf9ca9393335f8c]]
-[[React Native + TypeScript入門:http://qiita.com/uryyyyyyy/items/163027b4fb8606f4cdff]]
-[[React & Webpack:http://js.studio-kingdom.com/typescript/tutorials/react_and_webpack]]
$ 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 [#e1b57eef]
-[[React Native:https://facebook.github.io/react-native/]]
-[[React Nativeで変わるアプリ開発 高木 健介 先生 - Schoo（スクー）:https://schoo.jp/class/3815]]
-[[React Nativeとネイティブアプリでの開発の違いとは:https://techacademy.jp/magazine/11652]]
-[[ReactNativeで何が出来るのかさっと知れるサイト、その他リンクまとめ:http://qiita.com/imaimiami/items/8e62a5111fe48a65b911]]
-[[React Nativeはアプリ開発者の夢を見るか？ - アニマネ開発日誌:http://animane.hatenablog.com/entry/2016/07/24/181833]]
-React native meetup ... プレゼン資料が見れる
--[[React.js meetup × React Native meetup:https://react-native-meetup.connpass.com/event/49024/]]
---[[What is React Native?:https://speakerdeck.com/januswel/what-is-react-native]]
--[[react-native meetup#4:https://react-native-meetup.connpass.com/event/46778/]]
--[[react-native meetup#3:https://react-native-meetup.connpass.com/event/40745/]]
--[[react-native meetup#2:https://react-native-meetup.connpass.com/event/32213/]]
--[[react-native meetup#1:https://react-native-meetup.connpass.com/event/30484/]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
