カテゴリー別アーカイブ: React.js

【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

【JavaScript】yahooUIのようなフリックでタブ切り替えを作ったこれをReactに置き換える話

1年ぐらい前に「yahooUIのようなフリックでタブ切り替え」を作ったのですが、
日の目をみることがなかったのでもう一度作り直した

【フロントエンドエンジニア芸人】yahooUIのようなフリックでタブ切り替えを作ったこれをReactに置き換える話

【フロントエンドエンジニア芸人】yahooUIのようなフリックでタブ切り替えを作ったこれをReactに置き換える話

これ
(スマホで見てください。Android2,iOS6まで対応)
いろいろキモいところあるのですが、、

Query以外のライブラリを使っていなくて、
フリック実装にてこずったりした。
レガシーなブラウザにフリックを効かすとことか。

仕様は、
・スマホのデバイスの幅に対応
・Android2、iOS6から対応
・オリエントチェンジに対応
・タブ内の文字は可変(何文字でも可)
・タブの数も可変
・ユーザーがフリックかタップ押下時にタブを真ん中に位置させる
・タブの列はスクロールできる
・アクティブなタブが全体のタブの最後だったら最初に戻る
・画面遷移時に両方の矢印をフェードインフェードアウトする
・フリック/タップ時矢印をフェードインフェードアウトする。

大変だった思い出があります。

今回は当時jQueryで書いていたこれをどうにかReactに置き換えようと思っている。

github

jsのソース

でわまたー

他のJavaScript記事

他のReact記事

【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を読み込む
ここ

import Modal from 'react-modal';

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


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

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

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

this.state = {
	modalIsOpen: false
}

5 constructorでbind
ここ

this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);

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

openModal() {
	this.setState({modalIsOpen: true});
}

closeModal() {
	this.setState({modalIsOpen: false});
}

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

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

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

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しているコンテンツの幅を変える
	}
};

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

const appElement = document.getElementById('content');
Modal.setAppElement(appElement);

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

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記事

フロントエンド記事

スクリーンショット 2016-07-02 10.28.27

【React】React入門の方が動きを理解したい人の為の最小サンプル(Sample)

こういうのあったらいいなと思って作りました「【React】React入門の方が動きを理解したい人の為の最小サンプル(Sample)」。

【React】React入門の方が動きを理解したい人の為の最小サンプル(Sample)

【React】React入門の方が動きを理解したい人の為の最小サンプル(Sample)

画像をクリックしてみてください。小さいgifですが。。Reactで動きを理解したい人の為の最小サンプルです。
サンプル

※もし「routingNoMatch」と表示されたらキャッシュですので、違うデバイスで訪れるかsafariならプライべートモードでキャッシュをクリアーにしてご覧ください
GitHubはこちら。
https://github.com/kenmori/React-ES6-Flux-Playground/tree/master/playground

githubリプレイスしました。こちらからどうぞ↓
https://github.com/kenmori/React-Sample

npm install

gulp
と叩いてください

Reactのチュートリアル

【 併せて読みたい 】

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

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

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

他のReact記事

フロントエンド記事

【Reactのstateとpropsの違いが知りたい!(変更・更新の仕方等デモあり)】過去のReact初心者の自分にpropsとstateの違いを説明する

ややわかり始めたReact、1年前にこういう記事かいて、今結構検索でヒットするみたいなので
、過去の自分にちょっと説明したらこんな感じかなと思って書きます。

※ここの記事ではこのコードをできるだけ簡単に説明しています。説明と照らし合わせて確認していただけたら幸いです。(PCでご覧になると表示がわかりやすいです)

propsとstateの簡単な説明

続きを読む

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

【React】babelでbabel-preset-stage-0や使う方法「ES7 Property Initialiazers for Default Props and Prop 」を使いたい方へ

英語文しかなかったので自分のようなReactにおいて「ES7 Property Initialiazers for Default Props and Prop」を使いたい方へ記事書きました

参照 http://babeljs.io/blog/2015/10/29/6.0.0 http://egorsmirnov.me/2015/06/14/react-and-es6-part2.html

babelは6系からそれぞれプラグインをインストールすることになったみたいです。

具体的には これらを適当にインストールしてください(適当です)

"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-plugin-syntax-class-properties": "^6.5.0",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babelify": "^6.1.3",

その後 package.jsonに下のようにpresetsを設定(使いたいpresetのプラグインです)上のならbebel-plugin-[ここ] 「ES7 Property Initialiazers for Default Props and Prop 」はstage-0として設定すればOK .babelrcだったらpackage.jsonと同じ階層に置けばいいみたいです。今回はjsonに記述します。

