なぜNext.jsをやめたのか？ - Hello Tech

2022/04/20 140 users Hello Tech Next.js 経緯 ローンチ前 背景

javascripter です。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 この記事では、AutoReserveウェブ版が、Next.jsを一度採用したがやめ、その後create-react-app + react-routerの構成に移行した経緯を書きます。 ウェブ版開発の背景 AutoReserve はAIが電話予約を代行してくれる飲食店... 続きを読む

react-router 作り方

2021/12/04 15 users history ライブラリ API カスタムフック 最強

history で自分だけの最強のルーターライブラリを作ろう！ react-router は history というライブラリを内部で使用しています。ブラウザの history API の抽象化を提供するのが目的のライブラリです。 react-router v5 の API に useHistory というカスタムフックがあります(v6 から名前が変更されています)が、それはま... 続きを読む

触ってみてわかったNext.jsと比べた時のRemixの特徴

2021/11/23 14 users Remix ISR SSG Next.js ライブラリー

Remixとは react-routerというライブラリーの開発元が作ったReact製のフレームワークで、Next.jsと同じようにファイルベースでルーティングできます。 そうなると、Next.jsと一体何が違うのかと感じている人も多いと思うので、 この記事ではNext.jsと比べた時のRemixの考え方の違いをまとめたいと思います。 SSGやISRは... 続きを読む

React-Router v4を使って認証状態でリダイレクトする処理

2018/07/12 22 users component React 処理 import ROUTE

ログインが完了したらトップページにリダイレクト、未ログインで認証が必要なページにアクセスしたらログインページへリダイレクト、という処理がある。 react-routerのv4でルーティングするとこんな形である。 import React, {Component} from 'react' import { BrowserRouter as Router, Route, Switch } from 'react-... 続きを読む

universal-router で react-router を倒す - Qiita

2018/02/05 56 users Router const Qiita kriasoft

Universal Router とは https://github.com/kriasoft/universal-router isomorphicガチ勢の kriasoft 先生作の Router ライブラリ。 内部的には path-to-regexp だから express と同じルール import UniversalRouter from 'universal-router' const... 続きを読む

render prop と HOC について - Qiita

2018/01/08 16 users HOC Qiita 要約 主張 com

react-router の mjackson が HOC を批判していたので、自分の考えを書いておきます。 Use a Render Prop! - componentDidBlog https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce mjackson の主張の要約 ES2015 Classes は mixin 的な振る舞いを... 続きを読む

10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。

2016/04/03 1980 users ツケ redux React material-ui 日々

2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + ... 続きを読む

生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず… | プログラミング | POSTD

2016/03/31 313 users Webpack Flux jsx React POSTD

React.jsが騒ぎを起こしているのはご存知の通りです。しかし、調査に数時間を費やした挙句、あまりに多くの用語に圧倒されただけで終わっていないでしょうか。JSX、flux、ES6、webpack、react-routerが使える今、他に必要なのはReactの使い方を説明してくれる人だけです。免責事項：　私はJSX、Flux、 ES6 、そして webpack を非常に気に入っています。これらのツ... 続きを読む