#author("2017-05-06T01:33:48+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]] -[[Tutorial: Intro To React:https://facebook.github.io/react/tutorial/tutorial.html]] --[[Reactチュートリアル: Intro To React【日本語翻訳】:http://mae.chab.in/archives/2943]] *React [#hfc2d1f1] -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シンタックスを使用できる **構成要素 [#n8e3fae7] ***コンポーネント [#pcabf881] -Reactでは「コンポーネント」を生成し組み合わせていくことでUIを構築していく -コンポーネントはデフォルトで用意されているものもあれば、自分で定義することもできる -コンポーネントは直接使用するのではなく、インスタンス化して使う -コンポーネントのインスタンスのことを「エレメント」と呼ぶ -Reactではコンポーネントやエレメントといった仮想的なDOMを通してUIを構築する。この仮想的なDOMのことを「Virtual DOM」と呼ぶ。 -コンポーネントは、自分自身の「状態」を保持することができる -状態は「state」に保持され「setState」によって変更できる ***propsとstate [#a7fe74cd] -React は View を構築するためのデータとして、props とstate の2つを利用する -props ... 親から受け取るデータで、自身のコンポーネントでは更新しない -state ... 自身の状態を表すもので、setStateメソッドで更新する -setStateでsteteが更新されると、Reactはこのツリーを含めてViewを全て更新する -stateは一番上位のルートコンポーネントが管理し、子のコンポーネントはstateを持たず、必要なデータは全て親からpropsとして受け取るステートレスなコンポーネントとして実装するのが一般的 -stateを監理するルートコンポーネントを「コンテナコンポーネント」と呼ぶ **React Router [#ce5108d4] -Reactのためのルーティングライブラリ -History APIとの連携や、ルーティングに応じたコンポーネントの描画を任せることができる -React Router ではルーティングをコンポーネントによって定義する -コンポーネントをネストすることで、ネストしたルーティングの定義も行える -子のルーティングは props.children に渡される。これにより、階層を持ったURLに対するルーティングが実現できる。 -ページ遷移には、React Router が提供する Link や、browserHistory オブジェクトが持つ push メソッドを使用する -React Router は、ルーティングの状態に応じた処理が定義できるライフサイクルメソッドを持っている --getComponent ... ルーティングに応じて必要なコンポーネントを非同期で読み込みたいときに使用 --onEnter ... 認可処理などの前処理をしてからコンポーネントを表示したい場合などに使用 --onChange --onLeave -React Router はミドルウェアとしての仕組みも持っている --[[react-router-scroll:https://github.com/taion/react-router-scroll]] を使うことで、ページ遷移時のスクロールの位置の復元やカスタマイズが可能 -インストール $ npm install --save react-router *アーキテクチャパターン [#m5758e17] -[[結局FluxやらReduxやらって何なのか個人的なまとめ:http://qiita.com/syossan27/items/7e1b2e07ac68b96bdaa7]] -[[ReactとFluxとReduxについて順を追って整理する:https://hogehuga.com/post-1095/]] **Flux [#l6879070] -Flux は Facebook が提唱したアーキテクチャパターン -データのフローが一方通行なのが特徴 [Action => Dispatcher => Store => View] => [Action ... -Action --ユーザイベントが発生した場合や、APIリクエストが完了した場合などに、状態をどのように変更すべきかという情報をまとめたもの -Dispatcher --ActionをStoreへ届けるためのもの -Store --アプリケーションの状態を管理するもの --Dispatcherのイベントを購読し、Actionに応じて状態を変更し、Viewに変更を伝える -View --Storeのイベントを購読し、Storeが更新されたら自身を更新する --Storeが管理しているデータをViewのstateとして使い、Storeが更新されたらsetStateを呼び出して子要素にpropsとして渡すことでDOMツリーを更新する **Redux [#aeb509ae] -[[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な関数にする *webpack [#m6d3ee21] -[[webpack - MODULE BUNDLER:https://webpack.github.io]] -[[webpack 入門:http://qiita.com/soarflat/items/28bf799f7e0335b68186]] -[[【意訳】Webpackの混乱ポイント:http://qiita.com/chuck0523/items/caacbf4137642cb175ec]] -[[Reactを「webpack + babel-loader」でビルドする方法:http://mae.chab.in/archives/2891]] -webpackは、browserifyと同様、複数のファイルの依存関係を顧慮してビルドを行うツール **webpack-dev-server [#z17a65f2] -[[webpack-dev-serverの基本的な使い方とポイント:http://dackdive.hateblo.jp/entry/2016/05/07/183335]] -[[webpack-dev-serverでReactをES6ですぐに書く:http://qiita.com/59naga/items/add00e8df306d7b8d05b]] **loader [#x390e5ad] ***PostCSS [#fc391073] -[[PostCSSならCSSプリプロセッサーをもう乗り換え続けなくて済むかもよ!:https://www.webprofessional.jp/7-postcss-plugins-to-ease-you-into-postcss/]] -[[PostCSS まとめ:http://qiita.com/morishitter/items/4a04eb144abf49f41d7d]] -[[Webpack2でpostcssを使う:http://qiita.com/namazu510/items/beb930472a4b76c2fd64]] -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'] }) ] } }), ], *React with JSX [#cd84e07f] -Babelモジュールのインストール $ npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react -webpack.config.js -babelrc { "presets": ["es2015", "react"] } *React with TypeScript [#d16ca6aa] -[[React + TypeScript + Webpackの最小構成:http://qiita.com/uryyyyyyy/items/63969d6ed9341affdffb]] -[[React + Redux + TypeScriptの最小構成:http://qiita.com/uryyyyyyy/items/3ad88cf9ca9393335f8c]] -[[React TypeScript webpack HMR 最小構成:http://qiita.com/dasakai/items/f7b294779b5a78dc6c84]] -[[React Native + TypeScript入門:http://qiita.com/uryyyyyyy/items/163027b4fb8606f4cdff]] -[[React & Webpack:http://js.studio-kingdom.com/typescript/tutorials/react_and_webpack]] **開発手順 [#bf53b568] -プロジェクト初期化、パッケージのインストール $ npm init $ npm install --save react react-dom @types/react @types/react-dom $ npm install --save-dev typescript awesome-typescript-loader source-map-loader $ npm install --save-dev webpack webpack-dev-server --実際のアプリケーションで使うモジュールは --save --開発時のみ必要なモジュールは --save-dev -[プロジェクトフォルダ]/package.json : "scripts": { "build": "webpack --progress --colors --config ./webpack.config.js", "start": "webpack-dev-server" }, : -[プロジェクトフォルダ]/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" } ], rules: [ { test: /\.tsx$/, exclude: /node_modules/, loader: 'awesome-typescript-loader', /* query: { type: 'babel' } */ } ], }, // インポートしたモジュールのパスが下記のいずれかにマッチする場合、 // それに相当するグローバル変数が存在するものとしてそれを使用します。 // 依存性の全てを扱うことを避けることができるようになり、 // ビルド間でそれらのライブラリがキャッシュ可能になるため重要です。 externals: { "react": "React", "react-dom": "ReactDOM" }, }; -コンパイル・実行 $ npm run build $ npm start *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/]] *Tips [#x35a54ce] -[[React x babel x browserifyでファイルに分割したコンポーネントのクラスがロードできない:https://biwako.io/react-component-class-not-to-be-loaded/]]