"babel": {
"presets" : ["es2015", "react", "stage-0"
 ]
},
"devDependencies": {
//some
}

で gulpfileのtransformのところに

.transform("babelify", {presets: ["es2015", "react", "stage-0"]})

でok

ちょっとエラーが出たり分からなかった場合下記リンク先に playgroundあげてありますので余計なソースを削って使ってください。 ミニマムでReact,ES6の最新が動作できるようにされています。

https://github.com/kenmori/React-ES6-Flux-Playground/tree/master/playground

【 併せて読みたい 】

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

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

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

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

他のReact記事

フロントエンド記事

github

qiita

【React × ES6 × Flux】を手っ取り早く学びたい人の為にサンプル作った【3の倍数と3が付くときだけ猫になるCounter】 Cat comes out when that contains the multiples of 3 and the string to 3

AWS11-5

なかなかミニマムでこれらを学べるプロジェクトがみつからなくて、勉強も兼ねて作りました。 なるべく小さい部品だと分かりやすいですしね。 この【React × ES6 × Flux】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCounter】(Cat comes out when that contains the multiples of 3 and the string to 3)は clickすると値が増えるだけの本当に簡素なものですが、 中身はFluxで管理しているのでコードリーディングするのに動きがわかりやすくなっています。 component内でeventを感知すると状態を更新し、更新されたstateは予めリスナー登録していたメソッドをactionTypeによって振り分けてstore内で更新して、状態を子componentに伝えます。

プロジェクトをダウンロードして gulp立ち上げるとローカルサーバー立ち上がります。 jsが変更される度にbrowserifyでまとめてbabelifyでES6をES5に変換後bundleしてくれます。 ReactをClass構文で書きたい方、ES6も勉強したい方にはいいと思います。(僕も奮闘中です)

Fluxに関してはいろいろな書き方があるのですが、今実務でやっているような書き方でやっています。 (EventEmitterはライブラリではありません。)

プロジェクトはこちらです

Fluxに関して言えば前にも理解深めるためにこんなの作りました React × Flux × ES6 [WIP]LINE風チャット

ここからはわたしの今後。 わたしはAngular2もReactもマスターすると決めました。 「RactのこれはAngularでいうところのこれかぁ」、とか「AngularでいうところのtemplateってReactでこーなんだー」って結びつきが強くなるんですよね。 5年後残らないかもしれない技術でも学んだ意欲と「あれとどこか似ているぞ」というはどんなものが資産になるしね。 フロントは多分これからも過渡期ですよね。 ずーーと。 止まらない電車が止まったら乗るのではなく、動いている電車に飛び込んで、しがみつかないといけないと思っています。

こんどはおんなじものをAngular2 × TypeScriptで作ってみたい

ではみなさんいい週末を!!

フロントエンド系の話

github

qiita

【React × Flux × ES6】LINE風チャット

fafa
話は表題と違うのですが、
小さい頃よく母親の作る料理がどこか一箇所凝ったものが混ざってて、
普通の味噌汁でいいのにしめじ入ってたり、
普通の魚でいいのに苦手な野菜をあんかけにして乗っけてきたり、
普通の白ごはんでいいのに栗入れてきたり、、
普通のカレーやハンバーグでいいのにと思ってたのですが、そのカレーすらも茄子が入ってたり、、
よく買い物から帰ってきたスーパーの袋に小さい紙切れ入ってて、
鮮魚売り場で取ってきたレシピなんですよ、
「今度これ、作るのか、、勘弁してくれ、、」て。
今では「美味しいじゃん!」と思えるかもしれませんが、
小学生ですから舌もこえてないですよ。

失礼しました。
RactとFlux周りを勉強しているうちにじゃぁ実装しながら学んだ方がいいのではないか、
と思いました。
ここから状態をどう分けるかをやらなくちゃいけないですね。 コードは
こちら

こちら
です。よかったら

【 併せて読みたい 】

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

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

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

他のReact記事

フロントエンド記事

React with ES6

getting start

http://jsbin.com/fuyedekaga/1/edit?html,js,console,output
Reactrepogtory
html

<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-0.14.3.js"></script>
<script src="//fb.me/react-dom-0.14.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="fafa"></div>
</body>
</html>

javascript

class HelloMessage extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
   return (<div>Hello {this.props.name}</div>
  );
 }
}
React.render(<HelloMessage name="kenji" />, document.getElementById("fafa"));