Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Build a React.js News App

オープン
#16 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
30/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
javascript, react, tailwindcss
領域
api, frontend, web-dev

調査の方向性

この issue では既存のファイル、テスト、エントリーポイントが指定されていないため、まずリポジトリを調査し、React アプリケーションがすでに存在するか、またどのように起動するかを確認してください。受け入れ基準に記載されているとおり、レスポンシブなスタイリング、読み込み状態とエラー状態、ページネーションまたは lazy loading を伴って NewsAPI のデータが表示されれば、作業は完了です。

索引モデルが issue の本文から書いたものです。

説明

Medium React

📌 Description

Build a React.js News App that fetches real-time news from NewsAPI and offers a responsive UI.


Image

📋 Tasks

🚀 Project Setup
  • Initialize a React.js project using Vite or Create React App.
  • Install dependencies (React Router, Tailwind CSS, Axios, etc.).
📰 Fetch & Display News
  • Fetch and display news headlines, images, and descriptions.
  • Implement pagination/lazy loading for better performance.
🎨 Responsive UI
  • Ensure mobile-friendly design with Tailwind CSS.
  • (Optional) Dark/Light mode toggle.
⚡ Error Handling & UX
  • Show loading indicators while fetching news.
  • Display error messages for failed requests.

✅ Acceptance Criteria

  • News is fetched dynamically.
  • UI is responsive on all devices.
  • Proper error handling is in place.
  • Code is clean & well-documented.
主要言語
HTML
スター
10
フォーク
77
PR マージ指標
30日以内にマージされた PR はありません

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

CommunityOfCoders/WebGenesis のほかの issue

CommunityOfCoders/WebGenesis の issue をすべて見る

似ている issue

Backend & API Design の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。