react
mktmkt.hatenablog.com 前回の投稿で、従来のReact, Reduxで書いていた部分をRedux Toolkit (RTK) でリファクタしたが、今回はRTKのメソッドについてまとめていく。 Redux Toolkit (RTK) のメソッド一覧 configureStore() configureStore()に渡すオプション…
React, Redux, TypeScriptの組み合わせだと、どうしてもファイル数が増えて、記述があちらこちらに散らばることが多々あり、リーダビリティが下がってしまう。 Redux Toolkit (RTK) を使えば、あちらこちらに記述していた書き方を集約して書ける以外にも、re…
こちらのBen Awadのサンプルがよかったのでメモしておく。 github.com ディレクトリ構造 . ├── package.json ├── public │ └── index.html ├── src │ ├── App.tsx │ ├── Counter.tsx │ ├── ReducerExample.tsx │ ├── TextField.tsx │ ├── index.tsx │ └── re…
github.com useSelector, useDispatchを用いたReduxの書き方 ディレクトリ構造 container, presentationalディレクトリで分けて、atomic design風に分ける。 . ├── App.css ├── App.tsx ├── components │ ├── container │ │ ├── molecules │ │ │ └── Colorfu…
リファクタプロセス hooksを一つずつ導入 useState カウンターアプリを、まずはstate hookを使って書いてみる。 import React, { useState } from 'react' import ReactDOM from 'react-dom' const Counter: React.FC = () => { const [count, setCount] = u…
案件などでも使えそうな実装だったので、メモがてらブログ記事に残しておく。 例えば、何かしらの記事一覧を取得してきて、3点リーダーで省略した文一覧として表示してから「もっと見る」ボタンで表示するなど、様々な応用例が考えられる。 index.js (エント…
今回、React hooksによるToDoアプリを作って、従来のclassコンポーネントによる書き方と比べて、そのように書き方が変わったかというところを検証してみた。 結果からいうと、React hooksを導入して書いた方が圧倒的に書きやすかった。 コードがはるかにリー…
Reduxイントロ Reduxとはアプリケーションの状態（state）を管理するためのJSライブラリ。 ではアプリケーションの状態とは具体的に何かというと、いろんな目的で後に使用する情報を保持しておくためのグローバルオブジェクト。 小さな例ではページロード時…
HOCとAnt Designとやってきたので、それらのコンセプトを頭に置きながらContext APIというものを学んでみる。 コンポーネントが増えてアプリケーションが大きくなればなるほど、stateやpropsの受け渡しは大変になる。 そんなときに使える手段の一つとしてCon…
コメント追加するUIをAnt designを用いて作成。 ant.design create-react-appでのAnt designの導入 create-react-appの設定をオーバーライドする必要がある。 ant.design eslintの設定 Standardを用いた。 github.com Codesandbox
例えば、複数のコンポーネント間で同じファンクションやロジックを使用している場合、繰り返しが発生していることになりDRYではない。そんなときに使えるのがHigher Order Components (HOC)である。 実はVanillaJSにもHigher Order Functionsが存在していて…
今までPropTypesやTypeScriptによる静的型付けを述べてきたが、今回はFlowを用いた実装をしてみる。 flow.org 次のようなディレクトリ構造で、5つ星評価のUI実装を考える。 . ├── Stars.css └── Stars.js インストール インストール方法は公式ドキュメントに…
Reactでは、状態管理がDOMではなくReact componentで行われる。 Reactなしである場合、例えばformのinput要素の状態を取ってくる場合は従来はDOM操作によって取ってくるという手法だった。 ではどちらの方法がベターであるのか？ この質問に付随して出てくる…
JavaScriptにはBoolean, Null, Undefined, Number, String, Symbol, Objectの7種類のデータ・タイプが存在する。 それらの型をハンドリングする際にFlowとかTypeScriptなどのツールが導入されているわけだが、Reactのプロジェクトでそこまで導入するのが面倒…
webpack + babelでの開発環境に加えて、eslint + prettierの設定まで。 パッケージのインストール react + react-dom npm install react react-dom ちなみにreact-domはreactをDOM向けにコンパイルするパッケージで、 DOM以外の環境などにコンパイルする際に…
外部データから取得して一覧表示して、Like付けたり削除できたりできるところまで。 ファイル構成 . ├── App.js ├── Vidly.jsx ├── components │ ├── atoms │ │ └── Like.jsx │ └── molecules │ └── Movies.jsx ├── data │ └── services │ ├── fakeGenreServ…
カウンターコンポーネントを最終的にリファクタリングしたもの。 ファイル構成 . ├── App.jsx ├── components │ ├── Counter.jsx │ ├── Counters.jsx │ └── Navbar.jsx └── index.js ファイルの中身 App.jsx import React, { Component } from 'react' impor…
Lifecycle Hooks ReactのLifecycle hooksでよく用いられるものはだいたい次の通り。 Mount constructor render componentDidMount Update render componentDidUpdate Unmount componentDidUnmount Mounting phase constructor, render, componentDidMountの…
React復習がてら要点をまとめていく。 React学習3で学んだところから、さらに階層深くコンポーネント構成をする、次のようなケースの場合。 . ├── App.jsx ├── components │ ├── Counter.jsx │ ├── Counters.jsx │ └── Navbar.jsx └── index.js Objectやargu…
React復習がてら要点をまとめていく。 Single source of truth Reactでの状態（state）管理は、一つのソースで行わないといけない。これがSingle source of truthと言われるものである。 あるlocal stateを持ったコンポーネントを複数読み込んでその親もstat…
React復習がてら要点をまとめていく。 外部ファイルの配列形式のデータを読み込んできて、画面に表示する例。 要点整理 Conditional renderingをするときは、returnするブロックを別メソッドで分けておくとやりやすい。 読み込むデータに対してgetter, sette…
React復習がてら要点をまとめていく。 環境構築 Starter Kit create-react-appをグローバルでインストールして、スターターファイルを立ち上げる。 create-react-app counter-app ちなみに、スターター系は公式ドキュメントStarter Kits – Reactにもまとめら…
