How Many Times Should You Redo The Ravenous Project To Become Competent?

I’m currently learning React and in the 3rd part of the Ravenous Project. I have to admit that so far, I’m just more or less a typist, just typing in most of the code given. While I understand some of the code, I don’t understand others. This is understandable given that I am new to the framework. I just want to know, especially from others who have completed the project how it helped them and how many more times I need to redo the project in order to get fairly competent. Thanks

I suggest doing simpler projects after Ravenous such as a to-do list, a quote rotator, a single page website, a paper, scissors, stone game, etc. trying to use what you learned in Ravenous. You can use Ravenous as a reference to help guide these smaller projects where you’re not being fed the instructions line by line. You’re going to struggle a bit but it will deepen your understanding of the concepts you learned in Ravenous.

Then go back and do a Ravenous-type app. That is, make it only for cafes or only for pizza shops. You can call the same Yelp API but you customize it a bit to fit the specific food type.

After that, find another API (easier ones like and see if you can make your own API driven React app. Fetch the data, realize it on a webpage.

These are the kinds of things I did after Ravenous and the Spotify Jamming app.

here’s an API for Dogs:

Here’s an API for FourSquare which is what they used for the travel app at Code Academy:


Thanks a lot for your suggestion. I will give it a go

I’d say you should do it until you can do a yelp clone unaided.

I am on the 1st part of Ravenous. I too am “more or less a typist”. To aid my comprehension, I am including each step as a comment above the relevant section of code. example:

// step 34 “add a return statement (no parentheses)”
// step 35 “Call the keys() method on the JavaScript Object library. Pass in sortByOptions as the argument.”
// step 36 “iterate through the keys using the map() method. Call the map() method by chaining it to the end of the line you just wrote.”
// step 37 "Pass a callback function to the map() method as an argument. The callback function should have one parameter called sortByOption.

// The callback function should also use arrow syntax."

    return Object.keys(sortByOptions).map(sortByOption => {

// step 38 "store the object values in a variable. Inside of the callback function, access the sortByOptions values using the sortByOption

// parameter of the callback function. Store values in variable called sortByOptionValue"

        let sortByOptionValue = sortByOptions[sortByOption];

// step 39 "On the next line, return a

  • element. The list item should have an attribute called key set to sortByOptionValue

    // (don’t forget to use curly braces to inject JavaScript). The content of the list item should be sortByOption.

    // Again, use curly braces to achieve the JavaScript injection.""

            return <li key={sortByOptionValue}> {sortByOption} </li>;

    // step 37 - VL comment - end of callback argument - hence the curly brace }


    // step 36 - VL comment - note that the callback function created as an argument to .map in step 37 i) declares sortByOptionValue (step 38); and

    // ii) returns sortByOption embedded in HTML. All this is part of the .map argument - hence the closing bracket ).


    // step 33 - VL comment - end of renderSortByOptions method