Free Code Camp: Building with React and Redux

About two weeks ago I decided to tackle the React Projects on Free Code Camp. In doing so I met and worked through a few challenges that I want to remember:

First, I had to learn React. The truth is that I had not spent any time on my programming projects since I left my job at the University in January. The good news it that picking up JS again was like riding a bicycle, difficult to forget. Since Free Code Camp has not yet released their React curriculum, I spent some of my Thanksgiving holiday working through the free React course by Tyler McGinnis at reacttraining.com. After completing the course I built my first two React projects:

See the Pen React Markdown Previewer by Nate Gay (@nateinaction) on CodePen.

See the Pen React FCC Leaderboard by Nate Gay (@nateinaction) on CodePen.

The second challenge I encountered was managing state in apps as they grew in complexity. As I began building the third FCC React project (a project to store recipes) I found that managing individual component state and passing props became a little confusing and the code started looking more spaghetti-like. At this point, I decided to investigate the Redux library to help manage application state.

The third challenge was actually learning Redux. To learn Redux I settled on working through the official guide which is very well done but takes on an order that may seem strange to someone new to the library. The Redux guide starts by showing how to build actions, then reducers, then creating the store and finally integrating with React. I felt like the guide skipped over a basic explanation for the order so I will give one here: “Forget about React for a minute and build a working version of your application logic entirely in Redux. As you follow this guide you will first build the actions which tell Redux to modify application state then you will build reducers that actually do the modification and return the new state of the application. You should then be able to create the store and test your application logic through declarative dispatch calls with responses returned by the console. Finally, we will integrate your Redux application logic with React.”

Without this simple explanation, I suffered through a crisis of confidence after my first day reading the docs, building and playing with the example application. I still felt like I didn’t understand why I would build an app in this way and that I did not yet have enough knowledge to integrate it into my half-built Recipes App. After complaining a little to my fiancĂ© I decided to sit down with a clean slate and try to build all of the behavior of my recipes app in Redux. After a little trial and error, it became pretty easy to work in Redux since I was getting constant feedback about my application state from my dispatch statements in the console. By the end of the night, I had my first Redux application.

The next day it took only a few hours to integrate my Redux Recipes app with the React components I had already made. Here is the result:

See the Pen FCC React-Redux-LocalStorage Recipes by Nate Gay (@nateinaction) on CodePen.