My First React App

After surviving the fourth phase of the Flatiron Software Engineering Bootcamp, it was time to tackle the final phase of the program — React and Redux. Having previously learned all the necessary JavaScript material, React didn’t feel too obscure. Compared to pure JavaScript, React was easier to wrap my head around. Combining React with Redux and Thunk made for a smooth, seamless, and enjoyable experience.

Nevertheless, I encountered a few challenges. As usual, it took quite some time to develop an app idea. I gained inspiration from some of the social media apps I regularly use such as Reddit and Facebook and decided to develop a simple status-posting app where users can upvote or downvote other user’s status. Looking through the project requirements, I felt like I could get it all together by incorporating everything I learned from the React lectures. Here were the project requirements:

1. A single HTML page for rendering
2. Contain 5 stateless components
3. 3 Routes
4. Use React Router
5. Use Redux middleware to respond and modify state change
6. Use async actions and redux-thunk middleware to send and receive data from a server
7. Backend using Rails API to handle data persistence

Backend

Setting up the backend was a lot easier this time around. I had enough experience with my past projects to be able to get this out the way as earliest as possible because I knew I was going to be spending a lot of time working on the front end. I had my controllers, models, serializers and migrations planned out so that implementing them was quick and efficient.

Backend File Structure

Front end

I thought I had a good grasp of React but it almost felt like it wasn’t enough to create something from scratch. Nevertheless, I didn’t waste time beating myself up. I decided to start with User Authentication. There are many ways to go about authentication, but I decided to go with the Internet standard and use JSON Web Tokens (JWT). This way, I could store a user’s token using localstorage and use that to persist a User, log them in, and send authenticated requests to the API.

Snippet for User Log-In Using JWT

Next up was building the forms and actions for a user to be able to use Create, Read, Update and Delete (CRUD) actions on the user’s post. The hardest part about these actions was making the data available to my app’s state while simultaneously updating the data on the server. These two actions go hand in hand, but it took me quite some time to correctly update my app’s state based on user changes. Slowly it all started coming together by using Thunk actions and Redux reducers. Thunk handled all the fetch requests using async functions and resolved them, while the Redux reducers updated the state accordingly. This meant calling dispatch actions on very specific places so that all the correct data can get updated. The reason it took me so long to get all the actions and requests connected is because there is so much logic to incorporate within each user action. If the logic doesn’t get updated correctly, all the props passed down from component to component would stop working, and hang the app completely with many cryptic messages like “Objects are not valid as a react child.” What I ended up finding out after some deep debugging was that some data was not being processed properly and my props were empty JS Objects instead of populated objects with actual key and value pairs.

Snippet for User Reducer

A very helpful source was the clear and extensive React documentation. It helped me resolve many problems that I came across while building my app, making the development even more efficient since I didn’t have to waste much time deciphering the documentation myself or looking elsewhere for assistance.

Overall, learning about React and Redux was a very enjoyable experience. This project allowed me to implement and grasp these concepts in greater detail. Now, I can actually see myself building new applications on my own time.

Stay tuned!