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