Live News using react.js
INTRODUCTION:
ØAS We All Know That React Is A Popular Javascript Library That Is Often Used To Build User Interfaces For Web Applications. With React, You Can Create Interactive And Dynamic User Interfaces That Can Update In Real-time As Data Changes. This Makes It An Ideal Tool For Creating Live News Applications.To Build A Live News Application Using React, You Can Use A Variety Of Tools And Libraries, Such As React Router, Axios, And Moment.Js
Ø• An Application Which Helps You In Being Updated With The Latest Trending News, Which Will Not Let A User Feelboredom And Will Always Keep Them Updated With The Latest Articles From Different Well-known Newspaers Liketimes Of India, Hindustan Times, Etc.
Ø• Skills Used:- Reactjs, Html5, Css, And Javascript.
§Apart from this I have also created different components for this app including Title "Top Headline from General":
§Navbar.js
§News.js
§NewsItems.js
§Spinner.js
ØThese are the Header parts of this react-app component in which nested news are visualize when you click an action and user will also able to next from footer part for the latest news.Apart from this when you click on Daily-Dose then it will takes you back to the home page of this live news.....!
v"Top Headlines from General“
v"Top Headlines from Business“
v"Top Headlines from Entertainment“
v"Top Headlines from Health“
v"Top Headlines from Science“
v"Top Headlines from Sports“
v"Top Headlines from Technology"
ØNavbar Component:This component defines a navigation bar for the application, which consists of a brand name, a toggle button for collapsing the menu on smaller screens, and links to various pages. The Link component from react-router-dom is used to create clickable links to different pages of the application.
ØNews Component:This component displays news articles on the page. It includes default props for the country, page size, and category of news articles to fetch. The propTypes property is also defined to ensure that the props passed to this component are of the correct type.The articles array is a placeholder for the actual news articles that will be fetched from an API. In the final version of the code, this array will be replaced with an API call to retrieve news articles.The state of the component includes properties to keep track of the news articles fetched from the API, the current page number, and whether or not all the available news articles have been fetched.The componentDidMount method is called when the component is first mounted on the page. It fetches news articles using the getNews method, which makes a request to the API and updates the state with the news articles fetched.The fetchMoreData method is called when the user scrolls to the bottom of the page and more news articles need to be fetched. This method increases the page number and fetches more news articles using the getNews method.The render method displays the news articles on the page using the NewsItem component. It also includes an InfiniteScroll component from the react-infinite-scroll-component library, which allows for fetching more news articles when the user scrolls to the bottom of the page.
ØNewsItem Component:This component displays a single news article on the page. It receives the article object as a prop and displays its properties (such as the title, author, and image) using HTML elements.
ØSpinner Component:This component displays a loading spinner on the page while the news articles are being fetched. It uses CSS to create a spinner animation.
ØPropTypes:The PropTypes library is used to specify the types of the props passed to the News component. This helps to ensure that the correct types of data are being passed to the component, which can prevent errors and improve code quality.
