React

ZIP ファイルを使用した Azure App Service への React 製アプリのデプロイ

React 製 Single Page Application を Azure App Service でホストするために、Kudu のカスタムデプロイスクリプトを書いてデプロイ時にアプリをビルドし、それを express でサーブしていた。 tnakamura.hatenablog.com でも実は、Kudu のカスタムデプロイス…

React の SPA を Azure App Service でホストする

2021-07-06 追記 ZipDeploy で OK だった。 tnakamura.hatenablog.com はじめに React で実装した Single Page Application(SPA)を Azure App Service でホストしたい。Azure Static Web Apps ではなく、Web Apps。というのも、大人の事情で、GitHub や Azur…

React Router の Link と Material-UI の ListItem を組み合わせる

Material-UI と React Router を使う SPA で、必ずと言って良いほど書いているので、いい加減メモしておく。 import React from 'react'; import { NavLink as RouterLink, NavLinkProps as RouterLinkProps, useLocation, } from 'react-router-dom'; impor…

Material-UI の Button と React Router の Link を組み合わせる

Material-UI の Button をクリックしたら、React Router の機能を使ってページ遷移したいことが良くある。 useHistory フックで history オブジェクト取得しておいて、Button の onClick ハンドラ内で history.push してやれば実現できるけど、決まったパス…

Hello React Hooks

React からだいぶ離れている間に、16.8 で Hooks が出て、React を使った Web アプリ開発のパラダイムがかなり変わったようだ。Hooks 以前と以後に分かれるのでは、と思うくらいに。久しぶりに仕事で React を触ることになりそうなので、Hooks は試しておか…

create-react-app で .env.staging に記述した環境変数を使うようにビルドする方法

まず env-cmd をインストール。 yarn add env-cmd ステージング環境用の環境変数を記述した .env.staging ファイルを用意。 REACT_APP_BASE_PATH="https://testapi-staging.example.com" React アプリ内では process.env を使って環境変数を参照しておく。 c…

mapStateToProps で Props にマップした値を mapDispatchToProps 内で利用したい人生だった

例えば、アクセストークンを Redux のストアに保存していて、そのアクセストークンを使って Web API を呼び出したい。 アクセストークンを受け取って Web API を呼び出すアクションおよび ActionCreator は既にあるとする。 Redux のストアで管理しているス…

Browserify から Webpack に移行した

ES2015 + React の開発環境を Browserify で構築していたけど、 近いうち CSS もバンドルすることになりそうなので、 Webpack に移行することにした。 ブログに手順をメモしておく。 新規にプロジェクトを作成するときも同じ手順でいけるはず。 npm で必要な…

理性捨てて props 全部渡していたら react-router でハマった

react-router で遷移先のコンポーネントに props を渡すには React.cloneElement を使う。 tnakamura.hatenablog.com このとき、理性捨てて this.props.children && React.cloneElement(this.props.children, this.props) という風に props をまるごと渡して…

TypeScript でも React Meets Redux

React を使って TODO サンプルを TypeScript で書き直したので、 今度はさらに Redux も使ってみる。 まずは Redux の型定義ファイルをインストール。 tsd query redux --action install --resolve tsd query react-redux --action install --resolve 特にひ…

TypeScript で React

今まで書いたサンプル程度の規模でも、 実行時に踏むまでバグに気付かないことが結構あって、 実際踏むと萎える。 React で規模の大きい SPA 作っていたらと思うとゾッとする。 コンパイル時に分かれば良いのに。 そうだ。 TypeScript で書いてみよう。 Java…

React + Redux で Web API を呼び出す

React + Redux で SPA を作成するとき避けられないのが、 Web API の呼び出し。 というか、Web API を呼び出さないなんて、まず考えられない。 Web API の呼び出しでは、redux-thunk を使う。 github.com Redux のミドルウェアで、 Action Creator でオブジ…

React で使う HTTP クライアント候補として SuperAgent を試してみた

React と Redux には HTTP クライアントは含まれていない。 別途ライブラリを使う必要がある。 Web API を呼び出すためだけに jQuery を使うのはバカげているから、 専用のライブラリがいいね。 Browserify でビルドするから、npm にあるライブラリを使える…

React でも Bootstrap のコンポーネントを使う

React で SPA を実装する場合も、 デザインは Bootstrap のお世話になりたい。 クラスを指定するだけで使えるコンポーネントは普通に使えそうだけど、 Tooltip や Dropdown や Modal のような、 jQuery に依存したコンポーネントは React でそのまま使えない…

React + Redux でもルーティング

react-router でルーティングを試してみたけど、 実際のアプリは React + Redux で開発する予定。 その際、react-router のみではなく redux-router も一緒に使う。 redux-router は react-router の Redux バインディング。 ルーターの状態を Redux のスト…

react-router で遷移先のコンポーネントに props を渡す

ネストしたルートに遷移するとき、 遷移先のルートに対応するコンポーネントが、親コンポーネントの props.children にセットされている。 ここで props.children をそのまま表示せずに、 React.cloneElement で props.children を複製すると、 その際に pro…

react-router を使って React でルーティング

SPA を作る上で実装したいのがルーティング。React を使ったアプリでのルーティング実装には react-router を使う。 今回からインストールは npm で。 npm install --save react-router react-router を使って Master-Detail の簡単なサンプルを書いてみた。…

React 開発環境構築

React を使ってきちんと SPA を作るのに、毎回ブラウザ表示時にコンパイルしていては、さすがに効率悪い。 モダンなフロントエンド開発環境にしたいので、調べながら構築することにした。 react や react-dom などのライブラリは npm でインストール。 そう…

React コンポーネントは Redux に依存しないほうがいい

先日 Redux を試したとき 末端のコンポーネントからコンテナコンポーネントまでイベント(というかコールバック)を伝播して、 コンテナコンポーネントで dispatch を呼び出してみたけど、 これ末端のコンポーネントで dispatch 呼び出したらダメなんだろうか…

React Meets Redux

先日 React で作ったタスクリストのサンプルを、 React と Redux で書き直してみた。 <html> <head> <meta charset="utf-8" /> <title>Redux Sample</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></meta></head></html>

Hello React World

Single Page Application を Angular で実装しようと思っていたんだけど、 Angular2 でコンポーネント指向にガラリと変わるみたいなので、 Angular の採用は見送って React を選択。 同じコンポーネント指向なら React でいいかな、と。 React 入門ということ…