UdemyにあるReact Nativeでニュースアプリを作るeラーニングコースに触発され、学習目的でReact Hooksを使ったWeb版ニュースアプリを作ってみました。
Webの開発経験はあるけどアプリの開発は初めてという方、エンジニアになりたての人にお薦めのReact Native入門講…
グローバルステート管理にReduxは使わずHooksのみで実装しています。
ソースコードはGitHubで公開していますので、よかったらご利用ください。
React Hooksで作ったWebニュースアプリ. Contribute to ganeo/react-news-ap…
ニュースアプリの機能
※ 「後で読む記事」の登録はストレージには保存していないので、ページを閉じると登録は消えます。
利用したパッケージ
赤字は追加して入れる必要があるパッケージ
コンポーネント構成
ソースコードのディレクトリ構成
├── App.js
├── App.scss
├── App.test.js
├── categoryList.js <=カテゴリーのリスト
├── components <= 部品としてのコンポーネントをまとめるディレクトリ
│ ├── ArticleCard <= 1部品のコンポーネント用ディレクトリ
│ │ ├── ArticleCard.js <= コンポーネント定義ファイル
│ │ └── ArticleCard.scss <= CSS定義ファイル
│ ├── ArticleList
│ │ ├── ArticleList.js
│ │ └── ArticleList.scss
│ ├── Category
│ │ ├── Category.js
│ │ └── Category.scss
│ ├── CategoryButton
│ │ ├── CategoryButton.js
│ │ └── CategoryButton.scss
│ └── Header
│ ├── Header.js
│ └── Header.scss
├── flux <= useReducer用のファイルをまとめるディレクトリ
│ ├── actions
│ │ └── ClipAction.js <= Action定義ファイル
│ └── reducers
│ └── ClipReducer.js <= Reducer定義ファイル
├── index.js
├── index.scss
├── news.json <= ローカルに保存したニュースデータ(テスト用)
├── pages <= ページ単位でコンポーネントを統括するディレクトリ
│ ├── clip
│ │ ├── ClipPage.js
│ │ └── ClipPage.scss
│ └── home
│ ├── HomePage.js
│ └── HomePage.scss
├── serviceWorker.js
└── setupTests.js
ローカル環境で稼働させる際の留意事項
ニュースアプリは無料でも利用できる「News API」というAPIサービスを利用しています。
GitHubからソースコードを取り込みローカル環境で動かす場合は、News APIにサインアップしてAPIキーを取得する必要があります。また本アプリではAPIキーを環境変数から読み込むようにしているため、プロジェクトディレクトリ直下に「.env」という名前でファイルを作成し以下のようにxxxxxとなっている箇所に取得したAPIキーを設定してください。
REACT_APP_NEWS_API_KEY=xxxxx
TypeScript版ニュースアプリ
本記事で作成したニュースアプリをTypeScriptで書き直した記事もあります。よかったらそちらもご覧ください。
以前React Hooksを使ってWeb上で動作するニュースアプリの開発について記事にしました。そのニュースアプリをTypeScriptで書き直しましたので今回記事にしました。 [sitecard subtitle=関連記事 url=[…]
モバイル版ニュースアプリ
本記事のWeb版ニュースアプリと機能は一緒なモバイル版のニュースアプリをReact Native with Hooksで作った記事もあります。ご興味あればご覧ください。
先日「React Hooksでニュースアプリを作ってみる」という記事をあげましたが、今回はその記事で作ったコードを流用してReact Native(Expo)を使ってモバイルアプリを作りました(今回もReduxは使わずHooksのみでグロー[…]