News API + React: Creating A Stellar Live News App

Creating a news app with a News API and React

In this guide, we’ll show you how to create a reliable live news app with a News API and React.

But before that, let’s just briefly discuss what’s the purpose of a News API and explore the features of the News API we’ll be using for this tutorial.

Table of Contents

What does a News API do?

A News API is essentially an application programming interface that collects news data from numerous sources, aggregates it, and converts it into a machine-readable format. In other words, a News API enables developers to access and integrate reliable and up-to-date news articles into their apps. This way, developers don’t have to collect data from a variety of sources manually. For example, we’ll create a news app in this article by using a News API to fetch news data and React for the front end.

Which is the Best News API for Creating A Live News App?

When it comes to News APIs, you’ll find various options. However, it’s crucial to choose an API that provides highly accurate and real-time news data to create a reliable news app. One such option is mediastack.

Mediastack is a REST API for live news and blog articles. The powerful News API collects and aggregates news data from thousands of global sources, converts it into a standardized and machine-readable format, and delivers it to developers in a straightforward and lightweight JSON format.

The mediastack API is capable of searching millions of news articles in real time. It accesses current and historical news data across multiple categories. These include business, health, entertainment, sports, and many more. Before we delve into the nitty-gritty of making a live news app with mediastack, let’s explore its features.

If you are looking for basic mediastack API use with Python, then take a look at this article.

For advanced mediastack API use with Python, take a look at this article.

You can also take a look at this article if you are interested in Node.js implementation.

Why should You Use mediastack to Provide Live News Data?

Started in 2017 as an internal sports news aggregation feed, mediastack has grown into one of the most popular one-stop shops for news data.

Here are some reasons why mediastack is the trusted news data API resource of more than 2,000 major companies worldwide:

The mediastack API supports global news sources. It provides access to structured and readable news data from thousands of international news publishers and blogs (over 7500 news sources), updated frequently (around every single minute.)
It supports 50+ countries and 13 languages (Arabic, English, German, French, Italian, Spanish news, and more).
Mediastack is easily scalable. It is powered by Apilayer’s robust cloud infrastructure and is capable of processing thousands of API requests without compromising performance.
The API delivers news results in lightweight and easy-to-use JSON format.
Mediastack offers a completely free plan (no credit card required). The free plan supports 500 monthly API calls, all news sources, and 13 languages.

Mediastack powers global live news feeds, data analytics platforms, and trend analysis applications.

Not only that, but tens of thousands of individuals, universities, and non-profit organizations rely on the API for a reliable source of real-time news data.

Whether you run a non-profit organization, a small business resources website, a community news aggregator website, or simply want to run an RSS feed on your blog, the mediastack API gives you the same sources of news data that all the big players use daily.

API Features Provided by mediastack

mediastack offers the following useful API features:

Live News

With mediastack, you can access the full set of available real-time news articles using a simple API request to the mediastack API’s news endpoint.

Here is an example API request for live news data:

https://api.mediastack.com/v1/news? access_key = YOUR_ACCESS_KEY & keywords = tennis & countries = us, gb, de

And here is an example API response:

Check out mediastack News API documentation to explore the full list of supported HTTP GET request parameters.

Historical News Data

The powerful API also supports historical news data. If you are subscribed to the Standard Plan or higher, you can access historical news data by specifying a historical date using the API’s date parameter in YYYY-MM-DD format:

https://api.mediastack.com/v1/news ? access_key = YOUR_ACCESS_KEY & date = 2020-07-17

Here is an example API response:

Search News Sources

Using mediastack’s ‘sources endpoint’ together with a series of search and filter parameters, you can search all news sources supported by the mediastack API. The API returns all available source metadata, including the ID required to define sources for live or historical news.

Here is an example API request:

https://api.mediastack.com/v1/sources ? access_key = YOUR_ACCESS_KEY & search = abc

Here is an example API response:

Creating a Live News App with Mediastack News API and React

Getting Started with mediastack API

First, get your API Credentials here and set up your subscription plan:

You can monitor your usage via the dashboard.

Checking the API Access Key & Authentication

Next, to check if everything is working properly, simply run this URL in your favorite web browser:

http://api.mediastack.com/v1/news?access_key=YOUR_ACCESS_KEY

You will get this API response inside your browser:

If your API request is successful, the mediastack API returns HTTP status 200 together with a JSON result. The result carries a pagination object as well as a data object containing one or multiple news articles.

Here is the output you will get if you test it with Postman:

Setting Up a React Apps Environment

If this is your first time using React.js, run this command on your command prompt to install create-react-app:

1	npm i create-react-app

Next, create a new project using create-react-app. Switch to your preferred directory and run this command on your terminal. Here, I call the project reactjs-apilayer2:

1	npx create-react-app reactjs-apilayer2

The command above will generate the scaffolds you need to get your React application running as quickly as possible.

Next, run the application using the following command:

npm start

This automatically opens http://localhost:3000 on your browser with the default create-react-app homepage:

