My Ambitious Project Idea to Learn React

Plus whatever else I have to to get this app finished.

So right away let me introduce this project. A vegan recipe app for my mom to store her new recipes that she is creating, and to view those recipes when needed. This idea came to me while I was meditating. The thought was simple, I could build this with React.js, which I have just started learning. Next the application has meaning and purpose to myself and the ‘client’ (my mom). Third it ties together a subject I am very passionate about, veganism. This blog post however is about the project itself. It will deal with learning React.js primarily, along with Mocha and Chai for testing, Webpack and Babelto bundle the project together, Firebase to handle the recipe data, atomic web design while not using bootstrap (file size is way to large; heard from local meetups), and really any other library or tool I need in order to complete this app.

I am planning for this to be a series of irregular blog posts about my progress on this app. I will include my struggles and how I hopefully overcome them! What I am learning or what exciting new feature I got working. I will have screen shots of the code and the site pages as they come along. I must say before we get going I am very excited I came up with this project idea. It has been something I was lacking in my self taught journey. Going through tutorial is great and I will be going through a bunch on Egghead.io throughout this process. However this project should scale very nicely with my learning curve into React. I have thought of validations with regex to check for words like chicken, ham, etc. I could have an admin login part. But first let me show you what I have so far.


The basic pages of the site

As you can see there is a Home page that says ‘Show recipe list’ it will also have a link later that will allow the user to add a new recipe. Next is the list of recipes themselves. Once one of these is clicked the app takes you to the details of the recipe which has the name, created date, ingredients, and instruction. Quick note, I showed this to my mom and first question was where are the pictures? I could not believe I forgot all about that! So a picture will be added later on.

So at this point I want to have my build environment setup, with Webpack bundling everything together. While getting to this stage I was modeling a React.js, Webpack Basic Setup to have as a repo to clone for myself. I see a them quite a bit throughout my Google searches, however React, Babel and JavaScript are all moving very fast. This leads to out of date instructions which are more confusing then no instructions I find most of the time. That is why I took the 10 minutes to just copy this setup to a repo of my own! It can be viewed here. Current as of Nov 28, 2015 and I will be using shrinkwrap to lick in the dependencies.

npm shrinkwrap

On that thought here is the link to the Recipe app itself


Development Environment

I am implementing an if statement in the server.js file to check process.env.NODE_ENV !== ‘production’ so that a Webpack dev server is used for development and use express while in production. This was something I saw a lot while learning Webpack with regards to React.js. I did learn gulp just before this but with the easy setup Webpack has I made the switch so I could focus on actual code again! Here is the Webpack.config.js file.


Code Pictures and Explanation

I have worked through the React.js offical tutorial as well as Build Your first React App which has giving me enough confidence and ambition to take on this project.

Component

With the RecipeDetails Component I am going to use Firebase to bind an endpoint to the state so that I can display the data below in the render method. I did run into some problems with no data being displayed since I do not think Firebase was able to return before render was called. This is something that is not longer an issue but the solution was to wrap the list of ingredients output in an if statement. Something I feel is a very poor answer and will require further investigation on my part. That is unless a reader knows the answer; in that case feel free to leave a comment.

The code for the recipe details component.

Maybe the gifs are too much for displaying the code and should be left just for the website itself. I may change this in the coming post, however I just realized how easy it is to create these gifs from pictures so I added a bunch!

JSON data

The data which is stored with Firebase will be in JSON format since Firebase in a NoSQL DB storage system. As this is my second app with Firebase, first was a tutorial, I am not very sure of the best way to structure the JSON data. Currently it is an object that has one property which is the listOfRecipes. Obviously a list of ‘object recipes’ that have properties on them, which are represented in the RecipeDetails Component; name, created date, ingredients, and instructions.

The website used to show the nicely formatted JSON can be found here.

Dependencies

The last piece I want to illustrate is the package.json file, more importantly the dependencies. Since React.js, Babel, and JavaScript are all changing rapidly I felt the need to stress which versions I am using to build the app. I know this is not all the dependencies I will have in the end, as I think about using Rx.js and/or Immutable.js. However both those will come in time unless I run into a part which requires me to step back and learn them first.


In the end I believe this blog series will be a great way for me to express what I am trying to accomplish while learning and solidifying in my head, React.js! Maybe I could help some other beginner along the way or possible get feedback and input from anyone who has taken the time to read these posts.

I will try my best to keep the post coming as much as possible but it will be a slow process as I work a construction job during the week, plus I still have to learn React.js itself along with building the app!! lol Leaving there so I can get back to work! Excited to hear the input my mom is going to provide for UX since in the coming year more and more Baby Boomers are going to retire and need something to occupy their time. Like the younger population they will need apps to help them in their daily lives. Well this one is for you mom! Hope throughout this process you can even teach me how to cook as we both take the vegan lifestyle path and never look back!!

Like this:

Like Loading…

Related


Originally published at natacseanc.wordpress.com on November 28, 2015.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.