タグ別アーカイブ: React

【react-router-redux】エラーを解決:sync.js:39 Uncaught Error: Expected the routing state to be available either as `state.routing` or as the custom expression you can specify as `selectLocationState` in the `syncHistoryWithStore()` options. Ensure you have added the `routerReducer` to your store’s reducers via `combineReducers` or whatever method you use to isolate your reducers.

【react-router-redux】エラーを解決:routing state to be available either as `state.routing` or as the custom expression you can specify as selectLocationState。。。

【react-router-redux】エラーを解決:routing state to be available either as `state.routing` or as the custom expression you can specify as selectLocationState。。。

 

state.routingか、もしくはsyncHistoryWithStore()オプション内のselectLocationStateとして指定できるカスタム式として利用可能なrouting state を期待している

reducersを分離するために使うメソッドがなにか、もしくは、combineReducersを通じてstoreのreducersにrouterReducerが追加されたか確認してください。

自分の場合
上記の
「the routing state to be available either as `state.routing`」
ができていないくて、

reducerをまとめるjs内で、
下記のようになっていた。

reducers/index.js

import { combineReducers } from 'redux'
import  counter from './counterReducer'
import input from './inputReducer'
import { routerReducer } from 'react-router-redux'

export const appReducer = combineReducers({
    counter: counter,
    input: input,
    router : routerReducer //ここ
})
export default appReducer

store.routingとなるには
routeをroutingに修正

import { combineReducers } from 'redux'
import  counter from './counterReducer'
import input from './inputReducer'
import { routerReducer } from 'react-router-redux'

export const appReducer = combineReducers({
    counter: counter,
    input: input,
    routing: routerReducer //routingに修正
})
export default appReducer

ここを参考に

ではーー

【Redux】「bindActionCreators」とは。使い方 Reduxドキュメント日本語訳

ReduxドキュメントのbindActionCreators

======================

bindActionCreators(actionCreators, dispatch)

同じキーを持つオブジェクトに、
その値をActionCreatorであるオブジェクトにして、
dispatchにラップされたすべてのActionCreatorを呼ぶので、
それらは直接実行できるようになります

通常はStoreインスタンス上のdispatchを直接呼ばなくてはなりません。
もしあなたがReactと一緒にReduxを使うなら、
それを直接呼べるようにreact-deduxもdispatch関数を提供します。

bindActionCreatorに対してのみの使用は、
Reduxが気づかない下のコンポーネントに多くのaction creatorを渡したい時や、
dispatchに渡したくない時、
Reduxがそれに対してstoreする時です。

便利なことに第一引数として一つの関数を渡すこともできますし、
返り値で関数を得られることもできます

Parameters

1. actionCreators (Function or Object)
返り値: An action creator, か action creatorを値に持つobject

2. dispatch (Function) : Storeインスタンス上で利用可能なdispatch関数

Returns

(関数かオブジェクト): 元のオブジェクトを模倣したオブジェクトで、対応するaction creatoreが返したactionを各関数がただちにdispatchingする

もしactionCreatorsとしての関数を渡したら、
一つの関数にもなる値を返します

Example

TodoActionCreators.js

export function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  }
}

export function removeTodo(id) {
  return {
    type: 'REMOVE_TODO',
    id
  }
}

SomeComponent.js

import { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import * as TodoActionCreators from './TodoActionCreators'
console.log(TodoActionCreators)
// {
//   addTodo: Function,
//   removeTodo: Function
// }

class TodoListContainer extends Component {
  componentDidMount() {
    // Injected by react-redux:
    let { dispatch } = this.props

    // Note: これは動きません:
    // TodoActionCreators.addTodo('Use Redux')

	//あなたはただactionを作成する関数を呼んでいるだけです
	//actionをdispatchもしなくてはいけません

    // これは動きます
    let action = TodoActionCreators.addTodo('Use Redux')
    dispatch(action)
  }

  render() {
    // Injected by react-redux:
    let { todos, dispatch } = this.props

    //これはbindActionCreatorsの良いユースケースです
   // あなたはReduxが子コンポーネントを全く知らないようにしたいです。

    let boundActionCreators = bindActionCreators(TodoActionCreators, dispatch)
    console.log(boundActionCreators)
    // {
    //   addTodo: Function,
    //   removeTodo: Function
    // }

    return (
      <TodoList todos={todos}
                {...boundActionCreators} />
    )

    // bindActionCreatorsの代りに渡すことです
    // ただ子コンポーネントにdispatch関数を渡すだけです。
	//action creatorsをimport、それらについて知っている必要がある

    // return <TodoList todos={todos} dispatch={dispatch} />
  }
}

export default connect(
  state => ({ todos: state.todos })
)(TodoListContainer)

Tips

・あなたは尋ねるかもしれない: どうして昔のFluxのようにaction creatorsをすぐにstorインスタンスに対してbindするの?
この問題はサーバー上でレンダーする必要があるAppでよく動かないためです。
ほとんどの場合、別のデータを準備することができるので、あなたはリクエスト毎に分けたStoreインスタンスを持ちたいでしょう。
でもそれは定義中にaction creatorsをバインドすることで、
すべてのリクエストに対して一つのstoreインスタンスで詰まってしまうことを意味します。

・もしES5を使うなら、 import * as 構文の代わりに require(‘./TodoActionCreators’) を 第一引数としてbindActionCreatorsへ渡すことだけです。
それに対して気をつけることは actionCreators引数の値は関数ということだけです。
モジュールシステムは重要ではありません。

【React/Redux】このアラートが出てきたらすること/warning.js:36 Warning: validateDOMNesting(…): <div> cannot appear as a descendant of <p>. See Counter > p > … > div.

React x Reduxを使っていて、
下記のようなものがコンソールに出てきたら、

【React/Redux】このアラートが出てきたらすること/warning.js:36 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. See Counter > p > ... > div.

【React/Redux】このアラートが出てきたらすること/warning.js:36 Warning: validateDOMNesting(…): <div> cannot appear as a descendant of <p>. See Counter > p > … > div.

したのようにpで返している箇所ありませんか??

【React/Redux】このアラートが出てきたらすること/warning.js:36 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. See Counter > p > ... > div.

【React/Redux】このアラートが出てきたらすること/warning.js:36 Warning: validateDOMNesting(…): <div> cannot appear as a descendant of <p>. See Counter > p > … > div.

ブロック要素が必要ならdivにしてください。
お願いします。

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

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

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

React × Flux × ECMAScript2015 LINE風チャット

他のReact記事

フロントエンド記事

GitHub

qiita

【React/Redux】Propsがread-onlyでEmpty Object。。connectとか疑った後,Container内のComponentが何も返してくれない時

エラーにもならないで、静かに訴えています。。

【React/Redux】Propsがread-onlyでEmpty Object。。connectとか疑った後,Container内のComponentが何も返してくれない時

【React/Redux】Propsがread-onlyでEmpty Object。。connectとか疑った後,Container内のComponentが何も返してくれない時

写真のようにaddOnで見ると、、Propsがread-onlyでEmpty Object。。connectとか疑った後,Container内のComponentが何も返してくれない時

【React/Redux】Propsがread-onlyでEmpty Object。。connectとか疑った後,Container内のComponentが何も返してくれない時

【React/Redux】Propsがread-onlyでEmpty Object。。connectとか疑った後,Container内のComponentが何も返してくれない時

コンポーネントの最初の文字が小文字だった。。

ではーーーー

【Redux】これハマった。。invariant.js:38 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

ヒントもうちょっと欲しい。。って思いながら、、ハマった箇所。

【Redux】これハマった。。invariant.js:38 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

【Redux】これハマった。。invariant.js:38 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

componentはElementを返さなくてはいけませんよっ、ただundefinedですよ。
っていうことだと思うので、ひたすらContainerやComponentのrenderがreturnしているか
をチェックした。

react-reduxからimportにしてないケース

【Redux】これハマった。。invariant.js:38 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

【Redux】これハマった。。invariant.js:38 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

 

外部に公開していないケース

app_js_-_react-sample_-____react-sample_

 

ではーーーー

【Redux】Uncaught Error: Objects are not valid as a React child (found: object with keys {counterReducer, inputReducer}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Component`.(…)

【Redux】Uncaught Error: Objects are not valid as a React child (found: object with keys {counterReducer, inputReducer}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Component`.(…)

【Redux】Uncaught Error: Objects are not valid as a React child (found: object with keys {counterReducer, inputReducer}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Component`.(…)

値の型が違う風に渡ってきている。該当の`Component`のrenderメソッド内を確認してみて!
render関数のなかでreturnする前にconsole.log()でそのなかで使っている変数調べたら
propTypesでnumberにしていたのにObjectが渡ってきたよ。

%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_14_25_41_png

%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-14-25-41

【Redux】これが出たら疑う箇所:Uncaught Error: Objects are not valid as a React child (found: object with keys {counterReducer, inputReducer}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Component`.(…)

【Redux】これが出たら疑う箇所:Uncaught Error: Objects are not valid as a React child (found: object with keys {counterReducer, inputReducer}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Component`.(…)

みてみると

【Redux】これが出たら疑う箇所:Uncaught Error: Objects are not valid as a React child (found: object with keys {counterReducer, inputReducer}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Component`.(…)

【Redux】これが出たら疑う箇所:Uncaught Error: Objects are not valid as a React child (found: object with keys {counterReducer, inputReducer}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Component`.(…)

【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
http://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の利点を見逃していると述べています。

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


;
  }
}

これを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として書いておくことで予想できてバグを見つけられたり、学習コストを下げるのですね。

コンテナー

// 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} />;
  }
}

コンポーネント

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


;
  }
}

これは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」

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

【JavaScript】2016フレームワーク戦争「React vs Vue vs Angular2」のある外国人のデータによる「予選結果」

最近自分もひとづてにどうやらReactが抜けていると聞きましたが、

スクリーンショット 2016-08-27 9.57.29

ここ

記事では
今使っていないけど学びたいフレームワーク、満足しているフレームワークなどを紹介している

Based on the current data, I think it’s safe to say that you can’t really go wrong with React, since it’s extremely widespread and has an above-90% satisfaction percentage. And although currently much smaller, Vue also seems like a good bet.

まとめ
・現在のデータ上、安全と言える。あなたがReactを使って悪い方向に進むことはない。
・Reactはかなり広まって、90%以上がReactに満足している

【JavaScript】2016フレームワーク戦争「React vs Vue vs Angular2」のある外国人のデータによる結果

【JavaScript】2016フレームワーク戦争「React vs Vue vs Angular2」のある外国人のデータによる結果

Vueも「いい賭け」といえる

【JavaScript】2016フレームワーク戦争「React vs Vue vs Angular2」のある外国人のデータによる結果

【JavaScript】2016フレームワーク戦争「React vs Vue vs Angular2」のある外国人のデータによる結果

aurelia周辺がざわざわしている。。

【JavaScript】2016フレームワーク戦争「React vs Vue vs Angular2」のある外国人のデータによる結果

【JavaScript】2016フレームワーク戦争「React vs Vue vs Angular2」のある外国人のデータによる結果

この記事が全てではないと思うけど、

Angular2がんばれーー

ではまたーーー

【関連記事】

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

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

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

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

他のReact記事

フロントエンド記事

github

qiita

【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です。

やること
下の様にmap処理している箇所があると思います。
var commentNodes = this.props.data.map((comment)=> {
return ({comment.text});
});

それをこう
var commentNodes = this.props.data.map((comment,i)=> {
return ({comment.text});
});

key属性にindex値を渡して終わりです。
なぜかはこちら
https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

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