I have created a React News App that connects to a third-party API. It includes a search option and allows users to select news based on regions.
This project was bootstrapped with Create React App.
In the project directory, you can run:
- Search News: Search for specific news articles by entering keywords in the search bar.
- Category Selection: Browse news based on predefined categories like Politics, World Affairs, Crime, etc.
- Dynamic Refresh: Refresh news on reload or navigation.
- Responsive UI: Optimized for desktop and mobile devices.
- Loading Spinner: Displays a loading indicator while fetching news articles.
- Frontend Framework: React.js
- Styling: CSS and React inline styles
- News API: Third-party news API for fetching data
- State Management: React hooks (
useState,useEffect)
-src/ ├── components/ │
├── Header.js // Navbar component with logo and links │
├── SearchBar.js // Search functionality │
├── NewsList.js // Renders a list of news articles │
├── Spinner.js // Displays a loading spinner │
├── Footer.js // Footer component |
├── styles/ │
├── App.css // Main CSS file │
├── Header.css // Header styling │
├── NewsList.css // News list styling |
├── App.js // Main app component |
├── index.js // Entry point |
└── api/NewsAPI.js // API integration |
- Node.js: Make sure you have Node.js installed on your machine.
- API Key: Obtain an API key from a third-party news provider (e.g., NewsAPI).
- Clone the Repository
git clone https://github.com/your-username/react-news-app.git cd react-news-app
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Replace ./path/to/screenshot.png with the actual path to your screenshot file in the project.
Let me know if you need further assistance! 🚀