Setting Up Bootstrap for the App’s Frontend, Inside the public\index.html File

Add the link to the bootstrap’s CDN inside the index.html [1] file, which can be found in the public folder:

<head>

</head>

How to Modify the src\App.js to Consume mediastack REST News API?

To consume mediastack API, modify the code inside src\App.js [2] file into this:

import React, {Component} from 'react';

import Newss from './components/newss';

class App extends Component {

render() {

return (

)

}

state = {

newss: []

};

componentDidMount() {

fetch("http://api.mediastack.com/v1/news?access_key=YOUR_ACCESS_KEY&languages=en")

.then(res => res.json())

.then((res) => {

this.setState({ newss: res.data })

})

.catch(console.log)

}

export default App;

What the above code does:

Calls the mediastack REST API
Feeds dynamic data from the mediastack API.
Creates a state (an object that holds data pending to be rendered).
Parses and displays the data in a presentable manner (present the data from news.title, news.author, and news.description into our web app).

How do I Create a News Component Inside the src\components\newss.js File?

You will need another .js file or component to show the scraped results as a web app.

Here is what the code inside src\components\newss.js [3] looks like:

import React from 'react'

const Newss = ({ newss }) => {

return (

<div>

<center><h1>Latest News</h1></center>

{newss.map((news) => (

<h5 class="card-title">{news.title}</h5>

<h6 class="card-subtitle mb-2 text-muted">{news.author}</h6>

<p class="card-text">{news.description}</p>

</div>

))}

</div>

)

};

export default Newss

What the above code does:

Renders the results as cards
The “newss” method accepts the “newss” state we created earlier and then returns a mapped version of the scraped news, which loops over the bootstrap card to insert the news’s title, subtitle, and description.

How to Run Our Live News Application?

Finally, run this npm start command inside your command prompt (and inside your working directory):

npm start

This command will open your browser to show your live news apps. You can also visit it directly by accessing http://localhost:3000.

Simple yet awesome, right?

Check out the full source code here!

This article is based on this tutorial.

Ready to Build Your Own Advanced News API Scraper Apps?

As you can see, the mediastack REST API provides rich news data and API features that you can use to connect to any platform or programming language you work with.

Take advantage of the free tier on mediastack, although we recommend you upgrade your subscription plan if you need more powerful features, such as HTTPS Encryption, Historical Data, Commercial Use, and Technical Support. You can also contact us for a custom solution. We can’t wait to see what you build with our REST API!

Head over and sign up for free to start integrating resourceful live news data into your apps today!

Conclusion

A News API enables developers to access and search worldwide news data from thousands of reliable sources programmatically. It basically collects and aggregates news data from a variety of sources, converts it into a machine-readable format, and delivers it in a lightweight JSON format.

We can use a News API to create news apps or news aggregator websites, live news feeds, data analytics platforms, trend analysis applications, RSS feeds on blogs, etc.

In this guide, we’ve created a simple news app using the mediastack News API and React.

We chose mediastack because it’s a reliable news API that collects real-time data from thousands of international news publishers and blogs (7500+ sources). Moreover, the API supports over 50 countries and 13 languages. Mediastack is also highly scalable. It is backed by robust apilayer cloud infrastructure and can process thousands of API requests efficiently. And it delivers news results in easy-to-use JSON format.

Follow our tutorial and create your own live news app with mediastack today!

Frequently Asked Questions (FAQs)

Is there an API for news?

Various News API providers are available that provide access to thousands of news articles and blogs from worldwide news sources. Mediastack is an example of a News API.

Is there a free News API?

The mediastack News API offers a completely free plan (no credit card required). With the free plan, you get 500 monthly API calls and access to all news sources. If you need more powerful features, such as more API calls ( up to 250,000 monthly calls), historical data, HTTPS Encryption, Commercial Use, and Technical Support, you can subscribe to a paid subscription plan.

Does BBC have an API?

BBC offers an Information Syndication API. The API enables authorised users to access specific content from the BBC for syndication onto their websites.

How do I use a News API?

To use a News API, such as mediastack, you first need to sign up, create an account, and obtain your API key. You can then integrate the API into your app or website and start making API requests. You can also follow the steps we’ve provided in this post to create a live news app.

[1] https://github.com/MuhammadAzizulHakim/apilayerBlog-repo/blob/main/Article15%20-%20mediastack%20%2B%20React.js/reactjs-apilayer2/public/index.html

[2] https://github.com/MuhammadAzizulHakim/apilayerBlog-repo/blob/main/Article15%20-%20mediastack%20%2B%20React.js/reactjs-apilayer2/src/App.js

[3] https://github.com/MuhammadAzizulHakim/apilayerBlog-repo/blob/main/Article15%20-%20mediastack%20%2B%20React.js/reactjs-apilayer2/src/components/newss.js

News API + React: Creating A Stellar Live News App

What does a News API do?

Which is the Best News API for Creating A Live News App?