How to Build a RSS Reader with React

John Au-Yeung
The Startup
Published in
9 min readOct 4, 2019

--

RSS stands for Real Simple Syndication or Rich Site Summary. Orginally is stood for RDF Site Summary. RDF stands for Resource Description Framework, which is a standard for serializing data. It is a standard for delivering content in XML to any destination you desire by providing a web feed to the content you want. The data is in XML with a standard schema that can consumed by any program.

It is often used by news aggregators to deliver news, and deliver feed for podcasts.

A sample RSS feed may look like:

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title>Title</title>
<description>Description of RSS feed</description>
<link>http://www.medium.com/</link>
<lastBuildDate>Mon, 06 Sep 2019 00:00:00 +0000 </lastBuildDate>
<pubDate>Sun, 06 Aug 2019 15:20:00 +0000</pubDate>
<ttl>1800</ttl>

<item>
<title>Entry Title</title>
<description>Description of entry.</description>
<link>http://www.medium.com/blog/post/1</link>
<guid isPermaLink="false">6ee464e4-a484-4518-87ac-81c616b571e0</guid>
<pubDate>Sun, 06 Sep 2019 15:20:00 +0000</pubDate>
</item>

</channel>
</rss>

As you can see above, the schema is pretty simple. Therefore, it is easy to make an app to subscribe to the feed and display its contents.

In this article, we will make an RSS reader with React. Users can enter a URL and name for a feed which will be saved to local storage. Then once it’s saved, they can click on a link for the feed to view the feed’s…

--

--