React HooksでWebニュースアプリを作ってみる

UdemyにあるReact Nativeでニュースアプリを作るeラーニングコースに触発され、学習目的でReact Hooksを使ったWeb版ニュースアプリを作ってみました。

Udemy

Webの開発経験はあるけどアプリの開発は初めてという方、エンジニアになりたての人にお薦めのReact Native入門講…

グローバルステート管理にReduxは使わずHooksのみで実装しています。

ソースコードはGitHubで公開していますので、よかったらご利用ください。

GitHub

React Hooksで作ったWebニュースアプリ. Contribute to ganeo/react-news-ap…

ニュースアプリの機能

ニュース一覧_機能
「ニュース一覧」ページ

 

 

 

後で読む記事_機能
「後で読む記事」ページ

※ 「後で読む記事」の登録はストレージには保存していないので、ページを閉じると登録は消えます。

利用したパッケージ

赤字は追加して入れる必要があるパッケージ

“@fortawesome/fontawesome-svg-core”: “^1.2.28”,
“@fortawesome/free-solid-svg-icons”: “^5.13.0”,
“@fortawesome/react-fontawesome”: “^0.1.9”,
“@testing-library/jest-dom”: “^4.2.4”,
“@testing-library/react”: “^9.5.0”,
“@testing-library/user-event”: “^7.2.1”,
“axios”: “^0.19.2”,
“node-sass”: “^4.14.1”,
“react”: “^16.13.1”,
“react-dom”: “^16.13.1”,
“react-router-dom”: “^5.2.0”,
“react-scripts”: “3.4.1”

コンポーネント構成

ニュース一覧_コンポーネント
「ニュース一覧」ページ
後で読む記事_コンポーネント
「後で読む記事」ページ

ソースコードのディレクトリ構成

.
├── 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キーを取得したら「pages/home/HomePage.js」ファイルのAPI変数にAPIキーを設定してください。

モバイル版ニュースアプリ

本記事のWeb版ニュースアプリと機能は一緒なモバイル版のニュースアプリをReact Native with Hooksで作った記事もあります。ご興味あればご覧ください。

関連記事

先日「React Hooksでニュースアプリを作ってみる」という記事をあげましたが、今回はその記事で作ったコードを流用してReact Native(Expo)を使ってモバイルアプリを作りました(今回もReduxは使わずHooksのみでグロー[…]

アプリ外観1

 

sponsor