「React.js」カテゴリーアーカイブ

【Redux/combineReducers】これが出たら真っ先に疑う箇所「Uncaught TypeError: (0 , _redux.combinReducers) is not a function」

【Redux/combineReducers】これが出たら真っ先に疑う箇所「Uncaught TypeError: (0 , _redux.combinReducers) is not a function」
【Redux/combineReducers】これが出たら真っ先に疑う箇所「Uncaught TypeError: (0 , _redux.combinReducers) is not a function」

Uncaught TypeError: (0 , _redux.combinReducers) is not a function
そのreducer、関数ではないよ。やだよ関数じゃないと。と言われています。

呼び出し側と呼び出し元の不一致のはず。
not mutch called flie and call file

罰としてドキュメント読む。
try to read document of combineReducers

Arguments

reducers (Object): An object whose values correspond to different reducing functions that need to be combined into one. See the notes below for some rules every passed reducer must follow.

引数:reducerオブジェクト 。値は一つに結合される必要がある異なるreducer関数

Earlier documentation suggested the use of the ES6 import * as reducers syntax to obtain the reducers object. This was the source of a lot of confusion, which is why we now recommend exporting a single reducer obtained using combineReducers() from reducers/index.js instead. An example is included below.

早期のドキュメントではreducersオブジェクトを取得するためにES6 import * as reducers構文の使用を提案してました。
これは多くの混乱の元です。わたしたちは 代わりに、combineReducers()を使ってreducers/index.jsから取得する一つのreducerとしてexportすることをお勧めします。

Returns

(Function): A reducer that invokes every reducer inside the reducers object, and constructs a state object with the same shape.

返り値:関数
reducersオブジェクト内で同じ形状を持ったstateオブジェクトをもつ、reducer毎に実行するreducer

//reducer/index.js

【Redex/combineReducers】これが出たら真っ先に疑う箇所「Uncaught TypeError: (0 , _redux.combinReducers) is not a function」
【Redex/combineReducers】これが出たら真っ先に疑う箇所「Uncaught TypeError: (0 , _redux.combinReducers) is not a function」

other file is ..

//reducer/counterReducer.js

【Redex/combineReducers】これが出たら真っ先に疑う箇所「Uncaught TypeError: (0 , _redux.combinReducers) is not a function」
【Redex/combineReducers】これが出たら真っ先に疑う箇所「Uncaught TypeError: (0 , _redux.combinReducers) is not a function」

combinReducerを使っているファイルでこのようにしてみる。
in file which used function of combineReducer,
write console.log()

console.log(inputReducer, counterReducer, combinReducers);

【Redex/combineReducers】これが出たら真っ先に疑う箇所「Uncaught TypeError: (0 , _redux.combinReducers) is not a function」
【Redex/combineReducers】これが出たら真っ先に疑う箇所「Uncaught TypeError: (0 , _redux.combinReducers) is not a function」

undefined x 3 なので 読み込まれていない
see undefined *3

ここに習って
see document redux combineReducers
https://redux.js.org/docs/api/combineReducers.html

それぞれのファイル間でのexport import 書き直す
fix file like this

【Redex/combineReducers】これが出たら真っ先に疑う箇所「Uncaught TypeError: (0 , _redux.combinReducers) is not a function」
【Redex/combineReducers】これが出たら真っ先に疑う箇所「Uncaught TypeError: (0 , _redux.combinReducers) is not a function」
【Redex/combineReducers】これが出たら真っ先に疑う箇所「Uncaught TypeError: (0 , _redux.combinReducers) is not a function」
【Redex/combineReducers】これが出たら真っ先に疑う箇所「Uncaught TypeError: (0 , _redux.combinReducers) is not a function」

export default function fafa () {}

情けない。

今度は読み込まれた

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-22-12-54-01

combinReducersだけまだ読み込まれていない(undefined)
なぜなら綴りが違うから(this is typo)
情けない。

fix
combinReducers

combineReducers

エラーは解消されて幸せ。

はい。つぎつぎ

【関連記事】
【React】Reactの動きを理解したい人の為の最小サンプル

【React入門】過去のREACT初心者の自分にpropsとstateの違いを簡単に説明してあげたい

【React × ECMAScript2015 × Flux】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるカウンター】

