Creating a News Feed App with React and Redux

In this tutorial, we are going to create a simple application which fetches data from various RSS feeds of the user’s choice and displays the results in a web based interface. By following along, you will gain familiarity with both some simple and advanced concepts such as React, Redux, handling network requests with React, async actions, etc. We are learning by building a fully functioning and deployed application, instead of spending too much time on theory. If you really want to dig into theory and understand the underlying technologies my fully, I recommend reading through the React and Redux docs. For the full video series of this tutorial, click here: https://www.turbo360.co/tutorial/news-feed-app.

Part One — Setting up the Project

First up, make sure you have Node and NPM installed.

In your terminal, type the following to make sure you have a recent version of Node installed:

$ node -v

As long as you have 6+ installed that should work. If not, go to https://nodejs.org/en/ and download the current LTS version (at the time of this writing that is 6.11.12).

Once that is installed, rerun the node –v command to make sure it installed properly (if so you will get a response in the termnal with your node version, i.e. “v6.10.3” or “v6.11.12” etc.

Aditionally, we want to install gulp, webpack, and turbo-cli globally:

$ sudo npm i –g gulp
$ sudo npm i –g turbo-cli
$ sudo npm i –g webpack

After these are installed, run the following command to make sure Turbo has installed successfully:

$ turbo version

~0.7.87 is version at the time of this writing, if you followed these steps properly yours will be the same or newer. If older, rerun “npm i –g turbo-cli” and then check again.

In order to get up and running as quickly as possible, we are going to use the “turbo new” command to scaffold a new application. This creates a new React application on our local machine with some preset Webpack and Gulp configurations as well as additional libraries that will allow us to deploy to the Turbo platform later on.

$ turbo new newsfeed –-react

When complete, we want to enter the directory and run “npm install”.

$ cd newsfeed
$ npm install

To make sure everything is running properly, run the “turbo devserver” command:

$ turbo devserver

and then navigate to localhost:3000 in your browser, you should see something like below:

If not, try rerunning the setup steps and check your terminal for any error messages as you go.

Next, we want to install a theme.

Run the “turbo themes” command to see a list of themes currently available.

$ turbo themes

Quick shout out to AJ over at https://html5up.net/ who most of these themes are based off. For this tutorial, we are using the editorial theme, so run the following:

$ turbo theme editorial

At this point it would be good to open up a terminal tab and run webpack with the -w flag, which we can leave running in the background:

$ webpack -w

Re-run “turbo devserver” command if it is no longer running (I typically just leave this running in a terminal tab), and then reload your browser and you should see the new theme like below:

All the contents of the actual React application live in the src directory.

If we go to src/index.js, you will see the root of our React application.

Currently, if you look at line 3, we import one other React component, called Elements, and render it on Line 13, which is the component you see when you go localhost:3000 in your browser.

This is just an example component which shows us some components that come with our theme, so we are going to remove this and add our own content.

First, we will create a pages directory with an index file and a home page (I am running these from the project root directory, i.e. ~/Desktop/newsfeed/ ):

$ cd src
$ mkdir pages
$ cd pages
$ touch index.js
$ touch Home.js

First, make sure to import your Home component to your index.js:

For our Home component, we will copy some of the scaffolding from the previous Element component, and strip out what is not needed to give us a good base in terms of styling to build our application, i.e. the sidebar and then main area for content, leaving us with the following:

(If you want a step-by-step and more insight on how to iterate through this process of working with themes, I advise watching the video for this section and start at around 14 minutes.)

In order to actually see these changes take effect, we need to go back to the index.js file under the ‘src’ directory, and render the Home Component instead of the previous Elements Component.

Additionally, you will notice some new imports on lines 4 and 5. These are for Redux, and you will notice on lines 10–12 that instead of just an empty div, we are now wrapping our main Application Component (which right now is the Home component) in a Provider Component.

Again, we are not going to get too bogged down in theory, but just know that the Provider wraps your main component and basically allows our application to access and alter data in a centralized store via Redux later on.

Although we have our base layout setup, we want to make one more change to the Sidebar component. We do not want to rely on the theme’s sidebar, because we want to make some additional changes to the sidebar and do not want to alter the theme folder directly. Again, from your project root run the following:

$ cd components
$ mkdir presentation
$ cd presentation
$ touch index.js
$ touch Sidebar.js

Our index should look as follows:

Now, we need to go to our theme/Sidebar component, and copy and paste all the contents into our new presentation/Sidebar.js component as follows:

Before we can even see any of our changes take effect, we need to fix our import on our Home.js file (line 2 below) which imports our new component instead of the previous one included with our theme:

Now, coming back to our Sidebar.js, don’t worry about fixing the imports at the top in lines 2 -5 because we want to remove all references to other components and render just regular HTML. For example, in lines 12 and 13 we reference the Search and Nav components respectively.

Instead of importing those components from the theme and then rendering the component, let’s follow the same exact process we just did for Sidebar, and just paste the actual contents from the theme component into our Sidebar component.

For example, <Search /> on line 12 in the previous Gist gets replaced as follows:

Lines 12–16 replaced the previous Search Component, and we copy and pasted these straight from the original theme component. Basically, we are trying to remove all extra dependencies and complexities that are not needed.

We will strip out the rest of what we do not need, and are finally left with the following:

Next, we need to register our app with the Turbo platform, which will allow us to quickly deploy our app (free), and in turn allow us to make live network requests.

Part Two — Adding Feeds

In your browser, navigate to https://www.turbo360.co/ and log in, or if you are a new user scroll to the bottom and register for a new account (it is free for a First Gear account and only takes a second to sign up).

After, you are registered/logged in, you should be taken to your dashboard, where there you will see an option on the left hand nav bar to create a new app.

In the next screen, we will name our app “newsfeed” and give a brief description, and then press the create button.

After creation, you will be forwarded to the application’s individual dashboard, as seen below:

In the top right corner, you will see a white box with your App ID (For example, mine is 599471448bb9e00011dfc406.

Take this ID and copy it to your clipboard (just the actual ID, i.e. “599471448bb9e00011dfc406”), as we are going to need to add this to our local application to link it to our Turbo account for deployment.

In our terminal in the project root directory, enter the following command:

$ turbo app YOUR_APP_ID_HERE

For me, I ran the following from the root directory:

$ turbo app 599471448bb9e00011dfc406

Make sure you are in the project root directory, or you will get an error.

Afterwards, let’s deploy to see if everything is linked up properly:

$ turbo deploy

If successful, you will get a live staging URL in your terminal response. For me, my staging URL is https://newsfeed-pe7hqs.turbo360-dev.com (you can also find this in your Turbo dashboard listed as the staging url).

Check out your URL in the Browser and you should see your site live!

Next, we want to find some RSS feeds that we want to consume for our app.

If you go to the following URL, you will see a list of all RSS feeds from NY Daily News:

http://www.nydailynews.com/services/feeds

You can find different feeds easy enough by googling “RSS + NY Daily News” or “RSS + BBC” etc.

In the video, there is an additional way you can find some feeds as well by viewing the web page source code as well, but overall the RSS feeds are common and should be easy to find.

I am a huge NY Giants fan, so I am going to grab the following feed from the NY Daily News feeds link above:

http://www.nydailynews.com/cmlink/NYDN.Sports.Football.Giants.rss

We already have an input in our Sidebar, but let’s create another one and add a button, so that we can take in a name for our feed as well as the URL, and then a submit button to create the actual feed, as seen in lines 37–39 of the Gist below.

We need to be able to store the state of these inputs somewhere, so we will give our class a constructor with an empty feed object, as seen on lines 5–13. In order, to update what is currently just an object storing some empty strings, we need to give our input fields a function that they can call when their value changes.

On lines 37 and 38, we have done just that and bound a function to the onChange event handler called updateFeed. The updateFeed function is defined on lines 15–23. On line 15 you can see the function takes in a ‘field’ and an ‘event parameter. Jumping back to where the actual functions are bound on 37 and 38, you can see we pass a single string (ignore the ‘this’ arg passed in for now, it does not count as an argument for our purposes), ‘name’, and ‘feed’ in the examples. We additionally have access to the event object which is created when the event is triggered, and this is always the last argument, hence why our function definition is updateFeed(field, event).

In lines 17–22, we create a new feed object in local memory, which is a copy of the current feed object, we change the feed field with the inputs value (event.target.value), and then we update our state to reference the new field object.

This is a common pattern in React, and how local state is updated 99% of the time.

We have also added a button on line 39, with a click handler called addFeed which is defined on lines 25–27.

Currently, it will just console.log our current feed object. Try updating your inputs and calling the console.log to make sure you have set everything up correctly.

Now that we can update and access some information about our feeds locally, we want to be able to do something with our data when we hit our submit button.

For this app, we are going to persist our data on the Turbo back end.

We need to import the Turbo client at the top of our component (line 2), and then instantiate a new Turbo object in our component that links up our application with our individual turbo account (line 29).

Please make sure you use the ID for your application, which can be found at the top right of your turbo360.co/dashboard or in your package.json. Therefore, your line 29 will be slightly different, as ‘599471448bb9e00011dfc406’ is my application ID.

In line 30 we use the Turbo library method to create a new feed object, and we pass in our local feed (this.state.feed). This function returns a promise, so we will log the results (line 32) and if there is an error alert an error.

Here is a snapshot of my console below, and is what yours should look like if everything is working properly:

Additionally, if you go to your dashboard at https://www.turbo360.co/dashboard, you can make sure your data is stored.

If you click the Entities ink in the Left Nav Bar, you should see a Feed option to choose from (if there was an issue, you may not even have a Feed option to choose from).

Now that we can persist our data and we receive a response from the server, we want to be able to save that data in our local application without having to refresh the page / write a request to retrieve the data etc.

We have the response from the server as seen in our console.log, so why don’t we save it somewhere. Eventually, we will use Redux for this, but for now let’s also store this in our local state.

We are going to add an empty array in our constructor to store our feeds (line 9), as well as change our addFeed function to add the feed response to our local state instead of just logging it in our console (lines 33–37). You will notice the logic for adding the feed to our array is very similar to when we updated our local state for the individual feed changes. We make a copy of the current object, make our changes to the copy, and then set our state to reference the new object.

Finally, we are now saving an array with our feeds in our local state, but we aren’t rendering any real data. Where we previously had our unordered list tag with some static items, you will now see, a JSX expression on lines 61–67. We are iterating through the array this.state.feeds (which starts our empty), and for each feed we are rendering a list item with the feed.name property. Also, take notice of the unique key prop given to the item (this is a React requirement/recommendation).

If you have this set up and working properly, you can start adding some feeds and you will see them instantaneously update in your nav bar!

Next up in parts 3 & 4 of our series, we are going to work on moving our application data and our network requests over to Redux. For the full video series of this tutorial, click here: https://www.turbo360.co/tutorial/news-feed-app.