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 https://api.randomuser.me) 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: https://dog.ceo/api

Here’s an API for FourSquare which is what they used for the travel app at Code Academy: https://developer.foursquare.com/

2 Likes

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

    }