React × Flux × ECMAScript2015 LINE風チャット

他のReact記事

フロントエンド記事

GitHub

qiita

【Redux】たまに何をやっているか絵にする方が理解してないところが分かる

Reduxとredux-sagaなどMiddlewareの呼び方とかを絵にした。Fluxのときもそうだったけど、、

reselect
applyMiddleware
redux-saga
redux-thunk

image

それぞれ何を解決しているかとかやりたいこと、argumentsとreturnとか、概要は理解した。
引き続き細かいAPI仕様を読んでいこう。。
でわーーー

【React/Redux】わたしもみている | Container Components

Container Components | @chantastic

【Redux】ReactやるにもAngularやるにもとにかくRedux
【Redux】ReactやるにもAngularやるにもとにかくRedux

記事はこのコードについて悪くはないがReactの利点を見逃していると述べています。

[code language="javascript"]
// CommentList.js
class CommentList extends React.Component {
constructor() {
super();
this.state = { comments: [] }
}
componentDidMount() {
$.ajax({
url: "/my-comments.json",
dataType: 'json',
success: function(comments) {
this.setState({comments: comments});
}.bind(this)
});
}
render() {
return

<ul> {this.state.comments.map(renderComment)} </ul>

;
}
renderComment({body, author}) {
return

<li>{body}—{author}</li>

;
}
}

[/code]

これをContainerとComponentを分ける。
なぜ分けるか
・データフェッチとレンダリングの関心を分ける→読みやすいとか保守しやすい
・再利用性が高まる
・型定義を使える(PropsType)

Container
→fetchして子コンポーネントに渡すだけ。stateを扱う

Component
→子コンポーネントはrenderするだけ。propsを扱う

Data structure
Your markup components should state expectations of the data they require. PropTypes are great for this.

コンポーネントはコンテナーからどんなデータが期待されて渡ってくるかを前もってPropTypesとして書いておくことで予想できてバグを見つけられたり、学習コストを下げるのですね。

コンテナー

[code language="javascript"]
// CommentListContainer.js
class CommentListContainer extends React.Component {
constructor() {
super();
this.state = { comments: [] }
}
componentDidMount() {
$.ajax({
url: "/my-comments.json",
dataType: 'json',
success: function(comments) {
this.setState({comments: comments});
}.bind(this)
});
}
render() {
//CommentListとして切り出す。
return <CommentList comments={this.state.comments} />;
}
}
[/code]

コンポーネント

[code language="javascript"]
// CommentList.js
class CommentList extends React.Component {
constructor(props) {
super(props);//props継承する
}
render() {
return

<ul> {this.props.comments.map(renderComment)} </ul>

;
}
renderComment({body, author}) {
return

<li>{body}—{author}</li>

;
}
}
[/code]

これはgoodだそうです。
ただ「この記事」に言わせるとここからが本番らしいです。
※「この記事」はReduxのチュートリアルにリンクされている記事で、リンク先の「Presentational and Container Components」文中で、Reduxを学ぶ上で一読すべき記事として書かれています。

ちょっと今日はここまで

でわーー

reference
Container Components | @chantastic

【関連記事】
【React】Reactの動きを理解したい人の為の最小サンプル

【React入門】過去のREACT初心者の自分にpropsとstateの違いを簡単に説明してあげたい

【React × ECMAScript2015 × Flux】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるカウンター】

React × Flux × ECMAScript2015 LINE風チャット

他のReact記事

フロントエンド記事

GitHub

qiita

【React】子供のメソッドを親から呼びたい!!ref/refs使ったら「Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded」

親のコンポーネントからレンダー内で読み込んでいる子コンポーネント内のメソッドを呼びたいのですが、
上のようなエラー出ることがあります。
続きを読む

【React】bugg??もしもreact-slickがあるページかつiphoneのsafari,chomeのみinput値を入力中にスタイルが崩れたら「if you encounter in the safari,chrome browser in iPhone, when you typing text in input, (the page are using the react-slick)(react bug input safari iPhone react-slick javascript onChange onBlur)」

【phenomenon】
入力しようとすると(If you try to enter)

