JavaScript/React
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
-これもよくわからん
#contents
*Reactとは [#u1aaf24d]
-状態を持たないコンポーネントをJSXで定義する。状態はprop...
-戻りは仮装DOMという名の単なるJSONなので軽い。
-仮想DOMの差分はrenderメソッドで自動で反映してくれる（JQu...
https://qiita.com/naruto/items/fdb61bc743395f8d8faf
**react hooks form [#z63664cb]
-useForm
https://github.com/react-hook-form/react-hook-form/tree/m...
*用語 [#p1340b06]
|state|コンポーネントが持つ状態。変わるとviewが再レンダリ...
|props|コンポーネントの外から渡される情報。親が子に渡すな...
*参考記事 [#j888713f]
https://mae.chab.in/archives/2956#post2956-2
*やってみる [#xaf01302]
npm install -g create-react-app
npm install react-redux redux
*コンポーネントの種類 [#a38731f7]
|functional Component|状態を持たない。記述が楽|
|Pure Component|ライフサイクルを持つ。Functionalに比べる...
*使っているライブラリ [#t086fecf]
**react-router [#dc1ad8c7]
パスで遷移できる様になる
**react-redux [#p3f75ce4]
状態管理をreduxに任せることができる。慣れないとかえって複雑
**redux-form [#j3ca428d]
import { reducer as formReducer } from 'redux-form'
const rootReducer = combineReducers({
form: formReducer
})
**redux-localstorage [#e647d337]
stateをlocalstorageに保存
*いろいろ調べた [#r6ae2fc6]
**React.Component [#mdb2918f]
-状態を持つ
-ライフサイクルを持つ
-重いらしいので最近はFunctional Component + HOCがおすすめ
**Functional Component [#k5bb6cdf]
-状態を持たない
-ボタンなどの親コンポーネントに組み込む
-Propが変わると再レンダリング
**Pure Component [#m24409dd]
Reactのv15.3から追加されたコンポーネントで基本的な部分はC...
**Class Component [#qb1a5b03]
-stateを持つ
-ライフサイクルイベントがある
-上記Functional Componentの組み合わせて作る
**引数の入力型指定 PropTypes [#q4364d89]
Greeting.propTypes = {
name: PropTypes.string
};
*テスト [#p22db1bc]
-chai
-enzyme
終了行:
-これもよくわからん
#contents
*Reactとは [#u1aaf24d]
-状態を持たないコンポーネントをJSXで定義する。状態はprop...
-戻りは仮装DOMという名の単なるJSONなので軽い。
-仮想DOMの差分はrenderメソッドで自動で反映してくれる（JQu...
https://qiita.com/naruto/items/fdb61bc743395f8d8faf
**react hooks form [#z63664cb]
-useForm
https://github.com/react-hook-form/react-hook-form/tree/m...
*用語 [#p1340b06]
|state|コンポーネントが持つ状態。変わるとviewが再レンダリ...
|props|コンポーネントの外から渡される情報。親が子に渡すな...
*参考記事 [#j888713f]
https://mae.chab.in/archives/2956#post2956-2
*やってみる [#xaf01302]
npm install -g create-react-app
npm install react-redux redux
*コンポーネントの種類 [#a38731f7]
|functional Component|状態を持たない。記述が楽|
|Pure Component|ライフサイクルを持つ。Functionalに比べる...
*使っているライブラリ [#t086fecf]
**react-router [#dc1ad8c7]
パスで遷移できる様になる
**react-redux [#p3f75ce4]
状態管理をreduxに任せることができる。慣れないとかえって複雑
**redux-form [#j3ca428d]
import { reducer as formReducer } from 'redux-form'
const rootReducer = combineReducers({
form: formReducer
})
**redux-localstorage [#e647d337]
stateをlocalstorageに保存
*いろいろ調べた [#r6ae2fc6]
**React.Component [#mdb2918f]
-状態を持つ
-ライフサイクルを持つ
-重いらしいので最近はFunctional Component + HOCがおすすめ
**Functional Component [#k5bb6cdf]
-状態を持たない
-ボタンなどの親コンポーネントに組み込む
-Propが変わると再レンダリング
**Pure Component [#m24409dd]
Reactのv15.3から追加されたコンポーネントで基本的な部分はC...
**Class Component [#qb1a5b03]
-stateを持つ
-ライフサイクルイベントがある
-上記Functional Componentの組み合わせて作る
**引数の入力型指定 PropTypes [#q4364d89]
Greeting.propTypes = {
name: PropTypes.string
};
*テスト [#p22db1bc]
-chai
-enzyme
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
