[React.js] setStateしても直ちにstateは変更されない | Like@Lunatic
最近仕事でReactをやっている。 今回のネタはひとこと（ひとコード？）で言うと以下のようなこと。 getInitialState () { return { clicked: false }; }, clickHandler () { this.setState({ clicked: true }); console.log(this.state.clicked); // -> false }, render () { console.log(this.state.clicked); // -> true return <button onClick={this.clickHandler}>Click Me</button>; } インタラクションのハンドラで this.setState したとして、そのハンドラ内でthis.state を参照しても、まだ更新後の値は取れない。rende
人気のFluxフレームワークReduxをさわってみた - マルシテイア
fluxフレームワーク、今は Redux が一番アツい様子なので触ってみた。 github.com (追記 2015-10-03 18:15 APIや用語が大幅に変わったので更新した) Redux の経緯 2015-05-30 に公開された "The Evolution of Flux Framework" という記事がある。 medium.com Reduxはその PoC 的な実装だったんだけど、実用的ということでめっちゃ流行っているみたい。 Initial commit も 2015-05-30 だった。 Initial commit · rackt/redux@8bc1465 · GitHub 最近の flux フレームワークだと fluxible と flummox が人気だったけど、 flummoxのページには 4.0 will likely be the last major
React使ってSPAを作るよ（3） - m31
React使ってSPAを作るよ目次 React使ってSPAを作るよ（2）の続きです。 まずは残りのコンポーネントを書いてしまいます！ ﾄﾞ━(ﾟДﾟ)━ﾝ!! var React = require('react'); //記事リンク var ArticleLink = React.createClass({ render: function() { var articleImage = { backgroundImage : "url(" + this.props.image + ")" }; return ( <a href={this.props.articleUrl} target="_blank" style={articleImage}> <h2>{this.props.articleTitle}</h2> <p>{this.props.articleDescription}<
React-FlexBox-Gridの使い方 - Qiita
React-FlexBox-Gridはflexgrid.css用のdivを生成するreact componentです。 CSS Modulesという実装方法を取っています。 webpackを使う場合、css-loaderを一緒に使う必要があります。 Component 次の三つのコンポーネントがあります Grid Row Col 使い方はbootstrap3と大体同じです。実装にCSS flexible boxを使っています。 Gridの中にRowを置きます。 Rowの中にColを置きます。 Colにxs={6}のように、幅を設定します。 例 const React = require('react') const ReactDOM = require('react-dom') const {Grid, Row, Col} = require('react-flexbox-grid');
React と jQuery を共存させる - GMOインターネットグループ グループ研究開発本部
GMO スマートリザーブに React を導入 フロントエンドのトレンドを追いかけている D.M. です。 2015年の初夏ごろに次世代システム研究室が GMO スマートリザーブの立ち上げをサポートしました。 http://www.gmo-c.jp/service/smart_reserve.html こちらは店舗管理者がお店の予約を管理するためのシステムですが管理画面は Single Page Application となっており、 JS 部分に React を導入しています。今回はその案件で問題になった React と jQuery の共存について書いてみようと思います。 React を選定した理由 React については以前記事でまとめており概要は把握していました。 http://recruit.gmo.jp/engineer/jisedai/blog/react-refactori
5分で理解する React.js - Qiita
いまさらですがReact（react.js）をはじめてみました。 Virtual DOMばかりが話題にあがるReactですが、それにとらわれていると理解が進まない、と言うかReactで理解しなければならないのはVirtual DOMではないことがわかりました。 Reactについての良い資料はすでにたくさんありますので、末尾に参考資料としてあげています。 このエントリは自分がReactのチュートリアルをなぞりながら書いた自分用のメモですが「1エントリで概要をちゃちゃっと理解したい」という方に役に立ったら良いな、とも思っています。 Reactチュートリアル http://facebook.github.io/react/docs/tutorial.html 基本 JavaScriptで書かれたライブラリ。react.jsをインクルードして使う。 （MVCで言うところの）Viewのみを担当する。
React で要素のクラスを動的に付け外しするなら JedWatson さんちの classnames が便利 - BattleProgrammerShibata
React 公式ドキュメントからもリンクされていました。 github.com すてきなドヤ顔。 Usage はかなりシンプルなのでそれ読めばすぐ使えるよ！ …では味気ないので本日更新した MarkdownPreview の v.0.1.0 からコードを抜粋して利用例を紹介したいと思います。 // 例示なので説明に不要部分は削除してます import ClassNames from 'classnames'; export default class ModalWindow extends React.Component { render() { const classNameModalWindow = ClassNames({ 'md-modal-window': true, 'l-flex ': true, 'is-opacity-zero': this.state.isOpacity
ES6版React.jsチュートリアル - Qiita
はじめに 初心者による初心者のための記事 React.js公式チュートリアルの和訳風 ES6 さらっと仮想DOM調べてみたよ、ぐらいの人向けです。 JavaScript初心者、ES6初心者、React初心者向けかつ僕がそうです。 なので間違いがあるかもしれません。見つけたら教えて下さい。 公式のチュートリアルはこちらです。 React Tutorial React チュートリアル (和訳) 公式Documentのソース (Markdown) 環境 Mac OSX Node.js v0.12.7 Gulp 3.9.0 React 0.13.3 作るもの 公式のTutorialに沿って、シンプルなコメントボックスをReactで作成します。 次の機能を提供するものです。 すべてのコメントの表示機能 コメント投稿フォーム バックエンドサーバーとの連携 また、次の特徴を持っています。 更新最適化:
React.jsでPropやStateを使ってComponent間のやりとりをする - Qiita
今日はこれまでに紹介したPropやStateを使ったComponent間でやりとりについて書きたいと思います。 親のStateを子のPropとして渡す Componentを設計する時はまずPropとしてI/Fを考えて、そのComponentが管理すべき値で変更されるものをStateとして定義します。 つまりComponent間での親子の関係を意識して、親がStateを持っていて子にPropとして渡すというのが基本になります。（子は使うだけで管理しているのは親） var User = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired, id: React.PropTypes.number.isRequired }, render() { return ( <div>{this.props.id}:
React.js + Flux入門 #scripty02
2014/12/15の勉強会にて発表された資料です。 SCRIPTY#2 ～フロントエンド紳士・淑女のための勉強会～ http://scripty.connpass.com/event/10345/
React Componentでthisがundefinedになる問題の解決策 - 株式会社クラフトマンソフトウェア
最近、ShouldBeeのUIをReact.jsで作り始めています。 Babelを使ってES6のclass構文でReactのComponentを作っているのですが、どうもコールバックのメソッドでthisがundefinedになってしまいます。 例えば、下のJSはボタンのコンポーネントで、クリックしたときに、onClickメソッドが呼ばれます。onClickメソッドの中で、thisを参照していますが、undefinedになります。 import React from "react"; export default class Button extends React.Component { onClick() { console.log(this); // undefined } render() { return ( <button onClick={this.onClick}>Butto
Reactの単純なサンプルでFluxの実装を解説
先日『Flux – Dispatcher【日本語訳】と実装のポイント』という記事を投稿しました。Fluxの理解を深めるために、その実装の核となるDispatcherを理解することが大事だと思ったからです。おかげで、ある程度Fluxの理解進みました。今回さらにFluxを実装することで、理解を深めたいと思い、簡単なサンプルを作ってみることにしました。このサンプルを通して、Fluxの実装方法について説明していきたいと思います。だいぶ長くなりましたが、ぜひ参考にしていただければと思います。 Fluxの実装サンプルまずはサンプルを見てください。フォームに入力したテキストを表示させるだけのものとなっています。とても単純ですが、Fluxを使って実装しています。 Flux実装サンプルコード – GitHubFlux実装の説明の前にFluxとは FluxFluxは「クライアントサイドのWebアプリケーション
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fluxアーキテクチャの覚え書きを書いた - saneyuki_s log
Reactをes6で使う場合のbindの問題 - Qiita