【React】bugg??もしもreact-slickがあるページかつsafari、chomeのみinput値を入力中にスタイルが崩れたら「if you encounter in the safari browser, when you typing text in input, (the page are using the react-slick)(react bug input safari in iPhone react-slick javascript onChange onBlur)」
【React】bugg??もしもreact-slickがあるページかつsafari、chomeのみinput値を入力中にスタイルが崩れたら「if you encounter in the safari browser, when you typing text in input, (the page are using the react-slick)(react bug input safari in iPhone react-slick javascript onChange onBlur)」

画面が背景色になる(The screen is the background color)

【React】bugg??もしもreact-slickがあるページかつsafari、chomeのみinput値を入力中にスタイルが崩れたら「if you encounter in the safari browser, when you typing text in input, (the page are using the react-slick)(react bug input safari in iPhone react-slick javascript onChange onBlur)」
【React】bugg??もしもreact-slickがあるページかつsafari、chomeのみinput値を入力中にスタイルが崩れたら「if you encounter in the safari browser, when you typing text in input, (the page are using the react-slick)(react bug input safari in iPhone react-slick javascript onChange onBlur)」

  1. Screen of style is lost when you enter the character
  2. Only iphone of safari
  3. There is a react-slick page

you have to put  this code in  onChange method

スクリーンショット 2016-08-04 20.39.15

It seems to have destroyed the style of the react-flick apparently causing the reflow when the iphone of the editor has entered a character. Maybe

I'm worried more than a day

【 併せて読みたい 】

【REACT】REACTの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事

github

qiita

【React】注意「Failed prop type: transitionAppearTimeout wasn't supplied to ReactCSSTransitionGroup: this can cause unreliable animations and won't be supported in a future version」が出たら

ここ

【 併せて読みたい 】

【REACT】REACTの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事

github

qiita

【React】消せない警告「Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster.」を消す方法

こういうの出てた
「Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster.」

「警告:あなたは「Reactの開発ビルドの圧縮されたコピー」を使用しているようです。製品としてReactアプリを展開する際、開発の警告をスキップする、より高速である製品ビルドを使用するようにしてください。」
と書いてあるみたい。

その対応。
使っているビルドツールがbrowserfiyかwebpackかで対応が違うみたい。

browsefiyなら
ここ

webpackなら
ここらへん

自分はbrowserfiyだった。

やること
gulpファイルのどこでもいいからtaskを一つ追加


gulp.task('default', ['browserify', 'watch', 'browser-sync']);

gulp.task('default', ['apply-prod-environment','browserify', 'watch', 'browser-sync']);


どこでもあいているところに下記を追加

gulp.task('apply-prod-environment', function() {
process.env.NODE_ENV = 'production';
});

これでgulpを再起動したら消えた

【 併せて読みたい 】

【REACT】REACTの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事

github

qiita

【React】これ。Warning 「 Each child in an array or iterator should have a unique "key" prop. Check the render method of `ComponentName`」が出たら

たまにmap処理を使っているとWarning出ているときあります。
下記の様に
【React】Warning 「 Each child in an array or iterator should have a unique "key" prop. Check the render method of `ComponentName`」が出ます。
ComponentNameの所は具体的に直すべきComponentです。

key属性に一意の値を渡して終わりです。
なぜかはこちら
https://facebook.github.io/react/docs/lists-and-keys.html

listで返されるDOMはそれぞれidを持つことで不要なレンダリングを避けたりできるようです。
なので「ユニークなidをkeyに渡すことでそれを実現するべき」だと認識しています。

【 併せて読みたい 】

【REACT】REACTの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事

github

qiita

【React】エラー「invariant.js:38Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `t`.」

このように怒られたら、

続きを読む

【React】以前REACT × FLUX × ES6 LINE風チャットを修正しました。

fafa

こちらなのですが、動かないとのご指摘を受けて、修正しました。

修正内容

https://github.com/kenmori/React-ES6-Flux-Playground/pull/75/commits/f1b343b6797ced8f43f7c5fef01fc50ce16d8bda

リプレイスしました。

こちら

概要
・reactを最新バージョンに変更
・react-dom提供のReactDOM.findDOMNodeに変更
・node-devモジュールのバージョンによるエラーを修正
・package.jsonを修正
・serverタスクのgulpfileを修正

です。
ソースは
こちら

ご指摘ありがとうございました。

