Final Flatiron Project

For my final project for the Flatiron School, I had to create an application utilizing React JS and Redux for the frontend and Rails API for the backend. It is a culmination of all the skills we have learned throughout the course of the program and it feels pretty surreal to be done. The project was pretty flexible outside of a few requirements:

1. 5 stateless components
2. 3 routes (use React to handle routes, not Rails)
3. use Redux middleware to handle state change
4. use fetch() to GET and POST data to an API

This time around I stayed away from trivia and wanted to build something that dove a little deeper into rendering code to the browser. As someone whose chronic illness really shaped the course of my time at Flatiron, I thought I could pay homage to my experience by making an application that tracks food sensitivities and allergies in meals. This would be useful in my own personal life and likely those with similar conditions. What follows is my creative process in building this application.

Another requirement is that you build your React app with a certain command, which is create-react-app my-app-name. When you use this generator to create your app, it builds a couple of files for you (frameworks really are so helpful sometimes). An index.html file and an index.js. I will explain their significance.

Within index.html, there is a <div> element with an id of “root”. The naming is purely convention, but the idea is essential. We need a root element in our index.html page so that we can append the Application component (<App/>) to the DOM and thus connect our React application. This allows us to render our application to the browser. Our index.js file provides an easy entry point for our stateless components.

Through our 5 stateless components (I surpassed this count), we learn the importance of good and organized architecture in programming. According to the React documentation, “Components let you split the UI into independent, reusable pieces, and think about each piece in isolation…they are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.” This allows developers to read a code base and intuitively have a good understanding of the logic just by the way it’s organized. This creates readability and allows for collaboration amongst developers.

Stateless components are also known as functional components, meaning that they are more focused on rendering content to the browser than they are maintaining state, hence “stateless”.

See how it’s really just an arrow function? There is no sign of state maintenance here. In my project, my stateless components were Buttons.js, Footer.js, Nav.js, MainPage.js, and RecipeDescription.js.

There should be 3 routes; must make use of react-router and proper RESTful routing.

Instead of utilizing our backend Rails routes to deal with our different paths, in this project we were asked to use React Router. It is essentially a collection of navigational components that you can declaratively place in your front end to handle them. React Router does not automatically come with the create-react-app generator, so you need to install it yourself in your application using react-router-dom. Then, it whatever file you decide to place your routes, you need to import BrowserRouter and Route from react-router-dom in order to actually create the routes. NOTE: it’s commonplace to rename BrowserRouter as just Router. I decided to place mine in App.js.

I was nervous going into to this unit, but honestly, I felt this was much more enjoyable and interesting than the previous Javascript project (which nearly destroyed me). I think the beauty of React is that it really highlights the importance of good architecture and readability. It was also nice to be able to use Rails solely for the purpose of fetching data from an API and leaving everything else to the frontend. I hope this blog informative to prospective developers out there! :)