What To Learn Before A JavaScript Framework

There is no brainer, you need to learn the fundamentals and basics of any language first.

• Basic Syntax
• Variables
• Arrays & Object Literals
• Events
• Functions, loops, conditionals

I think most people know this includes basic syntax, variables, arrays, functions loops all the staff that you would learn when you're you know when you're starting to learn the language. I didn't put Dom manipulation here because with most frameworks you don't directly touch the Dom however I'd still recommend learning that especially if you want to you know if you ever want to build something in vanilla JavaScript.

Now one problem I've seen is that people want to jump right into a framework after just after learning the fundamentals and I think that's a big mistake because not only are they attempting to learn the concept of the framework but they're also learning all es6 at the same time things like classes, arrow function, Destructuring and the problem is that they won't be able to identify what's actually part of the framework and then what what's actual JavaScript. So I think that's one of the biggest mistakes that people make.

Modules

Modules are used to import files/pieces of code into another file. Without modules there would be no framework because it allows everything to be brought together

• ES6 Modules, TypeScript
• Parcel, Webpack & Babel
• Export & Export Default

If you learn es6 modules you'll be fine with typescript now modules are not supported in browser directly so you do have to use some kind of tooling like parcel or webpack with babel if you want to be able to compile modules.

Classes

Classes are used mostly in React & Angular but you want to learn about classes & inheritance before learning a framework

• Structuring a class
• Constructors
• Method & properties
• Instantiation
• Extending classes

Arrow Functions

Arrow functions are much more compact and give advantages when it comes to scope in certain situations

• Looks much cleaner and less lines of code
• The standard in writing modern JS
• Scope and "lexical this"

Promises / Asynchronus requests

Many async request/responses use promises as the are a better solution than callbacks.

• Learn how to create and receive promises
• Standard .then() and .catch() syntax
• Async/Await is optional but recommended
• Learn the Fetch API for making HTTP request

Destructuring

Unpack values from objects and arrays. Used a ton in framework and makes for for cleaner and more readable code.

const { name, email } = user;

const { name, email, address: { city } } = user

Basically let's say we have a user object with a name email address maybe some other fields. We just want the name and email we want to put that into a variable called name and email so we can just pull that out by using curly braces. We'll define it with curly braces and say we want to pull the name and email out of the user object.

Concept of components & state

UIs are broken up into individual components of which have some sort of state associated with then

• Each component can have it's own data & state of being
• We also have application level state, usually implemented using a state manager like Redux, Vuex etc.
• Nested components (Parent & Children)
• Can be directly inserted or used in a router

When you first learn basic HTML CSS JavaScript you're taught about separation of concerns you have your HTML markup your CSS styling and your JavaScript for any dynamic type functionality.

So you basically in JavaScript you select elements from the DOM and you do stuff in sort of a monolithic way well with frameworks. It's a little different in terms of how you think of the mechanics of your application you want to think of pieces of your user interface as components. So menu bar, search bar, main content whatever it may be you should look at these as encapsulated entities that include both the mark-up which is you know the display and the functionality. As well as in some cases even the styling especially in React.

Spread operator (...)

State is usually immutable, meaning we can not simply change it, we need to make a copy. The spread operator allows us to do that.

const userState = {
  name: 'John'
}

const const newUserState = {
   ...userState, 
      age: 30
} 

High order array functions

Functions like forEach() map() filter() are used all of the time to iterate through and manipulate data

• forEach() - Basic iteration/looping
• map() - Manipulating the data to create a new array
• filter() - Used to filter out certain pieces of data. Used a lot in state reducers.

Make your life easier

Learning all of this before jumping into a framework will not only prepare you more but will make it easy to learn new framework later on.