I’m learning React with Wes Bos! I’m loving it so far. If you’re a visual learner like me, video tutorials might be a better option than plain reading. I purchased the course back in January.. I watched a few videos and things happened along the way so couldn’t fully commit to finishing. The basic concepts such as components and importing and exporting them, passing variables via props, creating different methods, rendering things out, virtual DOM, etc. were pretty straightforward and I was able to code along without much trouble. Then came routing (woo hoo!) & state (probably one of the most important concepts to master). Yes, I could mentally follow (kind of) and code as I go (essentially copying what he’s typing) but that’s when I got distracted and put it off for a few months.
I’ve since watch those videos a couple more times and tried to follow yet again but what really worked for me tonight to see the big picture, was to draw it out (which surprisingly I hadn’t done before). I’m not the most organized person when it comes to learning and don’t take meticulous notes, but I found that just writing things down aka “free-styling” without worrying about being perfect and organizing later into something I can refer back to really helps. This way, when I’m organizing my messy notes and drawings, I can identify and revisit things that I didn’t fully understand. Summarizing in my own words rather than writing down definitions given by someone I think is important, to know what I really know or don’t know for learning anything in general. So here is my not so pretty summary of tonight’s learning (apologies in advance if it absolutely does not make any sense. It might be of some help if you’re also taking his courses):
Summary of Tonight’s learning:
Essentially, Index.js is where routing is defined and rendered out to the public html file for users to see. This router (via React Router v4 which isn’t actually part of React) decides whether to go to 1) StorePicker.js to pick which store to go to or 2) App.js page which is inventory page for a specific store. The router decides this depending on the pattern in the url. If it matches “/” without a specific store name, it goes to StorePicker to randomly generate a name which then gets rerouted to the associated App.js. How does StorePicker have access to the router? Via “context” which surfaces the router from its parent, Index.js.
Once you’re in App.js for a specific store, you have an option to update the inventory (another component) via addFishForm (a form that is yet another component.. everything’s a component! even the router itself as shown above). Upon submission of addFishForm, the input values are saved in what’s called “refs” that’s retrieved by a method to save in a fish object (notice that we don’t just grab the input values and update the DOM like jQuery). This object containing info for the newly added fish “swims upstream” to its parent, App. js to be added to the current state. How? Well, the method that resides in App.js that’s responsible for updating the state gets passed down to its child components, Inventory and addFishForm in this case, via props. Pretty straightforward, eh..?