この本は、AngularJS の公式が提供している[チュートリアル](<a href="https://docs.angularjs.org/tutorial" target="_blank" rel="nofollow noopener noreferrer">https://docs.angularjs.org/tutorial</a>) を React にリプレイスすることで、フロントエンドのフレームワークの移行作業を体験することを目的としています。この記事内には以下の要素が存在します。

- Webpack の導入
- JavaScript → TypeScript
- angular2React を利用した段階的なコンポーネントの置き換え
- Jasmine + Karma → Jest + Testing Library + MSW
- Protractor → Playwright
- angular-animate → React Transition Group, react-flip-toolkit, React Framer Motion,
- angular-resource → SWR
- angular-route → React Router

この本で実装したコードの内容は以下のレポジトリを参照してください。

<a href="https://github.com/azukiazusa1/angular-phonecat/tree/master" target="_blank" rel="nofollow noopener noreferrer">https://github.com/azukiazusa1/angular-phonecat/tree/master</a>

この本は、AngularJS の公式が提供している[チュートリアル](https://docs.angularjs.org/tutorial) を React にリプレイスすることで、フロントエンドのフレームワークの移行作業を体験することを目的としています。この記事内には以下の要素が存在します。

- Webpack の導入
- JavaScript → TypeScript
- angular2React を利用した段階的なコンポーネントの置き換え
- Jasmine + Karma → Jest + Testing Library + MSW
- Protractor → Playwright
- angular-animate → React Transition Group, react-flip-toolkit, React Framer Motion,
- angular-resource → SWR
- angular-route → React Router

この本で実装したコードの内容は以下のレポジトリを参照してください。

https://github.com/azukiazusa1/angular-phonecat/tree/master

AngularJS の公式チュートリアルを React にリプレイスしてみた

はじめに

環境構築

E2E テストを導入する

Webpack の導入

リンターの導入

React の導入

コンポーネントのテスト

電話一覧画面 を React コンポーネントにする

電話詳細画面を React コンポーネントにする

checkmark サービスを置き換える

PhoneImages コンポーネント

PhoneDetail コンポーネント

angular-resource を置き換える

ルーティングを置き換える

おわりに

zenn-contents

react

typescript

angularjs

azukiazusa