【 併せて読みたい 】

【REACT】REACTの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事

github

qiita

【React】React15.3.0からfindDOMがReactから切り離されたのでこのようなエラー出た場合「Uncaught TypeError: _react2.default.findDOMNode is not a function」

Reactのメソッドから切り離されたと思われるコミット
https://github.com/facebook/react/pull/5832/commits/2e1fb4b52972711199d5065625251642f7d75c29
続きを読む

【React】エラー「ReactDefaultInjection.js:53Uncaught TypeError: Cannot read property 'toUpperCase' of undefined」

このようなエラーがでたら。
reactの読み込んでいるバージョンが違う可能性があります。
https://github.com/reapp/reapp/issues/55

package.jsonをみてください
"react": "^15.3.0",
"react-dom": "^15.3.0",
このようにバージョンを合わせる必要があります。
もし、
"react": "^15.3.0",

このようにproject直下の
package.jsonが1つしか書いていなくて、
jsファイルの方で
react-domをimportしていた場合、
node_modulesはそのプロジェクトファイルにreact-domがnpm iされていないばあい
階層を登って見つけようとします。
そして違うバージョンのreact-domを呼びにいくかもしれません。

あとリンク先のようにrender内のdomの返し方に問題があるみたいです

【 併せて読みたい 】

【REACT】REACTの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事

github

qiita

【React】親コンポーネントから子コンポーネントのメソッドを呼ぶrefの使い方

refの使い方が曖昧だった。
子componentにref="[name]"としてその参照をする際にthis.refs.nameとやると子供のcomponent内が参照できて、
もし子供がaddというメソッドをもっていたらthis.refs.name.add()で実行できる

sampleはこちら

親component

【React】親コンポーネントから子コンポーネントのメソッドを呼ぶrefの使い方
【React】親コンポーネントから子コンポーネントのメソッドを呼ぶrefの使い方

子component

【React】親コンポーネントから子コンポーネントのメソッドを呼ぶrefの使い方
【React】親コンポーネントから子コンポーネントのメソッドを呼ぶrefの使い方

【React】ブラウザ間の差異をなくすcore.jsをReact内にimportする方法〜ES6,ES7のメソッドを快適に使う〜

以前の記事でObject.assignがios8で使えなくてpolyfillを使った話をしたのですけど、
core-jsで解決できるようなので試してみた。
ES6でimportして実際使ってみるまでの記事です。

読み込む
npm i -D core-js

//React内に読み込む
使いたいオブジェクト名の階層までのパスを書きメソッドを読み込む

