Do This! BEFORE Learning A JavaScript Framework

[Music] so I get this question a lot when should I start learning a framework in this video we'll quickly go over all of the key technologies and concepts that you need to be familiar with before starting to learn a JavaScript framework by frameworks I mean react view and angular those are the top three in my opinion really quick before we get into it today's video is sponsored by Atlantic net Atlantic net provides great VPS hosting and they are offering a free one gig virtual server with SSDs and block storage for free for a year plus twenty five dollars in free credits to use for other services they offer if you use the link in the description below it's super easy to use after I signed up I was able to provision a new server in less than 30 seconds and unlike other big names in this industry they have great always available technical support they also have incredible reliability and redundancy on their servers so try Atlanta net to develop test or launch your next project click the link in the description below and use the code stacker to get your $25 in credit so the first things that you need to know would be HTML CSS and the basics of JavaScript you absolutely have to know these and be comfortable with them before moving on to a framework the basics of JavaScript would be understanding the syntax variables arrays and objects events functions loops and conditionals these are the core concepts of JavaScript so you've learned the basics of HTML CSS and JavaScript that's all you need to know right you'd be doing yourself a disservice if you try to learn a framework without knowing some of the more advanced features of JavaScript so don't jump into a framework right after learning the fundamentals you need to be able to differentiate between what is regular vanilla JavaScript and what is part of a framework next we'll talk about all of the advanced JavaScript features that you need to understand before moving on to a framework first is high order array methods for each map filter reduce you need to understand how these work when manipulating data next is arrow functions arrow functions are cleaner but you need to understand that they use the lexical this so then of course understanding how this works in JavaScript is crucial you also need to understand JavaScript es6 modules using import and export and then understanding how promises work also using async await and the fetch API understanding these structuring is important D structuring is a way of unpacking values from objects and arrays in this example we can assign the variables name and age to the user data individually but there is a much cleaner way to do this by using D structuring you'll see this a lot especially in react next is classes a lot of programming languages use classes so this is not a unique concept you'll need to understand how classes are structured how they use constructors methods and properties instantiation and extending classes now separation of concerns this is the concept of keeping things separate in general we like to keep our HTML CSS and JavaScript code in separate files frameworks use a similar concept by keeping UI components separate so you may have a navbar component and menu component and a main component then the components all have a state state is usually the data or the components state of being an example would be tracking whether a menu is opened or closed if your application is large you may need state management in that case you could use Redux for react or view X for view and angular has ng rx next is the spread operator since we were talking about state state is usually immutable so you can't simply change it you need to make a copy so here we have a state object with some name data if we wanted to add the age data to the state we would need to first make a copy of the state using the spread operator then add the age data then we can update the state using the provided methods from the framework there are a few miscellaneous items you'll need to understand typescript when learning angular you'll also need to understand how web pack and Babel work you don't need to have any advanced knowledge of these but at least a basic understanding of how they work the reason for this is because frameworks are not written in a way that browsers can understand frameworks allow us to write the same code we would write if we were using vanilla JavaScript but in a way that is more efficient and easier to maintain so web pack and babel help us to translate our code into something readable by the browser and then Dom manipulation is optional because most frameworks manipulate the Dom for you behind the scenes so you technically don't need to know how to do this on your own when using a framework but it would still be worth learning how it's done in vanilla JavaScript I have a complete crash course on JavaScript basics and an entire series of over 30 videos that takes on individual key functions and concepts in JavaScript and breaks them out into small bite-sized videos that are easy to understand this was part of my JavaScript January series and I've rebranded that and called it my micro bytes series so in the future you'll see micro bytes for CSS JavaScript react and many other topics check out those videos to get ready for my upcoming react series where we'll cover all of the things you need to know to become an awesome react developer there will be several micro bytes videos where we'll cover in depth key features of react I'll also have a full featured react crash course very soon like this video to help me out and subscribe if you haven't already I'll see you in the next one [Music] you [Music]

Channel: codeSTACKr

Views: 227,490

Rating: 4.9367929 out of 5

Keywords: before learning a js framework, before learning a javascript framework, javascript before framework, before framework, learn javascript framework, javascript framework, which javascript framework should i learn 2020, which javascript framework, javascript, react, angular, vue, front end framework, front end developer, web development, js framework, react angular vue, compare js frameworks, which framework is best for web development, React js

Id: KkdY8X61K9g

Length: 5min 59sec (359 seconds)

Published: Fri Mar 13 2020

Reddit Comments

[u/codeSTACKr]

So I get this question a lot.. When should I start learning a framework?

In this video we’ll quickly go over all of the key technologies and concepts that you need to be familiar with before starting to learn a JavaScript framework. By frameworks I mean React, Vue, and Angular. Those are the top 3 in my opinion.

Look out for new React content coming very soon!