FluxやRedux周辺への理解.mdYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
イメージで覚えるReact + Redux - ユニファ開発者ブログ
こんにちは、tanaka です。 Rails5.1で Webpacker が導入されて React や Vue.js などのフロントエンド技術がさらに身近になりました。ヽ( ´￢`)ノ ということで、早速 Rails5.1 + React + Redux でちょっとしたアプリを作ってみるぜ !! とコーディングを始めたところ、 ・・・・ ちょっと昔に ReactNative を勉強したときに使ったはずの Redux をガッツリ忘れているではありませんか …。 (ﾉﾟοﾟ)ﾉ そんな忘れん坊な私のためにReact + Reduxを復習し、今度こそ忘れないぞと誓うとともに記事としてまとめました。 React + Reduxの参考記事 React + Reduxについては詳しい記事がたくさんあります。 私も数回読みました。どれも分かりやすくて良い記事だと思います。 Redux入門【ダイジェスト版
"Redux Architecture Guidelines"を読んだ - dackdive's blog
こちらの記事を読んで。React&Redux でアプリを作る上で基本的だが重要なことが書かれていたので、後で見返すためにメモ。 なお本文は原文記事の完全な翻訳ではなくポイントだけかいつまんで自分の考えも交えたものです。 また、まとめさせていただく上で著者の許諾を得ています。 （拙い英語でおそるおそる訪ねたら流暢な日本語で快諾いただいてびっくり） もちろん、かまいませんよ！よろしければ, 私のサイトにリンクしていただけませんか？— Joe Ellis (@notjoeellis) 2017年6月26日 State state の形を計画（設計）する（Plan your state shape） state オブジェクトの構造をきちんと設計することは非常に重要。 こういった構造にすればいい！という唯一解はないが、設計の手助けとなるチェックリスト（質問リスト）がこちら。 users, accou
A guide to TDD a React/Redux TodoList App — Part 1 | HackerNoon
Part 1 — You’re here now. Part 2 — Link. Part 3 — Link. Part 4 — Link. This tutorial assumes some knowledge of JavaScript, the front end, test-driven-devlopment and the node package manager, with little-to-no experience of React/Redux. It’s my opinion on how it should be done at this very basic level while you’re still learning, and it should at the very least open avenues for you to pursue your o
ReactのRedux非同期処理がサルでも分かる超解説 - Qiita
この記事はかつての私と同じように「Reduxを使った非同期処理がいまいち分かんねー」という方に向けて書いた。とりあえずはReactの公式サイト、Reduxの公式サイト、Dan氏のReduxビデオ解説を観たが、なんかスッキリしない。特にReduxの非同期処理が分からない、という方向けの超シンプル解説。 Reactは公式サイトのチュートリアルなんかも充実していて丁寧だし分かりやすかった。しかしReduxは違う。特に公式サイトの非同期処理の例が変にややこしい。 こういうことをブログで書くと「アタシは公式サイトの説明を読んでも分からないバカです」と言ってるみたいだから、恥ずかしいしあまり書かれない。ウザいぐらいに「Reduxは素晴らしい。シンプル。カンタン」という発言がネット上にあふれている。 しかし私の頭ではパっと分からなかった。私以外でも「これ難しいなー」と思ってる人が居るんじゃないだろうか。
react-routerではなくuniversal-routerでReact + ReduxのSSR + SPAする | nabeliwonote
react-routerがv4になったことで既存のアプリケーションが完全に壊れて困っちゃった人。いると思います。 まあでも頑張ればv4でも動くようにできるしv3からマイグレートする系記事もぽつぽつと出ているので、詰んでしまったりv3に居残り続けるみたいな選択にはならないと思いますが。 しかしそこは今後もドラスティックなメジャーバージョンアップを行うことが予想されるreact-routerなので、この際別のルーティングライブラリを選択してもいいのではないか、みたいな。 そういうモチベーションで今回の記事を書いてみました。 そしてこの記事ではreact-routerの代わりにuniversal-routerを使います。 universal-router is… universal-router 名前の通りUniversalなルーターです。クライアントでもサーバーでも動くよっていうあれ。 git
Building a Simple CRUD App with React + Redux: Part I
06 Sep 2016 on react | redux | webpack | npm | es6 Building a Simple CRUD App with React + Redux: Part I Intro This is Part I of a eight part series on building a CRUD application with React + Redux. You can view the code for this project here. You can view the table of contents here React for Embereños At the Flatiron school, we've been gearing up to teach students to build React applications--bu
ReduxとRxjsと非同期処理 - 株式会社Rmake Blogs
Keywords: 技術 ES2015 JavaScript Redux RxJS ReactNative React Native for Web 黒田 大介(Dycoon)です。 Application architectureの理解を深めておこうと思いReduxやRxJSで実験的なプログラムを書いてみました。 特にReduxでの非同期処理をどう書くべきかと言うのはよく話題になるのでそこに重点を置いて確認してみました。 実験プログラムの機能は以下のとおりです。 Reduxのexampleのtodoの機能 localStorageへの保存機能（最小限の非同期処理として） これを以下の組み合わせで作りました。 Redux+redux-observable RxJS(Reduxの役割をRxJSである程度再現) デモはこちらです。 https://rmake.github.io/react-n
React/Redux/Node.jsのSSR/SPAを速くする6つのチューニングポイント
React/Redux/Node.jsのSSR/SPAを速くする6つのチューニングポイント：大規模ブログサイト表示速度改善 大解剖（終）（1/3 ページ） 2004年から続くブログサービス「アメブロ」が2016年9月にシステムをリニューアル。本連載では、そこで取り入れた主要な技術や、その効果を紹介していく。今回は、React/Redux/Node.jsを使ったIsomorphic JavaScript特有のパフォーマンスチューニング手法や実際にあった問題および、その解決方法について。 2004年から続くブログサービスである「アメブロ」は、2016年9月にシステムをリニューアルしました。本連載「大規模ブログサイト表示速度改善 大解剖」では、そこで取り入れた主要な技術や、その効果を紹介しています。 アメブロのリニューアルでは、React/Reduxを採用し、サーバサイドとフロントエンド両方での
ゼロから始めるElectron - 2週目 「ReactとRedux」 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? #はじめに Electronの学習を始めて2週目が過ぎましたので、情報をまとめたいと思います。 使う技術については、スクリプト言語をES2015(ES6)、フレームワークにReact、 Flux実装はReduxにしました。 理由は早くリッチな画面コンポーネントを使いたいからです。 今回のまとめは、ほとんどがReactとReduxになります。 ゼロからという割に、少し難しく感じるかもしれませんがよろしくお願いします。 今の理解を整理するために書いています。 どんな画面コンポーネントがあるかは下の図も参照ください。 ###これまでの記事 1
RailsエンジニアがReactを始めてSSRとReduxとTypeScriptを導入するまで | bitjourney Kibela
RailsエンジニアがReactを始めてSSRとReduxを導入するまで Roppongi.rb #3 "Rails x Frontend-Tech" 自己紹介 github.com/gfx BitJourneyでKibelaを開発 Speee, Inc. で技術顧問をしてる Reactは現職で初めて触った（2016年8月~） 今日の話 Kibelaのフロントエンドの話です。 読みはキベラ Markdownで書けて、フロー情報（Blog）とストック情報（Wiki）を区別して整理できる情報共有ツール これまでの話 新規Railsアプリに小さく導入するReact // Speaker Deck （dex1t, 2016/09/05） 小さく導入して学びながら開発を進める ⭕ Interactive UI componentをReactで＆jQueryも併用 ❌ viewをすべてReactで実装
React-Redux を試す - Qiita
Redux 用語 Action: 状態を変えるためのコマンド (コマンドパターン) Reducer: 古い State と Action から新しい State を作る関数 Store: action を受け取り Reducer を実行して State を返す。Store は reducer から作る。 store.dispatch(action) で store に action を送る。 createStore(reducer) を使って reducer から Store を生成する。 構成 もしかして他の react-redux プロジェクトでも使われるかも知れないのでディレクトリ構成を書く。 components: 見た目だけの静的な Representational Component (カスタム HTML タグ) を置く。 Component は props を受け取りタグを返
React + Redux + Electronのプロジェクトを作成する。 - Qiita
前書き 前回、ReactのプロジェクトにReduxを導入する記事を作成しました。 今回では、そのプロジェクトをElectronを使ってデスクトップアプリ化する方法を記述します。 正直、前々回でやった「ReactのプロジェクトをElectron化する」で紹介した方法とほとんど似ています。 リポジトリ いつものReactTodoのリポジトリになります。 ブランチで分けていますので、差分等をみても参考になると思います！ react-todo-reduxが前回作成したReactTodoにReduxを導入したブランチ react-redux-electronが上記をElectron化したブランチになります。 ReactTodo 1. ディレクトリ変更 前々回でElectron化した時は、electronフォルダとreactフォルダを作成しました。 今回は、もっと分かりやすくディレクトリを変更します。
React・Reduxはじめました - 弥生開発者ブログ
こんにちは！ Misoca開発チームのめろたん(@renyamizuno_)です！ 暖かくなってきて眠いですね。 最近は、「0.8秒と衝撃。」というバンドが活動を終了するってことを聞いて、まじかーとなってます。 はい。 今回はMisocaでReactを使い始めたことについて書きたいと思います。 React 詳しく書かないですが、ReactはFacebookで作られたユーザインタフェースを構築するためのライブラリです。 github.com 仮想DOMでJS界隈を賑わせていましたね。 class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } ReactDOM.render( <HelloMessage name="John" />, docume
Electron+React+Reduxで作るレトロなエクスプローラのハンズオン(チュートリアル) - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? #はじめに 前提知識ゼロからReact、Redux、Electronの組み合わせでレトロなエクスプローラーを作って、その仕組みを知るハンズオンです。 プロジェクト作成から、モジュールのフォルダ構成の決定、実際のコードを書き、ビルドして実行するまでを長々と解説します。 ##目的 ReactやReduxって何？、Fluxとか敷居高そう、解説記事を読んでもよくわからないし、難しいアプリケーションやそのソースコードは重たい。 手っ取り早く動く簡単なサンプル作って動きや書き方を知りたい！という方に向けて作ったものです。 あらかじめお断りしますが、
React+Redux未経験者のプロジェクト受入 - Qiita
自己紹介 渡辺 貴明 EngFrontend follow me! アジアクエスト株式会社 フロントエンドエンジニア 今日の話 React未経験者が、 Reduxのプロジェクトにスムーズに参加するため 何をしたか？ 想定する状況 ソースはreact-redux-universal-hot-example を元に複雑にした感じ 大事 アーキテクチャはこんな感じ これから物量をこなす段階 新しく人を追加する ES5のjsはできるがReact触ったことない 必要なこと Reactを覚える必要がある Reduxも覚える必要がある BFFでのAPIの叩き方も覚える必要がある ES2015も覚える必要がある 問題 Reactだけ覚えても仕事に入れない 丁寧に覚える時間はない しかし、覚えないと渡せる仕事がない やったこと 専用のチュートリアル的なものを作成 最小構成のサンプルを作って真似して書いてもら
GWの進捗としてRPG作った / redux-saga でメインループ処理、JSONSchemaからのコード生成 - mizchi's blog
作った。GWの間、コンビニと近所のカフェ以外に外出してないし、ゲームもしてない。 https://mizchi-sandbox.github.io/rpg-prototype/ で触れる。デザインはしょぼい。Chrome以外で動いてる気がしない。 コードはここ https://github.com/mizchi-sandbox/rpg-prototype 仮素材はウディタに付いてくるサンプル素材をお借りした。 WOLF RPGエディター公式サイト 【RPG作成フリーソフト】 仕様 Spaceでポーズ＆リスタート クリックでスキルの使用 一度スキルを使ったらクールダウンがある Player1 だけ操作できる あとはなんか察してほしい。 何故作ったか 前々から、ゲーム、とくにRPGを作りたいと思ってたのだけど、メインループがすんなり綺麗にかけたためしがない。趣味プロジェクトは技術的に辛いとやる
ReactNativeで理解しておくと良いReduxとMiddlewareのフローを理解する - tomoima525's blog
(5/29/2017追記 ‘必要不可欠’ とタイトルに書いていたら'必要不可欠でない'と指摘を受けました。なんらかのデータフローの仕組みは必要だけどReduxである必要はないのでタイトル修正しました) 最近ReactNativeをちょこちょこ書いています。アプリ向けのReactNativeを書くにあたって理解がのぞましいのがデータフローの仕組みであるRedux、及び様々な処理を仲介するMiddlewareです。小さなアプリをつくってみて一通り把握したので、整理も兼ねて初めてReact-Reduxを触れる時にどの辺を見ればよいかまとめてみます。 作ったのはChuckNorris FactsのJokeを検索して表示するアプリです。 github.com デモ動画 昨日のReactNativeアプリ続き。Reduxにローディングのステートも追加してみた。iOSとAndroidでも想定通り動く。
React Reduxファーストインプレッション - Islands in the byte stream
今更感ありますがReact Reduxを導入したの所感をメモしておきます。 github.com ざっとみてこれなら自分でも再実装できそうだなという印象 いままではreact-micro-container でfluxしてた cf. 小さいReactアプリケーションのためのライブラリ書いた - Qiita 新規Railsアプリに小さく導入するReact // Speaker Deck React Reduxにすると、個々のreact componentをfluxフレームワークに依存しない形で設計できる これに対して react-micro-container はcontainerに制御されることを意識した設計になる（＝containerとcomponentで設計が異なる） React ReduxなしでReactを初めてRect Reduxを導入するのは簡単だし、あとから別のflux実装にす
Electron + React + Redux - KAYAC Engineers' Blog
JSで書くデスクトップアプリが熱い Electron 熱いです。 Atom を始め、Qiita の Kobito や Slack など、 十分に実用できるアプリケーションが登場しはじめています。 なにかと話題のRPGツクールMVは、NW.js（旧node-webkit）ですが、これもJSで書かれていますね。 NW.js は、その他、女の子といちゃこらする系のゲームでも使われています。 JS でデスクトップアプリを書いて、うん千万売り上げるのも、もはや絵空事ではありません。 今回は、Electron と Redux、React の組み合わせで、 デスクトップアプリを作るまでの、簡単なチュートリアルを書きます。 登場人物紹介 Electron Github が開発してる、JS でデスクトップアプリが書けるすごいやつ NW.js より活発そうですごい React Facebook 製のすごいやつ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