import { findIndex, fill } from 'core-js/library/fn/array/virtual';
import { includes }from 'core-js/library/fn/array/';
import { assign } from 'core-js/library/fn/object';

 const  HelloReact =  React.createClass({
  render() {
      console.log(Array(10)::fill(0).map((a, b) => b * b)::findIndex(it => it && !(it % 8)));
      var obj = {a: "fa"};
      console.log(assign({b: 'ooo'}, obj));
      var array = ["","faf"]
      console.log(array.includes("faf"));


    return (
    <div>
        <div>

////

【React × ECMAScript2015】Object.assign,Array.includesがiOS8.1.1、Androidで使えない!ES6(ECMAScript2015)でのpolyfillの意味と使い方

今日Reactでmodalを作っているとsetStateする値をオブジェクトそのままで保持しておく必要があって、さらにもし他のstateが更新されたら一緒にsetStateをする必要があった。

objectとobjectをマージしなくてはならなかったし、objectを非破壊メソッドでコピーしておかなければならなかった。

この2つができるObject.assign
なのですが、
これがiOS9からで8やAndroidには対応していない。
じゃあJSON.parse(JSON.stringify(obj))でコピー作ろうと思ったんだけど、
調べるとfunctionやundefinedをkey値にしてはいけないなどいろいろあるみたい。そもそもオブジェクトコピーするだけでJSONオブジェクトってなんかあれですよねってことで、
やはりObject.assign使いたい!

polyfillの意味は壁の穴を埋めるための物のようです。まさにブラウザのバージョンの差異を埋めるためのもの。

でES6でどこにどう書くんだと思った。

スクリーンショット 2016-07-05 23.53.09

デモ

 

・constructor内にpolyfillを入れる(初期化時にObjectがもっているかどうか判定して持っていなかったらfunctionを代入している)

 

iphoneをMacにつないでwebインスペクタのコンソールでObject.assignが使えたらOK

よかったね!
でわまたーーーー

【React】react-modalの簡単実装するための9つの手順とハマりポイント

業務でmodalを実装したのですが、ハマったところがありました。
で、それにまつわる記事がなかったので書きます

チュートリアル

作るモーダルは
これ

githubにReact-Sampleとしておいています。ここ
他のサンプルと混在していて見にくいですが。。

作り方
1. npm i -D react-modal
プロジェクトのnode_modulesにインストールしてください

2. 親コンポーネントでreact-modalを読み込む
ここ

[code language="javascript"]
import Modal from 'react-modal';
[/code]

3 トリガーになるidを付与、button設置
※WPエディタがhtmlタグと認識してしまうので画像で表示しています
ここ

[code language="javascript"]

<h2 id="modal">react-modal</h2>

<button className="btn btn-primary" onClick={this.openModal}>open modal</button>
<Modal><button onClick={this.closeModal}>Close<button></Modal>
[/code]

//ここでのcloseボタンの位置に注意してください。ここで更に下、子コンポーネントにthis.closeModalを渡すことはできません

4 stateを管理(初期はOpenではないのでfalse)
ここ

[code language="javascript"]
this.state = {
modalIsOpen: false
}
[/code]

5 constructorでbind
ここ

[code language="javascript"]
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
[/code]

6 this.openModalとthis.closeModalを実装
//setStateでbooleanを渡すだけ
ここ

[code language="javascript"]
openModal() {
this.setState({modalIsOpen: true});
}

closeModal() {
this.setState({modalIsOpen: false});
}
[/code]

7.Modalのpropに設定を渡す
ここ

[code language="javascript"]
<Modal isOpen={this.state.modalIsOpen} onAfterOpen={this.afterOpenModal} onRequestClose={this.closeModal} shouldCloseOnOverlayClick={true} style={customStyles}>
//ここで最低限必要なのはisOpenだけです。
//あとはご自由に
[/code]

7_2 スタイルをカスタムしたい場合styleにcustomStyleを渡す
//render内です。
ここら辺

[code language="javascript"]
const customStyles = {
overlay : {//ovelayの色を変える
background: 'rgba(0,0,0, .4)'
},
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)',
width : '72%'//openしているコンテンツの幅を変える
}
};
[/code]

8、モーダルを実装しているコンポーネントのclassより外に下記
ここらへん

[code language="javascript"]
const appElement = document.getElementById('content');
Modal.setAppElement(appElement);
[/code]

わかりずらかったらチュートリアルのここ見てね

9 おしまい
おしまいです。どうでしょうか??

はまりポイント
ハマったところは
3の閉じるボタンの位置でした。。
これはModalコンポーネントの直下に置かなくてはならず、、これをModalコンポーネントの子コンポーネントの中で使うことが
できませんでした。
子コンポーネントにpropsで渡しているんですけどいけなかった。
子コンポーネントではいろいろなボタンがあり、そのボタンの状態を管理して、「今の状態でcloseする 」ということが
したかったのですが、そこにはcloseModalは実装できず、

ここにもかいてある「subComponentは持てない」って。

ではModal直下にcloseを置くといろいろなボタンの状態を変えるとモーダル下のrenderが走ってしまう。
(それはshouldComponentUpdateで制御しなくてはだめ)
でした。

また
closeModal内で他の関数を呼べなかった気がする。。これは多くの時間を割いて調査していませんが、、
わかっちゃえば簡単なのですが、地味にやられました。

でわ〜〜〜

【 併せて読みたい 】

【React】Reactの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事

Error : [BABEL] /Users//index.js: Unknown option: direct.presets while parsing file: /Users//index.js

1__gulp__node_

事象 watchされているjsの更新がbundleされたapp.jsで生成されない。更新の度に上記のような

``` Error : [BABEL] /Users//index.js: Unknown option: direct.presets while parsing file: /Users//index.js

``` でる。

Unknown option: direct.presets while parsing file

解決方法 babelfyのバージョン上げてください

僕はそれでいけました

フロントエンド系の話

github

qiita