React Hooks をどう使っていくか - mizchi's blog
大きく、末端コンポーネントと全体アーキテクチャの視点がある。 末端コンポーネントでの Hooks ここはあまり議論の余地なく、setState で local state を持っているものや、 componentDidMount していたものを置き換えることが出来ると思う。 FC を class にせずにちょっとリッチにするのが簡単になる。 class の setState 相当 function Counter() { const [count, setCount] = useState(0); const onClick = useCallback(() => setCount(s => s + 1), []); return <button onClick={onClick}>{count}</button> } componentDidMount / componentWillUn
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
React-Reduxが分からない人のためにReact-ReduxのAPIを全部説明する - Qiita
背景:React-Reduxが全然わからないのでちゃんと勉強した 開発現場にReact-Reduxを導入しておきながら、チーム全員が「 とりあえず動くと思うから実装しようぜ 」という状態だったので、本腰入れてドキュメント読みました。前回の記事の内容を把握したら一気に見通しが良くなると思ったので、説明します。色々なサイトやドキュメントは明らかに冗長な説明が多いので、極限までエッセンシャルを絞って説明することで、ゼロ知識からでもある程度、理解できるレベルの説明に落とし込むことに挑戦しました。うちの開発チームで知見として残すために作成したものですが、需要がありそうかなと思ったので、公開します。需要がなければすみませんでした。おかしな点があれば、まさかりお待ちしております。 Caveats Reduxが理解できていないと、React-Reduxの必要性が理解しにくいため、Reduxがなんなのか不安
React(+Redux)+gRPCで実現するクリーンアーキテクチャ＋マイクロサービス構成
はじめに 設計がしっかりしていないまま開発をしてしまうとビジネスロジックとライブラリが密結合となりがちです。 密結合度が高いほど修正が困難となり、継続的な開発の難易度が上がっていきます。（技術的負債） またプロジェクトが大きくなってくると扱うデータ量も多くなり処理速度もデータ量に比例するため、計算量オーダーの影響を受けます。 プロジェクトのそれぞれの機能に対して 1. 再利用可能 2. テストしやすい 3. 機能追加しやすい 4. ビジネスロジックとライブラリ、REST API（+マスターデータ）を分離できる となっていれば継続的な開発がしやすいです。 最近ではクライアントサイドではクリーンアーキテクチャ、Atomic Design、バックエンドではマイクロサービス化という設計方法があります。 この設計が良いと感じているのはビジネスロジックと機能の責務を分離し、 ライブラリとREST AP
React × Redux 初心者入門(4日目：Material-UI(v1)を実装する) ver.2018 - Hirooooo’s Labo
前回までで簡単なカウンターアプリがReact Reduxで出来上がっている状態なので、次はデザイン周りの実装をしていきたいと思います。 今回実装するのはMaterial-UIを追加してみたいと思います。 こちらは昔書いた記事のリライト版になりますので、記事の文言等々はご了承ください。 公式サイト material-ui v1のインストール SVGIconを追加する MuiThemeを読みこませる テーマファイルの作成 src/myThemeFile.jsx App.jsxでテーマを読み込む HeaderをAppBarにしてみる Header.jsxにAppBarを追加する JSSスタイルの反映 1.withStylesのimport 2.styleの作成 3.ピュアファンクションだったHeaderをComponentにし、withStylesでラップします。 4.PropTypesの定義追
【React-Redux】ESLintでAirbnbのJavaScriptスタイルガイド導入編 [初心者入門3日目] | Hirooooo’s Labo
React × Reduxの連載記事の3回目です。 今回はESLintのJavascriptコードスタイルを設定していきたいと思います。 ESLintを使用してJavascriptのコードスタイルガイドを導入している人は多いと思いますが、その中でもAirbnbのスタイルガイドが人気なので、できるだけ準拠するよう実装していきたいと思います。
![【React-Redux】ESLintでAirbnbのJavaScriptスタイルガイド導入編 [初心者入門3日目] | Hirooooo’s Labo](https://cdn-ak-scissors.b.st-hatena.com/image/square/0c21b51e246f4c9f91d4c5d5f7e8ee71123c7f9f/height=288;version=1;width=512/https%3A%2F%2Fhirooooo-lab.com%2Fwp-content%2Fuploads%2F2020%2F03%2Freact-redux-eslint-by-airbnb.jpg)
React × Redux 初心者入門(1日目：webpackで環境構築編) ver.2018 - Hirooooo’s Labo
1年半前に同じ記事を書いたのですが、バージョンアップによる変更が多く、古い記事ではまともに動かすこともできない記事となってしまったため、React × Reduxの連載記事を1日目から再投稿していこうと思います。 記事の文言等々は過去の記事をリライトしてますので、ご了承ください。 それではReact、Reduxを使用してWebアプリを構築していきたいと思います。 まずはサラのMacに環境構築から、webpackを使用してreact-reduxのsampleが動くところまでやってみたいと思います。 使用プラグイン、ライブラリ等は追々検討するということで。。 react-routerとか、axiosとか、material-uiとか。 基本的に自分メモなので、よくわかってないで書いてる部分もすごいあるので、間違いとかあったらゴメンナサイ。 今の私の環境 React環境構築 HomeBrewのイン
React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！ - Qiita
Facebook が開発したUI ライブラリ 旧来の DOM 操作による状態管理を props や state で抽象化 パーツをコンポーネントごとに管理するのが得意 https://reactjs.org/ から、ライブデモを試せます。 SPAなどの複雑化する React のステート（状態）管理を、ルール（哲学）に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ （*個人的解釈です） もともとは Flux と言う、データの流れを一方向に制限することで、流れを追いやすくするという、オブザーバーパターンの亜種から、さらに転じた考え方。 Redux と言う名前は 「Reducer」 + 「Flux」 で 「Redux」だそうです。array.reduce と同じような役割を Reducer が担います。詳しく知りたい方は作者の発表をご覧ください Dan Abramov
2018 年 React と Redux のエコシステム総まとめ - Qiita
Angular などの JavaScript フレームワークは大規模向けに設計されており、標準で多くのエコシステムが組み込まれています。 React は単なる View ライブラリです。そのため View ライブラリを補完するためのエコシステムの選択が必須となります。 エコシステムを自由に組み合わせて開発者とプロジェクトに応じた理想的なフレームワークを作成する必要があるわけです。 これは、小規模アプリケーションから大規模アプリケーションまでの様々な要件やニーズに対応できる柔軟性が高いことを意味していますが、エコシステムを選択するためのコストが必要となります。 下記では、筆者が最低限、導入を検討する余地があると考える主要な React のエコシステムとその簡単な概要を記載しています。 筆者の独断と偏見で選択したエコシステムであることを考慮してお読みいただきたいです。 既知のエコシステム (ほ
reactとreduxを使ったExampleのソースコードリーディング:todos編
はじめに 株式会社あゆたの毛利です。 この記事は、第9回これから始める人のためのNode.js,React.js勉強会用の資料です。 ざっくりまとめただけなので、おかしなところがあったらご指摘ください。 今回のネタのreduxのexampleのtodosのソースコードはこちら 一応公式にも解説があるのですが、英語なのと私自身ソースの流れを見ないといまいち理解ができなかったので、まとめてみました。 exampleはES2015で書かれているので必要に応じてその解説もしていきます。 対象、前提 Javascriptが理解できている。 Reactがなんとなく理解できている。 動かしてみる場合は、node.jsがインストールされていてnpmが使用できる環境がある。 ソースをダウンロードして動かしてみる こちらからダウンロード(もしくはgit clone)してください。 今回読むexampleは、/
コードで理解するRedux(React使用) - Qiita
対象読者 Reactの書き方がある程度はわかってる人 Reduxの概念とか言われてもわからない、コードでくれって人 私（備忘録） Reduxとは fluxの考え方にもとづいて作られたフレームワーク React専用ではないが、Reactと連携させることでより高いパフォーマンスを得られる 【参考】fluxとは facebookが提唱したアーキテクチャ（ソフトウェア設計の思想・考え方） データの流れを一方通行にしたもの Reduxの特徴 Reduxの3原則 １．Single source of truth １つのアプリケーションが持つstateは１つのみ stateをオブジェクトツリー構造で管理する ２．State is read-only stateを直接変更することはできない 変更したいときはActionをdispatchで渡したときのみ これにより、stateの変更に関わる部分が限定化され
react-reduxの使い方まとめ
React React そのものは次の記事も参照。(React 公式よりももっと低レベルなところから始める、React チュートリアル, React チュートリアル 日本語翻訳) React は State を元にバーチャルDOMを作成し、バーチャルDOMを元にDOMを生成するシステムを担うライブラリ。state の更新があった場合、その差分だけを DOM に反映することができ、パフォーマンスが良い。つまり、PC への負担が少ない。React を用いる利点のうち、一番大きなものは、状態 state と view 実際の見た目をどうするか、という「二つの問題を完全に切り分ける」ことができる。つまり、state をどう変化させるか、という問題と、state を DOMにどう反映させれるか、の2つを完全に切り分けて実装できる。 React Component React はコンポーネントと呼ばれ
ReactのRedux非同期処理がサルでも分かる超解説 - ベルリンのITスタートアップで働くジャバ・ザ・ハットリの日記
この記事はかつての私と同じように「Reduxを使った非同期処理がいまいち分かんねー」という方に向けて書いた。とりあえずはReactの公式サイト、Reduxの公式サイト、Dan氏のReduxビデオ解説を観たが、なんかスッキリしない。特にReduxの非同期処理が分からない、という方向けの超シンプル解説。 Reactは公式サイトのチュートリアルなんかも充実していて丁寧だし分かりやすかった。しかしReduxは違う。特に公式サイトの非同期処理の例が変にややこしい。 こういうことをブログで書くと「アタシは公式サイトの説明を読んでも分からないバカです」と言ってるみたいだから、恥ずかしいしあまり書かれない。ウザいぐらいに「Reduxは素晴らしい。シンプル。カンタン」という発言がネット上にあふれている。 しかし私の頭ではパっと分からなかった。私以外でも「これ難しいなー」と思ってる人が居るんじゃないだろうか。
電卓アプリで学ぶReact/Redux入門(基礎知識編) - Qiita
はじめに 今回の記事は「電卓アプリで学ぶReact/Redux入門(実装編)」を読む前に知っておいたほうがいいReact.jsとReduxの概要についてまとめた記事になります。 特に状態管理の部分がReact/Reduxのアプリケーションを作成する上で重要になってくるので、React.jsの話は最小限にとどめ、Reduxの話を中心に説明をしたいと思います。 React.jsとは まずReduxの説明をする前にReact.jsについて説明をします。 React.jsとは、MVCモデルでいうところのV(View)の部分の役割に特化したJavaScriptで書かれたライブラリです。よくReact.jsと比較されるAngular.jsはMVC全ての役割を担います。 Viewのみの役割を提供するということもあり、学習コストが低く、それがReact.jsのメリットでもあります。 Component R
イメージで覚えるReact + Redux - ユニファ開発者ブログ
こんにちは、tanaka です。 Rails5.1で Webpacker が導入されて React や Vue.js などのフロントエンド技術がさらに身近になりました。ヽ( ´￢`)ノ ということで、早速 Rails5.1 + React + Redux でちょっとしたアプリを作ってみるぜ !! とコーディングを始めたところ、 ・・・・ ちょっと昔に ReactNative を勉強したときに使ったはずの Redux をガッツリ忘れているではありませんか …。 (ﾉﾟοﾟ)ﾉ そんな忘れん坊な私のためにReact + Reduxを復習し、今度こそ忘れないぞと誓うとともに記事としてまとめました。 React + Reduxの参考記事 React + Reduxについては詳しい記事がたくさんあります。 私も数回読みました。どれも分かりやすくて良い記事だと思います。 Redux入門【ダイジェスト版
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は素晴らしい。シンプル。カンタン」という発言がネット上にあふれている。 しかし私の頭ではパっと分からなかった。私以外でも「これ難しいなー」と思ってる人が居るんじゃないだろうか。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React-Redux超入門(1) - Qiita
【React-Redux】webpackでCSSを読み込んで反映編 [初心者入門5日目] | Hirooooo’s Labo![【React-Redux】webpackでCSSを読み込んで反映編 [初心者入門5日目] | Hirooooo’s Labo](https://cdn-ak-scissors.b.st-hatena.com/image/square/eccb3b097994c1dcd09e3883fbfffbd86a1279da/height=288;version=1;width=512/https%3A%2F%2Fhirooooo-lab.com%2Fwp-content%2Fuploads%2F2020%2F03%2Freact-redux-import-css-for-webpack.jpg)
how-to-start-redux.md
