Choosing a JavaScript framework to learn or use in your project can be pretty overwhelming, especially when you’re just getting started out with coding on the web. React, Vue, Svelte, Angular, Ember, Lit, Solid… and that’s just some of the frontend frameworks - don’t even get me started on the full-stack and backend JS frameworks 🤯. Here are some pointers and tips I’ve learned along the way to sort through this mess:
Start with the fundamentals of the web
In other words - HTML, CSS, and plain/“vanilla” JavaScript. Having a solid understanding of these three languages is absolutely vital when you’re learning a new framework, as you want to have some idea of what’s going on “under the hood.” Some of my most frustrating moments when building a React project came about because I wasn’t understanding some fundamental concept about JavaScript (e.g. scopes and closures). Resources like the Odin Project and Frontend Masters are great for getting up to speed on these fundamentals.
Choose one framework to learn, and stick with it
It turns out that, contrary to what you might hear from each framework’s marketing or their “fanboys” on social media, there are actually many similarities between the various frameworks - especially when it comes to high-level concepts and ideas: things like reactivity, state management, rendering, components, lifecycles, side effects, data fetching and caching, etc. etc. Yes, each framework has its own take on how to implement those things, but those underlying concepts are always there.
So, I think it behooves you to stick with one framework and really go in depth with it. You’ll learn so many things that you can take with you to other frameworks if needed (not to mention the problem-solving skills you’ll gain along the way 😅). And I don’t think it actually matters that much which one you choose. That being said, the one consideration you might want to keep in mind is which framework is in demand when looking for a job. I would take a look at current job listings if this is an important consideration for you!
Read the docs, build things, and avoid tutorials
Once you’ve chosen a framework to learn, the best thing to do is to go directly to the source - that is, the framework’s website/homepage - and read their docs. If the framework itself has a tutorial, take that for a spin (Svelte in particular has an amazing interactive tutorial where you’re building and learning in real-time - I hope other frameworks follow suit). Other than that, though, I would avoid any other tutorials out in the wild, whether on YouTube, Medium, or anywhere else. These third-party tutorials have a tendency to be outdated, and more importantly, it’s too easy to get stuck in “tutorial hell” where you’re just following steps and not really learning much.
So, what should you do instead? Think about what you’re interested in building, and go towards that. You don’t have to go all out and build the next OpenAI, but you could break down what you want to do into small, manageable steps. Use your “brain organizing” tool of choice to write them down and plan it out.
For me, with my background in music and teaching, I wanted to build a useful tool for piano teachers. I started out with learning how to manipulate HTML and CSS to make a series of buttons look like piano keys. Then I learned how to use JavaScript and React to make those keys light up with mouse clicks, and then respond to keyboard input, and then respond to MIDI input (yes, browsers can understand MIDI input 🎹🤯). Eventually this turned into my full-fledged piano visualizer. I won’t pretend it was easy, or that it was always fun, because it definitely wasn’t. But it was satisfying in the end, because it was something that I was passionate about.