- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2017-05-13T05:55:09+00:00","default:admin","admin")
#author("2023-04-11T04:38:19+00:00","default:admin","admin")
-[[React Docs:https://facebook.github.io/react/docs/hello-world.html]]
-[[DevDocs - React:http://devdocs.io/react/]]
-[[React入門:https://react.keicode.com/]]
-[[React の概要:https://docs.microsoft.com/ja-jp/windows/dev-environment/javascript/react-overview]]
-[[NodeJS とは何か:https://docs.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-overview]]
-[[出来る限り短く説明する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入門」連載一覧:http://codezine.jp/article/corner/688]]
-[[React及びその周辺技術、事例から見るReact最新情報！──HTML5とか勉強会イベントレポート:https://html5experts.jp/albatrosary/19288/]]
*比較 [#o5ff887b]
-[[The State of JS 2022 からみる JS フレームワークの動向:https://www.gaji.jp/blog/2023/01/30/14069/]]
-[[[Twitter] React ユーザーが Vue を選ばない理由:https://zenn.dev/sa2knight/articles/why_react_folks_dont_choose_vue]]
-[[海外の React ユーザーが Vue を使わない理由メモ:https://zenn.dev/sa2knight/scraps/09ffa31369cf70]]
-[[Reactを使うのかVueを使うのかについて個人的なモチベーションを整理したかった:https://zenn.dev/marokanatani/articles/compare_vue_and_react]]
-[[react-hook-form超入門 【React】サンプル付き:https://tech-lab.sios.jp/archives/33761]]
*入門 [#xc2014af]
-[[既存のウェブサイトに React を追加する:https://ja.reactjs.org/docs/add-react-to-a-website.html]]
-[[React初学者が必ず押さえておきたい考え方とは？【コンポーネント指向のフロントエンド】:https://www.i3design.jp/in-pocket/8854]]
-[[Windows での NodeJS のインストール:https://docs.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-windows]]
-[[Reactチュートリアル1：犬画像ギャラリーを作ろう:https://zenn.dev/likr/articles/6be53ca64f29aa035f07]]
-[[Reactチュートリアル2：レビューサイトを作ろう:https://zenn.dev/likr/articles/react-with-heroku]]
-[[【初心者】#1 Reactの基礎とMaterial-UI使って綺麗に作ってみる:https://qiita.com/Bashi50/items/8964cc55c596e51fcbbe]]
-[[【初心者】#2 React axiosでAPI データ取得:https://qiita.com/Bashi50/items/b4e0626b2ede73568eab]]
-[[【React初心者】 #3 ルーティング・ページ遷移を作る！ react-router-dom:https://qiita.com/Bashi50/items/ce8aaeaa52f73ba971b9]]
*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コンポーネントへの理解を深める:http://codezine.jp/article/detail/9928]]
-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を監理するルートコンポーネントを「コンテナコンポーネント」と呼ぶ
**開発環境の準備 [#dfb92382]
-[[Installation - React:https://facebook.github.io/react/docs/installation.html#creating-a-new-application]]
-Node.js のインストール
-[[Create React App:https://github.com/facebookincubator/create-react-app]] のインストール
$ npm install -g create-react-app
-プロジェクトの作成、
$ create-react-app [プロジェクト名]
$ cd [プロジェクト名]
$ npm start
-雛形の削除
$ rm -rf src/*
**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]] を使うことで、ページ遷移時のスクロールの位置の復元やカスタマイズが可能
**React Router ver.4 [#u10d22bd]
-[[React Router v4の変更点:http://qiita.com/yutasuzuki/items/19d272e05669bafc926e]]
-[[react-router@v4対応したので雑に晒す:http://qiita.com/Jey/items/dae2074427547e63569b]]
-[[【react-router@3.x→4.x】動かない。。アップデートで困っている人が読む記事(how to update react-router3.x vs 4.x):http://kenjimorita.jp/react-router3-x%E2%86%924-x]]
-[[【react-router@3.x→4.x】動かない。。アップデートで困っている人が読む記事(props(history, location, match等)をRouteから渡したい！！):http://kenjimorita.jp/react-router3-x%E2%86%924-x_2/]]
-[[notes in migrating from React-Router-3 to React-Router-4:http://ezcook.de/2017/04/26/notes-in-migrating-from-React-Router-3-to-React-Router-4/]]
-Ver.4 で仕様が結構変わっている！！
--以前はreact-routerからimportする仕様だったが、v4はwebとnativeが分かれるようになった
---webの場合は react-router-dom
---nativeの場合は react-router-native
--URL起因のパラメータ周りの呼び方変更 this.props.params -> this.props.match.params
--Route定義がしれっと無名関数になってる
--browserHistoryの取り扱い
---ver.3
import { Router, Route, IndexRoute, IndexLink, browserHistory } from 'react-router';
:
<Router history={browserHistory}>
<Route path='/' component={App}>
<IndexRoute component={Top} />
<Route path='hoge' component={Hoge} />
</Route>
</Router>
---ver.4
import { Route, BrowserRouter } from 'react-router-dom';
:
<BrowserRouter>
<div>
<Route exact={true} path='/' component={Top}/>
<Route path='hoge' component={Hoge}/>
</div>
</BrowserRouter>
--IndexRedirectがなくなり、相対パスでなく絶対パス？
---ver.3
<Route path="/one">
<IndexRedirect to="1" />
<Route path="1" component={First} />
<Route path="2" component={Second} />
</Route>
---ver.4
<Route path="/one">
<Switch>
<Route exact path="/one/1" component={First} />
<Route exact path="/one/2" component={Second} />
<Redirect to="/one/1" /> <== パスがマッチしなかった場合は最後に書くこと！
</Switch>
</Route>
-破壊的な変更もあるので、v3で作ったものを無理やり乗せかえるのはやめとけ！
-マニュアル ... これをしっかり読んで対応すべし！
--[[React Router DOM:https://reacttraining.com/react-router/web/guides/quick-start]]
--[[React Router Native:https://reacttraining.com/react-router/native/guides/quick-start]]
-ver.4 へのアップデート
$ npm un -S react-router && npm i -S react-router-dom
*アーキテクチャパターン [#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ツリーを更新する
*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 のチュートリアルをやってみる:http://qiita.com/cortyuming/items/ba4c4d61fdf262bc2303]]
-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]]
-起動
$ webpack-dev-server
-起動（プログレスバー表示、色付けあり）
$ webpack-dev-server --progress --colors
**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
*セキュリティ [#b125ba37]
-[[React Hooksに潜む罠／一緒にプレイするだけで乗っ取り！？【Security․Tokyo #1】:https://blog.flatt.tech/entry/security_tokyo_1_part3]]
-webpack.config.js
-babelrc
{
"presets": ["es2015", "react"]
}
*React with TypeScript [#d16ca6aa]
-[[TypeScript再入門覚書 ① Atom環境構築編:http://qiita.com/junkjunctions/items/5938a6d706548cd91218]]
-[[TypeScript再入門覚書 ② npmとwebpackでプロジェクト作成:http://qiita.com/junkjunctions/items/13c8e87044bd6be31b0d]]
-[[TypeScript再入門覚書 ③ React & Redux:http://qiita.com/junkjunctions/items/1e05edae6b28f9e6f033]]
-[[Hello React and TypeScript:https://charleslbryant.gitbooks.io/hello-react-and-typescript/content/index.html]]
-[[React+TypeScriptもいいぞ:https://www.slideshare.net/mitsuruogawa33/reacttype-script]]
-[[React + Redux + TypeScript でWebアプリを作った感想・勉強法と Angular との比較:http://qiita.com/star__hoshi/items/34eb4ccafcfa100b5cad]]
-[[TypeScript1.6 + React 書いてみてハマったポイントとか:http://qiita.com/Linda_pp/items/ff0feac7e34a65657b3c]]
-[[React JSX with TypeScript(1.6):http://qiita.com/Quramy/items/70f97e68d21859d91ed8]]
-[[React & Webpack:https://www.typescriptlang.org/docs/handbook/react-&-webpack.html]]
-[[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]]
-[[TypeScriptでReactを書く(1)：JSX:http://qiita.com/KeitaMoromizato/items/110cf26b8602a415f443]]
-[[create-react-app で TypeScript の環境を作る:http://qiita.com/ehr174/items/85b7cb7e7c93efef8889]]
**開発手順 [#bf53b568]
-プロジェクト作成（create-react-app使用）【推奨】
$ create-react-app --scripts-version=react-scripts-ts [プロジェクト名]
$ cd [プロジェクト名]
$ npm start
$ rm -rf src/*
--create-react-app で --scripts-version=react-scripts-ts オプションを付けて実行
-プロジェクト作成（昔のやり方？）
$ mkdir [プロジェクト名]
$ cd [プロジェクト名]
$ npm init
$ npm install --save react react-dom @types/react @types/react-dom
$ npm install --save-dev webpack webpack-dev-server
--実際のアプリケーションで使うモジュールは --save
--開発時のみ必要なモジュールは --save-dev
--[プロジェクトフォルダ]/package.json
:
"scripts": {
"build": "webpack --progress --colors",
"start": "webpack-dev-server"
},
:
--TypeScript関連パッケージのインストール
$ 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" }
],
rules: [
{
test: /\.tsx$/,
exclude: /node_modules/,
loader: 'awesome-typescript-loader',
}
],
},
// インポートしたモジュールのパスが下記のいずれかにマッチする場合、
// それに相当するグローバル変数が存在するものとしてそれを使用します。
// 依存性の全てを扱うことを避けることができるようになり、
// ビルド間でそれらのライブラリがキャッシュ可能になるため重要です。
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
};
-src/index.js（アプリ本体が App.js の場合）... index.js は必須
import React from 'react';
import { render } from 'react-dom';
import App from './App';
render(
(<App />),
document.getElementById('root')
);
-コンパイル・実行
$ npm run build
$ npm start
*Tips [#o21df492]
**bind [#s2455956]
-[[React.jsのrenderの戻り値の中で.bindで新しい関数を定義してはいけないわけ:http://qiita.com/shuntksh/items/fd81ca9aa31ea8f962e2]]
**export default [#s630b953]
-[[【Q&A】ReactJSのComponentをimport,exportする:http://qiita.com/HIGAX/items/28f3bec814928b7395da]]
*その他 [#m11610ab]
-[[React アプリでカメラ撮影し画像データを取得する [react-webcam 使用]:https://blog.usize-tech.com/take-photo-by-react-app/]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
