React / Flux を実案件で使ってみた (2015/02/16 講演資料) - Qiita
2015/02/16 歌舞伎座.tech#6「VirtualDOMとReact」 自己紹介 Name : Takuto Wada github : twada twitter : t_wada hatena : t-wada TDD とライオンの人 power-assert の人 React / Flux を知ったきっかけ mizchi さんのエントリ (あなたがReactを使うべき理由) だったと思う 日本語の情報はほとんど無かったが、エッジ系の人たちが騒ぎ出した & 海外で圧倒的に事例が増え出したので興味を持った Rendr をつくった AirBnb が React を使い始めたことを知り、これは決定的だと思った React をどう勉強したか 公式ドキュメントとチュートリアルが充実している まず Tutorial をそのまま写経 次に browserify + babelify で T
Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita
ReduxのGithubドキュメントを基に入門用記事として書いたものを、簡潔にまとめました。 もと記事はこちらです。 Redux入門 1日目 Reduxとは Redux入門 2日目 Reduxの基本・Actions Redux入門 3日目 Reduxの基本・Reducers Redux入門 4日目 Reduxの基本・Stores Redux入門 5日目 Reduxの基本・Data Flow Redux入門 6日目 ReduxとReactの連携 Reduxとは Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してより扱いやすく設計されています。 Reduxはstateを管理するためのライブラリーなので、React以外にもAngularJS
Reactのチュートリアルをやってみた - diary
完全に自分用メモ。 Thinking in Reactというチュートリアルを最小webpack構成で試した: ishikuro/thinking-in-react-webpack-minimum · GitHub React + Fluxの自分メモ Webフロントエンドのプログラミングは、jQueryによる素朴なDOM操作から、AngularJSのような双方向バインディングへ移行してきた。しかしWebがコンポーネント指向に進むに従って、状態の管理が分散しがちであることが問題であった。 そこでFacebookが新世代のパラダイムを提案している。コンポーネント指向、仮想DOM、単方向バインディングなViewライブラリのReactを開発し、Fluxという単方向データフローのアーキテクチャを推奨した。 Fluxはアーキテクチャの名前であり、実装に規定はない。従ってgithubでもFluxアーキテク
さらに多くのことが変化する – Fluxは新しい”WndProc”である | POSTD
たまたま今まで知らなかったという方のために言いますと、ReactはWebプログラミングにおける最先端の新技術です。そのアイデアはシンプルです。それは、Reactの各コンポーネントは、JavaScriptにおいて、ビューを冪等（べきとう）に描画します。ビューは、コンポーネントが内部に保持している少量のステートのみに基づいてレンダリングされます。同じステートにすれば、その状態におけるコンポーネントは常に同じようにレンダリングされます。これは、データが変われば、Reactは その変更のみを ブラウザのDOMに適用できるということでもあり、ページ全体の再レンダリングを省略できます。実際、何かを変更するかどうかという決定は 全て 、コンポーネントの内部状態に完全に左右されます。それが、なぜReactが非常に早いのかという根本的な理由です。 しかし実際のところ、React自体には、変更をどのように 伝
ReactとFluxでクライアントサイドの設計
はじめに こんにちは。皆さんはReact使われてますでしょうか？ 今回はReactとFluxについて書きます。 MVCの問題点 詳しくはこちらに書いていますが、MVCでアプリを作った場合は、ModelとViewの間で双方向のデーターフローが作られる可能性があるので理解したりデバックするのが難しくなります。 React単体で使った場合の問題点 子のViewでなにかアクションを起こした結果、親のViewにも変更を伝えてなににかをする場合、子のViewに親のViewのコールバック関数を渡す必要があります。 子のViewの下にさらに、子のViewがあって、アクションが起こった時に親のViewに伝えようとするとコールバックが深くなって複雑になってしまいます。 Flux それを解決できる方法としてFluxです。 Fluxを使うとデーターフローが一方向になります。 やってることはObserverパターン
RailsをバックエンドにしたFlux(React + Alt)を試してみる | DevelopersIO
丹内です。 最近ReactJSを触り始めました。 掲題の通り、Railsをバックエンドにした場合のFluxを書いてみたのでまとめます。 このエントリの参考URLにあるリポジトリを参考にしました。 バックエンド 普通のRailsアプリです。Scaffoldをベースに、フロントエンドを書いていきます。 db/migtate/create_books.rb class CreateBooks < ActiveRecord::Migration def change create_table :books do |t| t.string :title t.timestamps null: false end end end BooksController#index 今回、ブラウザで/booksにアクセスした時に、最初に空っぽのHTMLを返し、ReactJSでAjaxリクエストによってデータを取得
社内勉強会でReactとFluxについて喋った - pixiv inside [archive]
開発が大好きな@geta6です。 React meetupのことを完全に見逃していて悔しかったので、外部公開の社内勉強会でReactとFluxについての発表をしました。 経緯 現在ピクシブではReactでFluxな感じの構成で新サービスを開発中です。これまで社のプロダクトとしてReactを採用したことは無く、この新サービスが初の採用となる予定です。社内の空気感は「FluxもReactもよく聞くし何となくわかってるけど、詳しくは知らない」という感じでした。 そこで、自分の理解度の確認と、一緒に開発しているチームの人や社内外の開発現場の皆さんに大体の感覚を掴んでもらえるよう「ReactとFluxって一体全体なんじゃらほい」というテーマで、ざっくりと大枠を捉える発表をしました。 資料 speakerdeck.com ReactとFluxのこと // Speaker Deck スライドには入ってい
![社内勉強会でReactとFluxについて喋った - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a8d0ed6fcb034b99b3f6481c12f69296fc5deef2/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F11696248318756278971%2F8454420450092816254%2F1430122329)
React.js meetup #1 を開催しました
http://reactjs-meetup.connpass.com/event/11232/ 一人Advent Calendar書いた時にやりたいと言っていたのでReact.js meetup #1 を@yosuke_furukawaさんと開催しました。 DeNAさんが会場から懇親会のお酒や寿司、当日の運営まで全てやってくださったので自分はほとんど何もしてないですが..。 本当にありがとうございました！！ やりたいって言ってこの規模の勉強会を開催させてもらえるの本当にスゴいなぁと思います...。 #reactjs_meetup #react_sushi です pic.twitter.com/GdpyF7Paqk — Toru Kobayashi (@koba04) April 24, 2015 ある程度予想はしていたのですが、Talkが10分と短かったりで押して慌ただしい感じになってしま
良さ気なFlux実装、Marty.js個人的まとめ - Qiita
2015/12/03 追記: MartyのReadmeより Martyはもうメンテをしないので、reduxかaltを使う事が推奨されるようです。ありがとうMarty。 以下過去の記事内容 Flux Comparisonで色々眺めていたり、twitterを追っかけていたり自分で触ってみたりして、 Marty.jsが個人的に本当に良い気がしている。 Martyの特徴 作者と質問者の会話より ユーザーとのこんなやりとりがあり、Martyの特徴が要約されているのかなと思ったのでテキトーな意訳として載せておく。 https://news.ycombinator.com/item?id=8923245 質問：fluxxorと何が違うのか？ 回答： 他のFlux実装は、Fluxっぽいデータフェッチ(APIなどのことだと思う)なヘルパーが無い。コンポーネントとのストアのバインディングのボイラープレートの方
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
ReactとFluxの入門のためにArdaを使ってみた - タオルケット体操
FluxもReactもよくわからん状態で入門して今日一日泣きそうになってたのでメモ。 というかいわゆるJavaScriptMVCをガッツリ書いたこと自体がないです。 Arda、指輪物語由来っていうあたりがよさがありますね。 あと全体的に薄いので、FluxとReactの仕組みを学びつつ、他と組み合わせたりいざとなったら捨てたり出来そうなのでよさそうっぽいなっていう雑な考えでいじりはじめました。 また、せっかくなので今回はContext層をTypeScriptにしつつComponentをCoffeeScriptにしてTemplateをreact-jadeに分離する、作者推奨っぽい構成でやってみました。 全体的な構成は mizchi-sandbox/arda-starter-project · GitHub から持ってきた感じなので、ツールの設定など特に言及のない部分は同じだとおもっていただきた
「React / Flux を実案件で使ってみた」その後
改めて覗いてみよう 1) CheckboxWithLabel changes the text after click: AssertionError: # /path/to/test/components/CheckboxWithLabel_test.jsx:21 assert(label.getDOMNode().textContent === 'On') | | | | | | "Off" false | HTMLLabelElement{htmlFor:"",form:null,accessKey:"",control:HTMLInputElement{src:"",valueAsNumber:NaN,incremental:false,defaultChecked:false,form:null,multiple:false,list:null,size:20,checked:f
React / Flux を実案件で使ってみた
自己紹介 Name : Takuto Wada github : twada twitter : t_wada hatena : t-wada TDD とライオンの人 power-assert の人 React / Flux を知ったきっかけ mizchi さんのエントリ (あなたがReactを使うべき理由) だったと思う 日本語の情報はほとんど無かったが、エッジ系の人たちが騒ぎ出した & 海外で圧倒的に事例が増え出したので興味を持った Rendr の AirBnb が React を使い始めたことを知り、これは決定的だと思った React をどう勉強したか 公式ドキュメントとチュートリアルが充実している まず Tutorial をそのまま写経 次に browserify + reactify で Tutorial をもう一周やってみる (showdownはbrowserify 対応してい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://post.simplie.jp/posts/36