React
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
-[[React Docs:https://facebook.github.io/react/docs/hello...
-[[DevDocs - React:http://devdocs.io/react/]]
-[[React入門:https://react.keicode.com/]]
-[[React の概要:https://docs.microsoft.com/ja-jp/windows/...
-[[NodeJS とは何か:https://docs.microsoft.com/ja-jp/windo...
-[[出来る限り短く説明するReact.js入門 - Qiita:http://qiit...
-[[Reactを使うとなぜjQueryが要らなくなるのか:http://qiita...
-[[今話題のReact.jsはどのようなWebアプリケーションに適し...
-[[いまさら聞けないReact、Virtual DOM、JSX超入門 :http://...
-[[ReactとAngular 2の比較（React vs. Angular 2）:http://m...
-[[ReactとAngular2の選択で迷ったときに考えたいこと:http:/...
-[[ReactとAngular2の使い方やコードの違いをコンポーネント...
-[[Tutorial: Intro To React:https://facebook.github.io/re...
--[[Reactチュートリアル: Intro To React【日本語翻訳】:htt...
-[[「基礎からはじめるReact入門」連載一覧:http://codezine....
-[[React及びその周辺技術、事例から見るReact最新情報！──HT...
*比較 [#o5ff887b]
-[[The State of JS 2022 からみる JS フレームワークの動向:...
-[[[Twitter] React ユーザーが Vue を選ばない理由:https://...
-[[海外の React ユーザーが Vue を使わない理由メモ:https:/...
-[[Reactを使うのかVueを使うのかについて個人的なモチベーシ...
-[[react-hook-form超入門 【React】サンプル付き:https://te...
*入門 [#xc2014af]
-[[既存のウェブサイトに React を追加する:https://ja.react...
-[[React初学者が必ず押さえておきたい考え方とは？【コンポ...
-[[Windows での NodeJS のインストール:https://docs.micros...
-[[Reactチュートリアル1：犬画像ギャラリーを作ろう:https:/...
-[[Reactチュートリアル2：レビューサイトを作ろう:https://z...
-[[【初心者】#1 Reactの基礎とMaterial-UI使って綺麗に作っ...
-[[【初心者】#2 React axiosでAPI データ取得:https://qiita...
-[[【React初心者】 #3 ルーティング・ページ遷移を作る！ re...
*React [#hfc2d1f1]
-Reactは、Facebookが公開しているユーザーインタフェースを...
-Reactの特徴
--シンプル ... Reactを使ってUIを実装すると、「アプリケー...
--叙述的 ... コンポーネントの状態がReactによって管理され...
--コンポーネントベース
---「状態」の管理がカプセル化されたコンポーネントを使って...
---コンポーネントの組み合わせでアプリケーションを構築する...
-エレメントを生成するコードは「JSX」を使うと、よりシンプ...
-JSXはECMAScript（JavaScript）にXMLライクのシンタックスを...
-JSXを使うと、JavaScriptコード中にHTMLタグを埋め込んでい...
-Webページ内でJSXを使用するには、「Babel」を導入する方法...
-Babelは、ECMAScript（JavaScript）の次期バージョンを現行...
-BabelはJSXシンタックスを変換する機能を持っているため、Ba...
**構成要素 [#n8e3fae7]
***コンポーネント [#pcabf881]
-[[Reactコンポーネントへの理解を深める:http://codezine.jp...
-Reactでは「コンポーネント」を生成し組み合わせていくこと...
-コンポーネントはデフォルトで用意されているものもあれば、...
-コンポーネントは直接使用するのではなく、インスタンス化し...
-コンポーネントのインスタンスのことを「エレメント」と呼ぶ
-Reactではコンポーネントやエレメントといった仮想的なDOMを...
-コンポーネントは、自分自身の「状態」を保持することができる
-状態は「state」に保持され「setState」によって変更できる
***propsとstate [#a7fe74cd]
-React は View を構築するためのデータとして、props とstat...
-props ... 親から受け取るデータで、自身のコンポーネントで...
-state ... 自身の状態を表すもので、setStateメソッドで更新...
-setStateでsteteが更新されると、Reactはこのツリーを含めて...
-stateは一番上位のルートコンポーネントが管理し、子のコン...
-stateを監理するルートコンポーネントを「コンテナコンポー...
**開発環境の準備 [#dfb92382]
-[[Installation - React:https://facebook.github.io/react/...
-Node.js のインストール
-[[Create React App:https://github.com/facebookincubator/...
$ 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/28bf799f7...
-[[【意訳】Webpackの混乱ポイント:http://qiita.com/chuck05...
-[[Reactを「webpack + babel-loader」でビルドする方法:http...
-[[webpack のチュートリアルをやってみる:http://qiita.com/...
-webpackは、browserifyと同様、複数のファイルの依存関係を...
**webpack-dev-server [#z17a65f2]
-[[webpack-dev-serverの基本的な使い方とポイント:http://da...
-[[webpack-dev-serverでReactをES6ですぐに書く:http://qiit...
-起動
$ webpack-dev-server
-起動（プログレスバー表示、色付けあり）
$ webpack-dev-server --progress --colors
**loader [#x390e5ad]
***PostCSS [#fc391073]
-[[PostCSSならCSSプリプロセッサーをもう乗り換え続けなくて...
-[[PostCSS まとめ:http://qiita.com/morishitter/items/4a04...
-[[Webpack2でpostcssを使う:http://qiita.com/namazu510/ite...
-PostCSSはNode.js製の「CSSツールを作るためのフレームワー...
-プラグインを組み合わせることで様々な変換を可能にする
-Facebook, GitHub, Google等、日本では Qiitaで使われている
-インストール
$ npm install --save-dev css-loader postcss-loader postc...
-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に潜む罠／一緒にプレイするだけで乗っ取り！...
*Tips [#o21df492]
**bind [#s2455956]
-[[React.jsのrenderの戻り値の中で.bindで新しい関数を定義...
**export default [#s630b953]
-[[【Q&A】ReactJSのComponentをimport,exportする:http://qi...
*その他 [#m11610ab]
-[[React アプリでカメラ撮影し画像データを取得する [react-...
終了行:
-[[React Docs:https://facebook.github.io/react/docs/hello...
-[[DevDocs - React:http://devdocs.io/react/]]
-[[React入門:https://react.keicode.com/]]
-[[React の概要:https://docs.microsoft.com/ja-jp/windows/...
-[[NodeJS とは何か:https://docs.microsoft.com/ja-jp/windo...
-[[出来る限り短く説明するReact.js入門 - Qiita:http://qiit...
-[[Reactを使うとなぜjQueryが要らなくなるのか:http://qiita...
-[[今話題のReact.jsはどのようなWebアプリケーションに適し...
-[[いまさら聞けないReact、Virtual DOM、JSX超入門 :http://...
-[[ReactとAngular 2の比較（React vs. Angular 2）:http://m...
-[[ReactとAngular2の選択で迷ったときに考えたいこと:http:/...
-[[ReactとAngular2の使い方やコードの違いをコンポーネント...
-[[Tutorial: Intro To React:https://facebook.github.io/re...
--[[Reactチュートリアル: Intro To React【日本語翻訳】:htt...
-[[「基礎からはじめるReact入門」連載一覧:http://codezine....
-[[React及びその周辺技術、事例から見るReact最新情報！──HT...
*比較 [#o5ff887b]
-[[The State of JS 2022 からみる JS フレームワークの動向:...
-[[[Twitter] React ユーザーが Vue を選ばない理由:https://...
-[[海外の React ユーザーが Vue を使わない理由メモ:https:/...
-[[Reactを使うのかVueを使うのかについて個人的なモチベーシ...
-[[react-hook-form超入門 【React】サンプル付き:https://te...
*入門 [#xc2014af]
-[[既存のウェブサイトに React を追加する:https://ja.react...
-[[React初学者が必ず押さえておきたい考え方とは？【コンポ...
-[[Windows での NodeJS のインストール:https://docs.micros...
-[[Reactチュートリアル1：犬画像ギャラリーを作ろう:https:/...
-[[Reactチュートリアル2：レビューサイトを作ろう:https://z...
-[[【初心者】#1 Reactの基礎とMaterial-UI使って綺麗に作っ...
-[[【初心者】#2 React axiosでAPI データ取得:https://qiita...
-[[【React初心者】 #3 ルーティング・ページ遷移を作る！ re...
*React [#hfc2d1f1]
-Reactは、Facebookが公開しているユーザーインタフェースを...
-Reactの特徴
--シンプル ... Reactを使ってUIを実装すると、「アプリケー...
--叙述的 ... コンポーネントの状態がReactによって管理され...
--コンポーネントベース
---「状態」の管理がカプセル化されたコンポーネントを使って...
---コンポーネントの組み合わせでアプリケーションを構築する...
-エレメントを生成するコードは「JSX」を使うと、よりシンプ...
-JSXはECMAScript（JavaScript）にXMLライクのシンタックスを...
-JSXを使うと、JavaScriptコード中にHTMLタグを埋め込んでい...
-Webページ内でJSXを使用するには、「Babel」を導入する方法...
-Babelは、ECMAScript（JavaScript）の次期バージョンを現行...
-BabelはJSXシンタックスを変換する機能を持っているため、Ba...
**構成要素 [#n8e3fae7]
***コンポーネント [#pcabf881]
-[[Reactコンポーネントへの理解を深める:http://codezine.jp...
-Reactでは「コンポーネント」を生成し組み合わせていくこと...
-コンポーネントはデフォルトで用意されているものもあれば、...
-コンポーネントは直接使用するのではなく、インスタンス化し...
-コンポーネントのインスタンスのことを「エレメント」と呼ぶ
-Reactではコンポーネントやエレメントといった仮想的なDOMを...
-コンポーネントは、自分自身の「状態」を保持することができる
-状態は「state」に保持され「setState」によって変更できる
***propsとstate [#a7fe74cd]
-React は View を構築するためのデータとして、props とstat...
-props ... 親から受け取るデータで、自身のコンポーネントで...
-state ... 自身の状態を表すもので、setStateメソッドで更新...
-setStateでsteteが更新されると、Reactはこのツリーを含めて...
-stateは一番上位のルートコンポーネントが管理し、子のコン...
-stateを監理するルートコンポーネントを「コンテナコンポー...
**開発環境の準備 [#dfb92382]
-[[Installation - React:https://facebook.github.io/react/...
-Node.js のインストール
-[[Create React App:https://github.com/facebookincubator/...
$ 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/28bf799f7...
-[[【意訳】Webpackの混乱ポイント:http://qiita.com/chuck05...
-[[Reactを「webpack + babel-loader」でビルドする方法:http...
-[[webpack のチュートリアルをやってみる:http://qiita.com/...
-webpackは、browserifyと同様、複数のファイルの依存関係を...
**webpack-dev-server [#z17a65f2]
-[[webpack-dev-serverの基本的な使い方とポイント:http://da...
-[[webpack-dev-serverでReactをES6ですぐに書く:http://qiit...
-起動
$ webpack-dev-server
-起動（プログレスバー表示、色付けあり）
$ webpack-dev-server --progress --colors
**loader [#x390e5ad]
***PostCSS [#fc391073]
-[[PostCSSならCSSプリプロセッサーをもう乗り換え続けなくて...
-[[PostCSS まとめ:http://qiita.com/morishitter/items/4a04...
-[[Webpack2でpostcssを使う:http://qiita.com/namazu510/ite...
-PostCSSはNode.js製の「CSSツールを作るためのフレームワー...
-プラグインを組み合わせることで様々な変換を可能にする
-Facebook, GitHub, Google等、日本では Qiitaで使われている
-インストール
$ npm install --save-dev css-loader postcss-loader postc...
-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に潜む罠／一緒にプレイするだけで乗っ取り！...
*Tips [#o21df492]
**bind [#s2455956]
-[[React.jsのrenderの戻り値の中で.bindで新しい関数を定義...
**export default [#s630b953]
-[[【Q&A】ReactJSのComponentをimport,exportする:http://qi...
*その他 [#m11610ab]
-[[React アプリでカメラ撮影し画像データを取得する [react-...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
