Learning React with Wes Bos

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..?



How it all started


A little (?) about me. I’m Grace, a semi-self-taught freelance developer who holds a full time position in the biotech industry as a cancer researcher. Semi-self-taught because I was briefly in an online coding bootcamp that I didn’t get a chance to finish due to personal circumstances.

I love science and helping people so studied neuroscience in college and was a premed. I went to school in SoCal so had a great opportunity to volunteer in Mexico in a monthly clinic and loved every bit of the experience. However, I later learned that medicine isn’t for me for various reasons and chose to go into research instead.

Research is fun. I have an obsessive and curious nature when it comes to work and it has everything I want in a career: problem solving, challenges, critical thinking, troubleshooting, logic, creativity, and most importantly a chance to make a positive impact on others. I’d think about whether my protein would show up on my gel the way it’s supposed to (meaning it worked) and I basically had a “relationship” with my given project that often played hard to get with me. 😉

What’s even more fun for me is coding. I didn’t know much about programming in general and what it can actually do.  I do remember however, that back in high school, I absolutely loved making websites using HTML and inline styling (it was.. a long time ago), as well as following Photoshop tutorials. I didn’t know what tags and attributes were in formal definitions but I’d often find myself doing this late into the night.

Fast-forward many years (won’t give away my age), I was introduced to coding by my colleague who was preparing for a 3 month long full time bootcamp (it’s fate!). I was astonished at what she’d built using just lines of code. I didn’t know much about the different languages but told her I liked “front-end” from my previous experience. She recommended HTML/CSS/JavaScript and I immediately got started on Codecademy, then Code School. I don’t have a crazy or brilliant stories like how other developers got started on their coding journey such as building an app at the age of 4 or something like that but simply put, I was just instantly hooked and it was just so much fun for me! Oh, and let’s not leave out the challenging part… :0) I’d itch to get off work to go home and code. That is when I knew I had to do it for a living and I haven’t stopped since.

There was an overwhelming amount of resources out there on the internet so I needed more direction. So I started Thinkful, a flexible online bootcamp. I’d consider myself pretty techie and a fast learner (I used to take apart electronics as a kid just to see how they work and taught myself how to play a few musical instruments, swim, surf, etc.) but when I was starting out, I was a bit intimidated by things like http, cache, memory, data structure & algorithm, bits, etc. what!? But remember, we all have to start somewhere and all this can be learned with patience and persistence. Anyhow, I really liked my mentor which was the best part of the program but needed a lot of outside resources like Udemy and Scotch.io to complete each project/learn a concept as the curriculum I felt wasn’t quite there yet and a bit rushed (this was back in August 2016). However, through my daily interactions with my mentor, I learned how to think and solve problems like a developer and the importance of collaboration/being a part of a supportive community, which were invaluable.

My goal now is to keep my skills sharp and become a full time developer. I’m starting this blog to better keep track of my journey and stay motivated to never stop progressing and learning. I am also hoping to somehow help those who are teaching themselves to code but it’s mostly for my own way to stay on track. Anyway, I want to list a couple things that’s helped me tremendously to learn the basics and off to my current project I go. More on this later but here you go:

My Recommendation for learning front end/JS

Start familiarizing yourself with the syntax and overall feel for the front end technologies like HTML, CSS, and JavaScript on Codecademy, then move onto Code School for more in depth learning (I personally like Freecodecamp.com for review/practice and exercises but not for main source of learning). I love Code school’s curriculum for learning Objects, it’s pretty thorough with good examples.

Once you feel a bit more comfortable, watch Anthony Alicea’s JavaScript: Understanding the Weird Part so on Udemy. This video course is by far the best I’ve learned from; it’s best selling and although Anthony in my personal opinion can be a bit boring as far as his tone of voice, he explains what goes on under the hood of JavaScript and it’s irreplaceable.

After the Udemy course, I’d study You don’t know JS by Kyle Simpson as well as Eloquent JavaScript by Marijn Haverbeke (all available online for free) to deepen my knowledge.

And most importantly, build build build and practice problems (everyday!) using what you learn and take advantage of Stackoverflow and Google for help (and don’t forget some gooood music to get you through tough nights). For problems, I like HackerRank, Coderbyte, and CodeWars. Once you feel comfortable with JS, try Wes Bos’ React (framework) & Node (for backend) course! You can choose other frameworks like Angular but the key is to stick to one and finish; once you do, I’m confident that you can pick up any other technologies. Add in a bit of Responsive Design & git/github (my favorite on Udacity, also available for free). This will keep you busy for quite awhile. Last but not least, be persistent, enjoy the process, and keep in mind that it’s a marathon, not a sprint (I thought I’d master in a few months like how those bootcamps often advertise, who am I kidding xD).