React のバックアップの現在との差分(No.21)

追加された行はこの色です。
削除された行はこの色です。
#author("2023-03-15T02:55:38+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/*

*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']
           })
         ]
       }
     }),
 ],

*セキュリティ [#b125ba37]
-[[React Hooksに潜む罠／一緒にプレイするだけで乗っ取り！？【Security․Tokyo #1】:https://blog.flatt.tech/entry/security_tokyo_1_part3]]



*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/]]