Learn this before jumping into React
Tags: javascript, webdev, react, discuss
Published: 2022-05-30 18:01:47

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](#syntax)

- [DOM Manipulation & Events](#domE)

- [Asynchronicity](#async)

- [The __this__ keyword](#this)

- [Call Stack](#callstack)

### 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](https://www.webtips.dev/100-javascript-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](https://www.youtube.com/watch?v=y17RuWkWdn8) 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](https://www.youtube.com/watch?v=XF1_MlZ5l6M) 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](https://www.youtube.com/watch?v=PoRJizFvM7s) 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](https://www.youtube.com/watch?v=NV9sHLX-jZU) 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.