以前React Hooksを使ってWeb上で動作するニュースアプリの開発について記事にしました。そのニュースアプリをTypeScriptで書き直しましたので今回記事にしました。
UdemyにあるReact Nativeでニュースアプリを作るeラーニングコースに触発され、学習目的でReact Hooksを使ったWeb版ニュースアプリを作ってみました。 [blogcard url=https://www.udem[…]
以降前提としてNode.jsとパッケージ管理に使うyarnはインストール済みとしています。
ソースコードはGitHubにあげています。よかったらご利用ください。
React Hooks(TypeScript)で作ったWeb版ニュースアプリ. Contribute to ganeo/…
環境構築
TypeScript用のcreate-react-appを使ってアプリの雛形を作成
青字イタリック体はアプリ名
利用するパッケージをインストール
yarn add react-router-dom
yarn add @types/react-router-dom
yarn add axios
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome
yarn add node-sass
ソースコードの変更
ソースコードは以前作ったニュースアプリのものをコピーしてきて型を追加しただけです。型定義はtypeで表記を統一し、types.tsにまとめて記述してあります。ただし各コンポートのpropsの型は外部モジュールでは使わないのでモジュール内に記述しました。
参考サイト
「React + TypeScript」の書き方(ベストプラクティス)は「React TypeScript Cheatsheets」がよくまとまっています。本記事で作成したアプリもこれにのっとって書いている箇所が多くありますので紹介しておきます。
Prerequisites…