My First React Project
Molly
Posted on May 14, 2019
The final project for Flatiron’s Online Web Development Bootcamp is a React Redux project with a Rails backend. This project cumulates all of what we have learned in the course – Ruby, JS, HTML, CSS, AJAX, React, Rails, and Redux. React and Redux was tough for me to grasp. In addition to Flatiron’s curriculum I used Stephen Grider’s course on React and Redux: https://www.udemy.com/react-redux/. Stephen uses diagrams and analogies to help explain concepts, I highly recommend this course as he walks through building several projects from scratch.
The app that I built is called Daily Code Log in which you can document your daily coding progress. As a self proclaimed code newbie, I realize how important it is to document learnings, especially being aware of what you don’t know. Over time, as you seek out answers to your own questions, you will look back on answered questions and realize how much knowledge you’ve accumulated.
Now that I am on the other side, here are a few quick tips and pointers if you are thinking about tackling a similar project.
Map Out Requirements and a Schedule
The task at hand seemed daunting, so I decided to break the project into smaller parts. Here was my 9 day plan:
Saturday: Map project out- define relationships amongst objects and be able to answer the question “What is the point of my app?”
Sunday: Create seed data, setup Rails backend of project.
Monday: Create entire (mockup) UI of project.
Tuesday: Hookup fetch get requests to fetch internal API data.
Wednesday: Hookup fetch post requests so API endpoint could be updated.
Thursday: Set up React routes.
Friday: Final touches/ squash bugs.
Saturday: Record video walkthrough of app and write blog post on learnings.
Sunday: …Submit project!!!!
Setting a goal for myself each day was very helpful because each morning I knew exactly what I wanted to get accomplished. If I met my goal earlier in the day, I would move on to my next goal.
Use Semantic UI
I used Semantic UI for the web design of my app. Instead of a template, Semantic UI has many different elements- think buttons, cards, icons- that you can use in your app. Semantic gives you the different building blocks, but ultimately the final product can look original and custom made. In order to reference Semantic UI within your application you simply have to import the following link into the client/public/index.html within the <head> tag:
<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css>">
I then used some CSS to reposition and style the elements further.
Here are some screenshots of the simple design of the app:
Form to create a Code Log
Display of all Code Logs
More Than One Way to do the Same Thing…
The trickiest part of the project for me was submitting forms to update my internal API endpoint. Doing a quick google search, most people suggested I use Redux Form, https://redux-form.com/, but my instructor helped me post data to my API without Redux Form. Instead, we used vanilla javascript. In the form’s handleOnSubmit function, we called on an action call addLog which made a post request to the API endpoint:
The reducer, “ADD_LOG”, then adds the form’s data to the Redux store.
I'm looking forward to diving into Redux Form but it was worthwhile to learn the vanillas JS way. Now, when I learn Redux Form, I'll have a solid idea of what Redux Form is doing behind the scenes.
I did it!
I am very proud of the way the project turned out. I have used the app daily to track my coding progress, and once I add authentication, I hope others use the app for their learning benefit as well.
P.S. Here's a link to the walkthrough of the app! https://www.youtube.com/watch?time_continue=1&v=8IQJEPKMCK8
Posted on May 14, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.