Create an RSS Reader with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create an RSS reader with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app rss-reader

with NPM to create our React project.

Create the RSS Reader

To create the RSS reader, we write:

import React, { useState } from "react";

export default function App() {
  const [rssUrl, setRssUrl] = useState("");
  const [items, setItems] = useState([]);

  const getRss = async (e) => {
    e.preventDefault();
    const urlRegex = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/;
    if (!urlRegex.test(rssUrl)) {
      return;
    }
    const res = await fetch(`https://api.allorigins.win/get?url=${rssUrl}`);
    const { contents } = await res.json();
    const feed = new window.DOMParser().parseFromString(contents, "text/xml");
    const items = feed.querySelectorAll("item");
    const feedItems = [...items].map((el) => ({
      link: el.querySelector("link").innerHTML,
      title: el.querySelector("title").innerHTML,
      author: el.querySelector("author").innerHTML
    }));
    setItems(feedItems);
  };

  return (
    <div className="App">
      <form onSubmit={getRss}>
        <div>
          <label> rss url</label>
          <br />
          <input onChange={(e) => setRssUrl(e.target.value)} value={rssUrl} />
        </div>
        <input type="submit" />
      </form>
      {items.map((item) => {
        return (
          <div>
            <h1>{item.title}</h1>
            <p>{item.author}</p>
            <a href={item.link}>{item.link}</a>
          </div>
        );
      })}
    </div>
  );
}

We have the rssUrl state that stores the RSS feed URL we enter.

And the items state store the feed items which we’ll get.

Then we define the getRSS function to get the RSS feed items when we click submit.

Next, we call e.preventDefault() to let us do client side submission.

Then we check if the rssUrl value is a valid URL string.

If it is, then we make a GET request with fetch to the RSS feed via a CORS proxy.

We use the allOrigins API to let us make cross-domain requests to the given feed.

We need this since cross-domain communication from the browser isn’t allows with most feeds.

We get the contents property from the object.

Then we parse the XML string with the DOMParser instance’s parseFromString method.

The first argument is the XML string.

And the 2nd argument is the content-type string.

feed is the XML DOM object with the whole XML tree.

Then we use querySelectorAll to get all the item nodes.

And then we use the spread operator to spread the items Node list to an array.

Then we can call map on it to select nodes inside the item nodes with querySelector and return an object with the innerHTML values.

We call setItems to set the items state.

Below that, we have the form with the onSubmit prop set to getRSS to let us run the function when we click on the input with type submit .

Inside the form, we have an input with the onChange prop set to a function that calls setRssUrl to set the inputted value as the value of the rssUrl state.

e.target.value has the inputted value.

value is set to rssUrl so that we can see the inputted value.

Below the form, we render the items into divs with the map method.

Conclusion

We can create an RSS reader easily with React and JavaScript.