React/Redux約三年間書き続けたので知見を共有します | Enigmo Life
Enigmo Advent Calendar 2018の4日目の記事です。 この記事の目的 Enigmoが運営しているBUYMAでは古代から運用しているjQueryの他に、2016年頃から一部ページのフロントエンドをReact/Reduxで構築しています。 私自身もEnigmoに入社してからの約三年間でReact/Reduxアプリケーションの開発に多数携わってきましたので、そこで培った知見を共有したいと思います。 React/Reduxの利点 まずはじめに、ReactとReduxを使うメリットを再確認しておきたいと思います。 それぞれのメリットをしっかりと認識しておくことで、実装する際どう書くか迷ってしまった場合などにそのメリットを最大限活かす選択をすることができます。 Reactの利点 コンポーネント化が容易で再利用性が高い 状態をDOMから分離できる(Stateless) Reduxの
Re-ducksパターン：React + Redux のディレクトリ構成ベストプラクティス
Re-ducks というディレクトリ構成のベストプラクティスについてまとめる。Re-ducksパターンを使うことで、React + Redux を用いた開発がよりメンテナンスしやすいものになる。 Ducks パターン 名前からもわかるように、Re-ducks は Ducks というパターンをベースにしている。 erikras/ducks-modular-redux Ducks パターンが解決すること： actionType、action、reducerが散らばっててつらい 結局のところ actionType、action、reducer は密結合なので、ducksパターンではこれら3つを1つのファイルにまとめる。 // widget.js // Actions const LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widget
Redux入門 1日目 Reduxとは(公式ドキュメント和訳) - Qiita
Redux初心者向けです。というか私が初心者です。 Reduxに触れてみようと思って、まずは公式のGithubのドキュメントでも読んでみるか、と自分へのメモも兼ねてざっくりとした和訳をして行きます。 公式github Redux入門 1日目~6日目までの部分を短くまとめた記事も書きました。 ダイジェスト版 1.1 Motivation(背景) http://rackt.org/redux/docs/introduction/Motivation.html 近年、Javascriptのシングルページアプリケーションは複雑になってきてstate(状態)を管理するのはしんどくなってきた。新機能開発するのもバグ修正するのもかなり辛い。 根本的に、「変化」と「非同期」を"同時"にコントロールするのは人間には無理がある。Reactはその問題に対してViewレイヤーで非同期と直接DOM操作を取り除くこと
React+Redux未経験者のプロジェクト受入 - Qiita
自己紹介 渡辺 貴明 EngFrontend follow me! アジアクエスト株式会社 フロントエンドエンジニア 今日の話 React未経験者が、 Reduxのプロジェクトにスムーズに参加するため 何をしたか？ 想定する状況 ソースはreact-redux-universal-hot-example を元に複雑にした感じ 大事 アーキテクチャはこんな感じ これから物量をこなす段階 新しく人を追加する ES5のjsはできるがReact触ったことない 必要なこと Reactを覚える必要がある Reduxも覚える必要がある BFFでのAPIの叩き方も覚える必要がある ES2015も覚える必要がある 問題 Reactだけ覚えても仕事に入れない 丁寧に覚える時間はない しかし、覚えないと渡せる仕事がない やったこと 専用のチュートリアル的なものを作成 最小構成のサンプルを作って真似して書いてもら
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 Native ~ Reduxの導入1 ~ - ついんてっく
Reduxの導入 どうも兄です。 前回に引き続き、reduxの導入をやっていきたいと思います。 twins-tech.hatenablog.com 今回、reduxの導入はreact-native-router-fluxを用いようと思います。 github.com reduxの導入は、react-native-router-fluxを使わずともできますが、 flux/reduxに対応しており導入が楽なのと、 routingの際、stateが自動的にpropsとして渡ってきてとても便利です。 次の構成を目指して構築していきます。 続きを書きました。 twins-tech.hatenablog.com app ├── actions // 関数。http通信や、データの処理をする ├── components // containerからpropsを受け取る部品 ├── container
reactとreduxを使ったExampleのソースコードリーディング:todos編
はじめに 株式会社あゆたの毛利です。 この記事は、第9回これから始める人のためのNode.js,React.js勉強会用の資料です。 ざっくりまとめただけなので、おかしなところがあったらご指摘ください。 今回のネタのreduxのexampleのtodosのソースコードはこちら 一応公式にも解説があるのですが、英語なのと私自身ソースの流れを見ないといまいち理解ができなかったので、まとめてみました。 exampleはES2015で書かれているので必要に応じてその解説もしていきます。 対象、前提 Javascriptが理解できている。 Reactがなんとなく理解できている。 動かしてみる場合は、node.jsがインストールされていてnpmが使用できる環境がある。 ソースをダウンロードして動かしてみる こちらからダウンロード(もしくはgit clone)してください。 今回読むexampleは、/
Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説
玉石混合状態にあったFluxのフレームワークも、ここ最近ではReduxが首一つ抜け出したような感じとなっています。自分はFacebook/Flux派ではありましたが、先月発売された『WEB+DB PRESS vol.92』に掲載されていた伊藤直也さんのReduxの記事を読んで、Reduxを覚えてみようという気になりました。Redux自体はとてもシンプルで、とっつきやすいと思いました。ただReactとの連携はFacebook/Fluxと比べるとややこしい部分が多いかなといった印象です。ちょっとしたサンプルを作ってみたので、Reduxの実装方法とReactとの連携について紹介したいと思います。 ReduxとはReduxは、Facebookの提唱するFluxアーキテクチャに基づいて（影響を受けて）設計されたJavaScriptフレームワークです。作者は@dan_abramov氏。 reactjs
React-Redux をわかりやすく解説しつつ実践的に一部実装してみる - 筋肉とエンジニアリングで すべてを解決するブログ
全くわからない こんにちは。 ここ1〜2週間くらい React と Redux 触ってるんですが、あまりにもまともなドキュメントがなく、どう動かして良いのかわからなかった状態でした。 しかし、色々仕組みを追っているうちに「こんな感じで書けばいいのでは」というのがわかってきたので僕の言葉&コードでまとめてみようと思います。 独自の解釈かも知れない部分があるので、変なところはコメントいただけると助かります。 まず React について React についてはたくさん書かれてるのと、ふぅん〜くらいに流してもだいたいなんとかなるので端折ります。 qiita.com 上記の基本〜コンポーネントの使用くらいまで読んだらだいたいOKです。 重要なのは、 （MVCで言うところの）Viewのみを担当する。 JavaScriptのコード中に（PHPの様に）「HTMLタグ(っぽいもの)」を書ける。 ここらへん。
React Native - Redux (part1 - todoApp) - Qiita
一昨日、昨日に引き続きFluxです。今日は2015年12月時点でのFluxアーキテクチャの本命でGithub starが１万を超えるHotなReduxについてReact Nativeでどうやるかを説明します。 ReduxはFluxアーキテクチャの一種で, Storeに1つのStateを持ち、それがアプリケーションの内部状態となります。React Nativeでは、ReduxのStateでアプリに内部状態を持たせることができるので、例えば、どのタブを開いてどの情報を持っているかが１つのStateを見るだけでわかります。これはテストで重宝します。結合テスト、E2EテストなどでStateを照らし合わせることで、コード内でアプリの状態がテストできます。 ReduxはReactだけでなくAngular等でも使えるようです。 Egghead.ioでReduxの作者のDan氏が動画のチュートリアルを公開
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
