Learn this before jumping into React

Jumping into react pre-maturely can be a mistake and would hurt you in the long run. In this post, I will list out 5 of the most important things you should have down so you can feel confident that your foundation is strong and you can glide through learning react.

Table of Contents:

• Syntax

• DOM Manipulation & Events

• Asynchronicity

• The this keyword

• Call Stack

Syntax

This one should be a must-have because React is a library that was built on JavaScript. Syntax includes but is not limited to the following: declaring functions and variables, for loops, if statements, arrays, objects, operators and more. I would highly recommend to build at least one project, (Project ideas), to see how all these things come together.

DOM Manipulation & Events

Learning to manipulate the DOM (Document Object Model) can be a great way to start "connecting" different languages together and change it accordingly. The following are common DOM that you will doing about 90-95% of the time:

• Creating elements
• Adding elements
• Modifying data attributes
• Removing elements

This video by Web Dev Simplified is a great start to understanding what the DOM really is and how to use it properly in certain scenarios. Event listeners are also important and can correlate with the DOM because you are essentially listening to any events that occur. For example, if I have a form and I want to receive the information that was written by someone, I can implement a submit button and have an event listener to it so once the person clicks on the button, I can get and store this information in an object or in localStorage. This video is also by Web Dev Simplified and he explains perfectly conceptually and practically about event listeners.

Asynchronicity

This is a big word that might scare some people but all it really does is wait until a certain action is completed before completing another action so basically one thing at a time. You will commonly use callbacks, promises or the async await keyword to fetch data from a RESTFUL API and parse it into JSON (JavaScript Object Notation) because API's are usually stored in a stringified manner. A great introduction to this is this video by Traverse Media which goes into depth of callbacks, promises and async await.

The this keyword

There is a ton of backlash regarding the this keyword but all it really does is the following:

This keyword belongs to the object it belongs to

• Alone, this refers to the global object.
• In a regular function, this refers to the global object.
• In a method, this refers to the owner object.

You can also explicitly bind it with a function using the following methods:

• Call() | [c]all takes (c for comma separated arguments). Invoked the function

• Bind() | returns a new function that can be called, it just allows you to bind whatever object you want

• Apply() | [a]pply takes (a for array of arguments). Invokes the function

It basically references the context in which the code is currently running. This might be a bit overwhelming to understand and this video by techsith covers the this keyword well in almost all scenarios. The reason I am not going in-depth about this specifically is because I think watching a video with code examples is a better way to truly understand it.

Call Stack

For some reason, this does not get mentioned a lot but I think understanding how the call stack works will let you be more aware of the order that functions are called in. Just having a very basic fundamental knowledge on how the JavaScript Engine and JavaScript Runtime Environment will set you apart from other developers and carries over very well when you jump into react. Also, having some knowledge on the overall Event Loop (task queue, microtask queue and maybe chunking) will really level you up as a developer. There are a ton of videos on this so feel free to choose which one you like.