News App using React (original) (raw)

Last Updated : 24 Jul, 2025

News App using React JS uses React's basic principles to fetch the latest news from a News API and show them to users based on their interests. It's a simple project to create an interactive and personalized news-viewing experience.

**Preview of final output: Let us have a look at how the final output will look like.

Screenshot-2023-12-02-235708

Preview Image

Prerequisites:

Approach:

Steps to Create the News App:

**Step 1: Set up React Project using the Command:

npm create vite@latest --template react

**Step 2: Navigate to the Project folder using:

cd

**Step 3: Install dependencies:

npm install

**Project Structure:

Screenshot-2023-12-03-001608

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"vite": "^4.0.0",
"axios": "^0.27.2"
}

**Example: Create folders "Components" and paste the given code in respective files

JavaScript `

// App.js import React from "react"; import NavBar2 from "./Components/NavBar2"; import NavBar1 from "./Components/NavBar1"; import News from "./Components/News"; import { BrowserRouter, Route, Routes } from "react-router-dom";

function App() { return ( <> 

                <div className="container">
                    <div className="row">
                        <div className="col-md">
                            <Routes>
                                <Route
                                    path="/"
                                    element={
                                        <News key="general"
                                        category="general" />}
                                />
                                <Route
                                    path="/Entertainment"
                                    element={
                                        <News key="entertainment"
                                        category="entertainment" />
                                    }
                                />
                                <Route
                                    path="/Technology"
                                    element={
                                        <News key="technology"
                                        category="technology" />}
                                />
                                <Route
                                    path="/Sports"
                                    element={
                                        <News key="sports"
                                        category="sports" />}
                                />
                                <Route
                                    path="/Business"
                                    element={
                                        <News key="business"
                                        category="business" />}
                                />
                                <Route
                                    path="/Health"
                                    element={
                                        <News key="health"
                                        category="health" />}
                                />
                                <Route
                                    path="/Science"
                                    element={
                                        <News key="science"
                                        category="science" />}
                                />
                            </Routes>
                        </div>
                    </div>
                </div>
            </BrowserRouter>
        </div>
    </>
);

}

export default App;

JavaScript

// Components/NavBar1.js import React from "react";

function NavBar1() { return (

); }

export default NavBar1;

` JavaScript ``

// Components/NavBar2.js

import React from "react"; import { Link } from "react-router-dom";

function NavBar2() { return (

); }

export default NavBar2;

JavaScript

// Components/News.js

import { React, useState, useEffect } from "react"; import NewsItem from "./NewsItem"; import Image from "../Images/News1.jpg"; import InfiniteScroll from "react-infinite-scroll-component";

function News(props) { let category = props.category; let [articles, setArticles] = useState([]); let [totalResults, setTotalResults] = useState(0); let [page, setPage] = useState(1);

let resultNews = async () => {
    const url =

`https://newsapi.org/v2/top-headlines?country=in&category=$%7Bcategory%7D&page=$%7Bpage%7D&apiKey=ecfaf9eaaa8d40a5b5d769210f5ee616%60; let data = await fetch(url); let parsedData = await data.json(); setArticles(parsedData.articles); setTotalResults(parsedData.totalResults); };

useEffect(() => {
    resultNews();
}, []);

let fetchData = async () => {
    const url =

https://newsapi.org/v2/top-headlines?country=in&category=$%7Bcategory%7D&page=$%7Bpage + 1 }&apiKey=ecfaf9eaaa8d40a5b5d769210f5ee616; setPage(page + 1); let data = await fetch(url); let parsedData = await data.json(); setArticles(articles.concat(parsedData.articles)); };

return (
    <InfiniteScroll
        //This is important field to render the next data
        dataLength={articles.length}
        next={fetchData}
        hasMore={
            articles.length < totalResults
        }
        loader={
            <h4 className="text-center">
                Loading...
            </h4>}
        endMessage={
            <p style={{ textAlign: "center" }}>
                <b>Yay! You have seen it all</b>
            </p>
        }
    >
        <div className="container my-3">
            <div className="row">
                {articles.map((element) => {
                    return (
                        <div className="col-md-4" key={element.url}>
                            <NewsItem
                                sourceName={element.source.name}
                                title={element.title}
                                desc={element.description}
                                imageURL=
                                {element.urlToImage ?
                                    element.urlToImage :
                                    Image}
                                newsUrl={element.url}
                            />
                        </div>
                    );
                })}
            </div>
        </div>
    </InfiniteScroll>
);

}

export default News;

`` JavaScript `

// Components/NewsItem.js

import React from "react";

function NewsItem(props) { let { desc, title, imageURL, newsUrl, sourceName } = props; return (

...
{title}

- {sourceName}

{desc}

Read More...
); }

export default NewsItem;

`

**Steps to Run the Application:

**Step 1: Type the following Command in terminal:

npm run dev

**Output