JavaScript concepts you should know before jumping into React or any other Frontend framework.

One of the biggest questions a new web developer has is when can I learn a JavaScript front-end framework or library like React.

There are countless frontend js frameworks to choose from. But before you jump into a frontend framework, it is important to know that as long as you have good fundamental knowledge of vanilla javascript, then choosing any framework or library will be a piece of cake.

I have experience with React and I'll be discussing some of the important core JavaScript concepts I use on a day-to-day basis while working with React.

Lets get started

So before jumping into a framework like React you certainly must know HTML and CSS. React is built with JSX. JSX, in simple words is where we can have HTML inside a js file. Think of it as a combination of JS with HTML.

I also want to reiterate that what you do inside any framework can be done without one, it just makes the job simpler, or harder if you don't really know what you're doing. So with that said, let's get started on a couple of "pre-requisites" before jumping into a JavaScript Frontend Framework.

HTML

This is the skeleton of how our components will be structured. Having a good understanding of semantic HTML and how to structure a website is necessary for what you'll be doing. If you can't do HTML, stay away from React.

CSS

You don't need to be a pro at CSS to be productive in React but having an understanding of how to style your components is important. Though centering a div is still mindboggling for even senior devs, just be sure you can style and create a website with HTML, CSS before moving on.

Let's start with JavaScript Concepts that you should know:

1. Basic Data Structures like objects, arrays, and variables.
2. Know who the hell DOM is.
3. What's an API?
4. Axios / Fetch
5. ES6+
6. JS Array Methods

1. So Vanilla JS concepts. Data Structures.

This is what we will be working with for the most part in the Frontend. As an example, we might fetch a request to an API and get back an array of objects. Knowing JS data structures can help us identify what type of data we are dealing with and how we can navigate through it to get the data we need.

Data Structures is an important concept for any programming language. So understanding the core data structures for JS will certainly be applicable and make learning other programming languages a bit easier. So win-win.

2. Now who the hell is DOM?

I'm sure you've heard of him. But DOM is Document Object Model and it's a programming interface for HTML. Essentially it is a modifiable representation of the web page that can be manipulated with javascript. One example can be tracking event listeners and doing something. For example, a client presses on a button. So we can listen for the button to be clicked and when onClick triggers we can call a function to fetch data or turn the light theme into dark them.

Understanding the DOM is super important as it gives you the developer the ability to be able to create interactability with your web page, which is the purpose of using JavaScript.

When using a framework like React, we always interacting with the DOM. For example in a button component, we can have something like this.

<button onClick={handleIncrement}>
Increment
</button>

In the button, we are saying that when this button is clicked, it will trigger the function handleIncrement to fire off.

Understanding the different DOM methods, you have access to will give you a better understanding of what can be made interactable and give your users a better experience while using your application.

Interactivity between the HTML components and event listeners is one thing that frontend frameworks/libraries simplify.

To learn more about DOM visit Mozilla Docs

What's an API?

API stands for Application Program Interface. Essentially it's data that can be used. For example, you can fetch data from the Pokedex API which gives us data about all the Pokemon. Another API can be a custom REST API that you create that returns data or pushes data to a database.

What's important about APIs is that most of what is shown on our web applications built with React or any other JavaScript frameworks use them in order to display dynamic data.

You don't necessarily need to know how to create an API. Just know what they are, and how to consume one (be able to use it in your application). Play around with some APIs by learning how to fetch and display them on your web app.

Side note about APIs: Developers can access free and public APIs to create frontend apps without having to create an entire backend. These free API's can be found in this GitHub

Axios or Fetch

Axios is a fetching library while fetch is a built-in javascript function that you can use to fetch data, hence the name.

Axios in my opinion easier to read but they both do the same job.

Knowing how to use Axios or fetch is essential for connecting with an API or backend service. These concepts, API and Axios/fetch are important in developing non-static websites. It allows you to connect to the backend and query some dynamic data.

ES6

There are a lot of ES6 Concepts but the most important that I notice using every day are:

1. Template Literals
2. Arrow Functions
3. Promises
4. Importing and Exporting
5. Async / Await
6. Using const & let vs var
7. Spread Operator

With a decent understanding of the core JavaScript concepts, learning ES6 standards are relatively simple and easy to understand. ES6 standard for writing your code allows you to have an easier-to-read syntax and can simplify your development.

I recommend taking a look at this github link to learn about the es6 features.

Last but not least Array Methods

With knowing learning about API's and how we can retrieve data from external sources, we also need to know how we can play around with the data we get back. What if we only want to show to-do's that are checked off only? Do we iterate through the entire array with a for loop and write something to check every index or can we simplify this using an array method?

Depending on the cases we can use some array methods in order to manipulate the data we can show our user.

Array Methods that I use often are:

1. .map
2. .forEach
3. .find
4. .filter

The most common is array.map and in React, use the .map method to iterate through the entire array while still returning a new array for us.

Just know they exist and that they will help simplify your life when dealing with data. You might not always use the different array methods, but knowing that you can use one when dealing with a specific case like the example mentioned above can help you avoid facing the frustration of manually looping through everything yourself.

Conclussion

WHOOOOO!!! You made it to the end. Again these are just some of the JavaScript concepts I think you should know before jumping into a Frontend framework like React. What you can do in React you can do in vanilla HTML, CSS, and JavaScript.

But knowing the concepts mentioned above will give you the fundamental knowledge that you need in order to understand the simplicities of using React allows you to do.

I hope this post was helpful. Good Luck