On Mastery of the Fundamentals (Part 1/n)

As a part of our Capstone preparation we are working our way through part of the excellent Full Stack Open course, much of which has centered on React. LaunchSchool's Core program is explicit about focusing on JavaScript fundamentals instead of frameworks out of the gate, and my experience of learning React has really demonstrated the wisdom in that approach.

Comfort with the underlying JavaScript

Going through this course I am regularly pleased with how easy it is to pick up the React functionality and not get tripped on on the JavaScript. Consider the following common line:

const [username, setUsername] = useState('')

In this one line are ideas that spanned many different fundamental JavaScript lessons, not limited to (and in no particular order):

1. Array destructuring is a handy way to return multiple values from a function (and superior to object destructuring in this case)
2. useState must be a function based on how it is used - but what exactly the '' argument is doing requires consulting the docs
3. setUserName is now a function to be invoked or passed around as we need
4. ... (omitted for brevity)

Imagine if this was the first time you had seen array destructuring or higher-order functions - it would take much longer to parse this one line. And we wouldn't even have touched on the scope of these variables and how to pass them to components defined in other files...

An understanding of the problems React solves

Caveat, as a new developer I'm sure I only have a surface level understanding of the problems that React solves, but even so I see some big ones. In our study of JavaScript fundamentals we covered the DOM manipulation APIs made available to us by the browser. We did things like:

let header = document.querySelector('body>header');
let title = document.querySelector('h1');

header.insertAdjacentElement('afterBegin', title);
document.body.insertAdjacentElement('afterBegin', header);

And don't get me started on toggling the visibility of elements. Understanding the pain of manipulating the DOM manually illuminates how much simpler using React to build applications is. And I haven't even gotten to complex applications yet - I imagine the benefits scale with application size.

Targeting points of confusion

Having a strong mastery of the fundamentals has also been helpful when encountering entirely new syntax. Consider the following return from a React functional component:

return (
      <div>
        <h2>Log in to application</h2>
        <form onSubmit={handleLogin}>
          <div>...
      //...continued

If I had an unsteady grasp on JavaScript I might think you can just write HTML in a .js file. But I knew better - there is something different going on here, because that is not the way you create and manipulate HTML elements in JavaScripts. From here it was easy to locate what is actually going on (in this case, JSX).

And here is the rub - because of my comfort with basic JS and HTML writing JSX is super-easy to pick-up! One's mastery can be built upon.

Conclusion

I have no regrets of the time I spent on mastery of the fundamentals of JavaScript, and will definitely take this viewpoint with me as I move further into my career.

---

Cover Photo by Jakob Braun on Unsplash

Comments

[arup saha chowdhury]

*Spy Camera
 TECHNOVIEW 64GB Inbuilt Wireless Spy Camera WiFi Mini Camera Video Wireless CamerasWiFi Watch Live View Nanny Camera Users 1080P HD Cameras Video Audio Recording... -App V380 Pro.
*
device
buy now

Media
A hidden spy camera can shoot HD 1080P video and pixel photos. It is equipped with the latest CMOS sensor, it can show excellent image quality better than other cameras. Provide you with h-definition vision! Once your iPhone or Android phone is configured with router Wi-Fi (Only2.4GHz). Then you can view live video on the App remotely from anywhere in the world.

Hidden spy camera (1.1*1.1*1.1 inches) mini camera, and can be easily stored in various environments. Take videos and photos without attracting any attention. Small and exquisite equipment, it can be monitored even when power outages, HD at night, alarm reminder, easy to set up, HD picture quality, and mobile monitoring.

90° wide viewing angle helps you see more of what's happening, it doesn't emit light to attract any attention while shooting in the dark, it provides more accurate image quality than other cameras, and once the mini camera detects motion, it automatically saves the relevant video to SD card (64GB Sd Card Included).

Wireless camera built-in quality 300mAh rechargeable battery, this camera can work 60 Minutes without charging, 24/7 uninterrupted working while charging.The camera system Remote monitoring by APP (Only 2.4GHz WiFi), set the “WiFi Config” in the APP Device Setting for remote viewing. Just insert the SD card of 64GB (included with the camera) turn on recording and it can save the recording with the SD card.

ift.tt/toFIeby
July 24, 2022 at 12:46AM