JavaScript Before React

A very common trap for newbies in tech is to jump into learning cool and popular frameworks without properly understanding the programming languages on which these frameworks are built on. I get it, it's slow and boring to learn the basics of a language, you just want to go in and start building the next Facebook in 2 weeks( Good luck with that by the way😉).

The reality of things as proven by tonnes of developers around the world is that it is very important to have a solid foundation as a developer on which you can build your career as a developer. That foundation for you as a React developer is the fundamentals of JavaScript. It can be boring, for most people even frustrating to learn JavaScript but it is the pain of going through these fundamentals that ultimately makes you a better developer in the long run.

Now, just to get things straight, I'm not saying learn everything about JavaScript. That's a battle nobody has been able to win yet. Lost a lot of good men trying😂(just kidding). However, there are important concepts of JavaScript that you definitely need to understand as a React developer and that's what we'll be looking at in this article. Let's get into it😊

1. What is JavaScript and How To Use It

Before diving into the fundamentals of JavaScript or any programming language in general, it is important to understand what the language is about, what was it made for? how do people use it? what kind of problems can the language be used to solve? what career paths require the language? etc. These questions help you make sure JavaScript (or any other language) is the right language you should be learning for your future goals

2. Fundamental Programming Constructs

These are constructs that are not particular to JavaScript alone but are available in most programming languages today. I'm talking about:

Values and Data types
Variables
Mathematical and Logical Operators
Conditional Statements
Loops
Arrays and Objects
Functions

These are the base of most programming languages and understanding these will give you the transferable knowledge to go on and even learn a different programming language with ease.

3. Higher-Order Array Methods.

In React, we work with arrays a lot. An array of data from a server, an array of elements to display on the screen, etc, and most of the time we need to manipulate these arrays to suit our needs. High order array methods are methods attached to the Array data type in Javascript that provides us the ability to modify arrays in different ways.

Some common arrays methods include:

forEach: used to loop over an array and do something with each item.
map: used to create another array of values based on the array it is called on.
filter: used to remove elements for a given array based on a given condition.
find: find an element in an array based on a given condition.
reduce: combine the values of an array into a single value.

There are more array methods but these are the most common and I personally find myself using them quite a bit.

4. ES6 / ESNEXT

ES stands for ECMAScript which happens to be the governing body of JavaScript. In simple terms, they decide on updates for the JavaScript Language. ES6 was a major update to the language in 2015 which brought a lot of new features which we use today. Getting yourself familiar with these new features gives you the ability to write nice and cleaner JavaScript code. Some important ES6 features common in React include

let and const: these are the new ways of declaring variables in JavaScript
spread operator(...): This is used a lot in React to create copies of arrays and objects in order to have immutable data. This is a principle in functional programming which helps to make code output predictable.
classes: A new way of writing Object Oriented code in JavaScript similar to most other programming languages. Although this might not be necessary for modern React development, old React codebases do use the class-based syntax for creating components and is definitely something worth understanding.
Promises and async/await: These have to do with Asynchronous JavaScript which we will talk about next.

5. Asynchronous JavaScript

Asynchronous JavaScript is a concept of JavaScript that deals with processes that take much time to execute. JavaScript was designed to handle these cases by sending these processes to something called the Event loop where they are put on hold and run at a later time. This makes JavaScript seem to run multiple processes at the same time, hence the name asynchronous.

Common patterns for writing asynchronous logic include:

Asynchronous Callback: This is a function that is passed into a higher-order function(a function that takes in another function as an argument) that performs async(asynchronous) logic and this function is called back (hence, its name) to do something after the async process is complete. However, this pattern posed a problem called "Callback Hell" and is not used very much in modern JavaScript.
Promises: Promises are a newer method for handling async logic in ES6. They provide a much better approach to performing actions after an async process is complete.
Async/Await: This is an even newer syntax that allows you to write async logic in a top-down manner like a regular JavaScript function. They involve using functions marked as "async" and then a keyword "await" whenever asynchronous logic is found, to indicate to the compiler to pause execution until that function is complete before carrying on.

A very common asynchronous task perform in JavaScript and React Apps is fetching data from a server. This process usually takes time, especially on slow connections. The fetch API is a built-in function in JavaScript used to fetch data from an external source(server or some other API). However, Axios is a popular library used for data fetching in JavaScript and React and definitely worth learning as well.

So there you have it guys, common JavaScript concepts to be familiar with before jumping into React. But now that leaves you with one burning question, right? Timo, your article is awesome, it just showed me how empty I am, thank you for that😒, but where do I learn all these concepts from? Give me resources!!😭

Don't worry, Big T is not going to leave you dry and hanging of course😉. Here are 3 of my top resources for learning modern JavaScript.

The Complete JavaScript Course 2022: From Zero to Expert!

This is in my opinion the best JavaScript course I've taken online. I owe my entire career to this course and to its awesome instructor, Jonas Schmedtmann. However, this is a paid Udemy course, but I think it's totally worth the money.

Free Code Camp

This is one of the best and biggest free resource for learning JavaScript on the internet. FreeCodeCamp is absolutely awesome. They have a good Javascript curriculum to guide and structure your learning which is cool especially for self-taught learners who don't have a curriculum to follow.

FreeCodeCamp also has a Youtube Channel where you can find tonnes of free video courses for learning a variety of topics in programming. This is one of their Latest JavaScript courses which will give you a good foundation as a JavaScipt developer.

JavaScriptTutorial.net

Not as popular as the other two, but this is a really cool website for learning modern JavaScript for people who love learning by reading.

Thank you so much for reading this far, I hope this article helps you in your web development journey and puts you on the right path to become a React/JavaScript Master. Also if there are any concepts you think I omitted, please drop them down in the comments so we can all learn and grow. You can Follow Me On Twitter as well to get notified whenever I drop a new article. See you on the next one.