Up front I want to say that this is my personal opinion and I'm not trying to shame anyone or any particular technology. My goal is to suggest a possible stepping stone for web developers just starting out. Here's a Github repo to help get started

Front end developers just entering the field right out of the gate are bombarded online with messages telling them they need to learn one of the big 3 frameworks. I would like to recommend to them the Sassy Pug Stack as a stepping stone to learning a framework. This stack is (Pugjs, SASS, and Gulpjs)

This stack uses a couple of tools that should automate a few tasks that new developers should find tedious. Pretty quickly:

• PugJS: HTML templating (You have a 5 page website. You tired of writing that nav bar?)
• SASS: CSS pre-processor (You nested 3 elements 3 deep and now you have to keep writing in their parents? Pre process that!)
• Gulp: Task Runner (If you're going to do the above you're going to get really annoyed running those tasks manually. Lets learn to make our lives easier)

There are several reasons I have for recommending these tools in particular. The first is that if you know HTML/CSS at a basic level Pug and Sass syntax have a really low barrier to entry. Its really easy to go on Codepen and play around and build some really cool stuff. The key to the next level is really getting these to work locally, which is going to take a task runner. I recommend GulpJs, because it's what I've worked with and it works for my purposes.

These tools will make you more productive as a dev but the real value at this point is that they will teach you concepts like templating, loading libraries, preprocessing, and how to do a build process. These technologies given enough time working with them will introduce you to the pain points that the big 3 frameworks solve.

It can be really daunting to a new developer entering the world of front end development to choose what tools are appropriate for what scale of project. It is really important to level up your skills incrementally. I know after my time learning the basics of vanilla HTML, CSS, and JS, I felt pretty overwhelmed at the prospect of learning one of the big 3 JS frameworks React/Angular/Vue. Without a spirit guide for your vision quest it can feel impossible to incrementally learn what is necessary for these frameworks.

Some spirit guides in the form of free resources I'll advocate for are the great Developer Road Map and The Frontend Masters Handbook. The thing that overwhelmed me as a young developer was the transition from no library integration in my projects to what was a good first few libraries to improve my work flow. The big 3 frameworks all have command line tools that give you the capability to create a boilerplate. The siren song of trying to jump to one of these solutions was super attractive. But pretty soon I found myself floundering trying to integrate stuff just after the hello world apps. When looking at the job market all you see are framework dev jobs. But I feel like a more powerful route was building an integration project where I built my own framework using the Sassy Pug Stack.

To take that leap and learn React I think you should be comfortable with a few JS terms/concepts:

• imports/exports
• classes
• constructors
• functional arguments
• the concept of this (you might be able to get by by spamming the fat arrow function)
• comfortable with the CLI and loading external libraries

After that is under your belt you still have to learn React specific vocabulary and the React way of doing things. I felt overwhelmed trying to learn React while not knowing the above list. I found myself unaware what was broken or if I was writing React wrong or one of these new JS features.

In conclusion the Sassy Pug Stack introduces developers to building their own development environment, gives them the tools to incorporate whatever library that they want to and is a great introduction to web development.