Commit32 //JS React [Visualizing the Virtual DOM]
I am studying JavaScript React with @skillcrush, in this module we will cover visualizing the virtual DOM
Photo of me and the derby folks at CrossFit this past weekend.
I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above. Use the coupon code: TWIXMIXY
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!
💪 Greetings travelers! We are continuing our JS React course with Skillcrush. I ended up having 5 killer workouts last week. I’m liking the results that I am seeing. My biggest downfall is making sure I eat enough to sustain my weight lifting so that it’s not going to waste. I’m now up 8-9lbs since late February! This is really good for me. I’d like to see how I feel between 125-130, to determine if I want to keep going or if I want to shift more towards endurance and agility work.
All of this is to support my roller derby habit at Charlotte Roller Derby. I have a game in a few weeks, if I roster. I’ll be getting in another 4-5 workouts this week, which I’m including reffing a game this Thursday out in Greensboro. If you live in the area, check it out!
The job I had been waiting to hear back from ended up not coming through. I’m definitely proud of myself that I made it all the way to the final rounds. I know I’m a qualified candidate in the fields that I am currently in. So now it’s about finding the company that is the right fit for me and where I am going right now.
If you’re reading this, I’d love to hear from you. What’s your journey like right now? Fill me in! OK. Now let’s jump into the next module. We got work to do.
Visualizing the Virtual DOM
VIRTUAL DOM
React’s local copy of the HTML DOM. React uses it to update the DOM only when UI needs to be changed.
LEGACY CODE
Code that someone else wrote, which might be out of date or organized in a different manner.
React Dev Tools will show:
The structure of the virtual DOM
How components are working together
The components’ current props and state
The Virtual DOM & React Dev Tools
Adding this tool to Chrome, so that we can see how React is working on websites which use it. For the example flipboard.com is used as a website using React components.
Install & Use React Dev Tools
Now we’re going to use it, to see how it functions.
For this challenge we had to navigate to the flipboard website, find the Component panel and locate things like string, numbe, object, and arrays, etc. I’m not sure if I found two props, which is what they specifically asked for, so hopefully one of the TAs will provide feedback.
Scenario Quiz: Virtual DOM Scavenger Hunt!
A quiz already?! Sheesh. I’m not ready!
OK, so maybe I was ready. We had to go to this website and via the DevTools determine the answers to all the questions and I got them all right. So yay!
Quiz: Visualizing the Virtual DOM
And now for the general quiz!
I ended up getting two wrong :(
Question #3: Drawbacks of legacy code can include (select all that apply):
INCORRECT
Your Answer: Code organized differently than expected Outdated code
Correct Answer: Outdated code Code organized differently than expected Confusing and unfamiliar code
Question #6: Use React Dev Tools to analyze how the components work together to render the UI and manage the ________.
INCORRECT
Your Answer: Displays
Correct Answer: Data models
Question 3 I was pretty sure on, but I guess I thought it was a trick question. They provided us with two of the answers during the lesson, but insinuated it was all three, I guess.
Question 6 I tried to look up what it could be and couldn’t figure it out. I don’t really understand it, but I’m sure it’ll come to me eventually.
That was a SUPER short module, which works out because I got started late in the day. Looking forward to diving into the next module and continuing to wrap up all the chaos that is JS React.
How did you learn JS React? Any courses or challenges you would recommend? Please leave me a comment!