My First React App

I have been playing around with React for a few months and wanted to create a simple application to put my skills and knowledge to use. I just published the reddit-react-app on surge and was very happy with the results. I am a fan of Reddit and thought I could use React to build a simple application to show the stories from my saved sub-reddits. The application uses Reddit’s API to get the list of sub-reddits a user has subscribed to and display the latest stories for each sub-reddit when the user selects one from the drop down list provided. In addition, I added a button at the bottom of the list of stories that allows the user to load up the next set of stories! Below you will find a summary of the architecture and decisions I made while building the application.

General Structure

The application is composed of just a few class/functional components. The state of the application is kept in one class-based component called AppContent. Once the user has logged in to the application, I show the sub-reddits that he/she has subscribed to in a drop down list. Once the user selects a sub-reddit, the stories from it are then shown. To help with navigation at the bottom of the page a button is available that will show the user the next 100 stories. I am using the Reddit API to make calls to the appropriate end point to show the stories. Each story also has a link that can show the user the list of comments for each story. The comments show up in a modal built using the great semantic-ui for react library.

I was originally thinking that the react components used during Reddit’s OAuth workflow should be class based components. There was a bit of hesitation on my part to do this as I had read a lot of articles and tutorials that said that you should limit your class based components in react (or at least use them sparingly). This put me in what I called analysis paralysis because I was trying to decide whether or not I should use functional based components instead of classed based components. I did way too much reading on this subject and it was driving me nuts! Security is an important part of any application that I build and I wanted to make sure I used the correct react feature to store Reddit’s OAuth access token securely. I always strive to make applications by using what I call the ‘optional solution’ so that any future issues can be avoided as much as possible. After wrestling with what was the best type of component to use, I decided to just bite the bullet and use class-based components. Although class-based components should be used as little as possible in react, don’t worry about using them if it’s the best way to solve a problem in the most efficient way possible! It’s also something I can easily change later on in the development of the application! Once I decided on using class based components, the development of this application continued at a very good pace!

HTTP Requests

The application uses Axios for all http requests sent to Reddit’s API! Axios is a library that I used in another react project I was working on so it was the natural choice to use it for this project as well. I wanted to use something that I knew would help me to build out the features I needed for this application quickly and Axios is the library that does the job I need! From my previous experience using this library, I was able to setup common headers (such as the Authorization header) and URL’s to submit requests to Reddit’s OAuth endpoint. There are other things that I’ll also need to build in Axios that deal with renewing expired access tokens but for now Axios is doing a great job with what I need to take care of with this small application.

User Interface

For the User Interface I wanted to build something that had a simple, clutter free and easy to navigate feeling to it! Whenever I create a web application I tend to gravitate to use Bootstrap as it’s something I am very familiar with having used it for other personal/work projects. But for this project I decided to use Semantic UI (for reactjs) as I found the look and feel of it to meet the needs of this project. I also choose this UI framework to get some experience under my belt with different UI libraries other than Bootstrap! I have to say that the team behind this library has some really great documentation that allowed me to install and configure it very quickly for this application! I have also gotten exposed to some react concepts/patterns that will no doubt become useful later on! I’ll definetely use this library for other projects as well!

Deployment

The application is currently deployed to surge.sh as this was the easiest and fastest way to get the application to be hosted on the internet. I found out about surge.sh when going thru the Gatsby Tutorial page. I also looked at Netifly but found that surge.sh did the job I needed quite well for now! I also considered using Github Pages but I really wanted to use and learn something else just to experience the different ways that applications can be deployed on the web. So far, I am very happy with surge.sh and I’ll continue to use it for other react (and non-react) projects! With my recent move to Google Domains I will look into creating a sub-domain for this app and point it the URL that is currentlying hosting it.

Next Steps

Since I am having a lot of fun working on this small application, I’ll continue to add new features and fix bugs as they come along. The end result is not to build a reddit replacement but more of me getting experience of actually building something with react on a platform that I use on a daily basis! That being said, below you find a list of things that I will need to update/revisit:

• Change the OAuth workflow so that a refresh token is retrieved and used to renew the access token.
• Store user’s subscribed sub-reddits to the storage mechanism used (currently this is the session storage). When I refresh the application, a unnecessary trip to reddit’s OAuth endpoint is done to get this data which is not very efficient if this list doesn’t really change that often.
• Creating a sub-domain (ie. https://reddit.edpanameno.com ??) to point to the app that is hosted on surge.sh.