I've put together a complete course with the goal of showing you how to bridge this gap.
Want to get started now? Take the entire course here.
Variables and Strings
We'll begin with the building blocks of any JS program: variables.
First we'll cover declaring variables with let and const and how they are an improvement over the old var syntax. We'll learn concepts like block scoping, variable shadowing and the temporal dead zone, but also discover how these new keywords can make our code easier to process.
For example, why the
salePrice variable below becomes more readable when we declare it with const instead of let or var.
Because we declare the variable with as a constant, we know that it won't be assigned a different value later on. This makes our code easier to understand both for other developers and for ourselves.
Types and Conditionals
Next we'll touch on types and conditionals, which go hand in hand.
Types can change implicitly when we write conditionals and this means we must know about truthy and falsy values, values that are subtly coerced to the boolean true and falsy, respectively.
We'll see how we can use truthy and falsy values to our advantage by creating shorter conditionals using the && (and) and || (or) operators. This trick, known as short circuiting, is the basis of how JS libraries like React display or hide elements.
Then we'll see how to shorten our if-else conditionals with the ternary operator, and how they come in handy in situations when we want to conditionally set a variable's value.
We'll demystify a crucial feature of functions called closures. We'll wrap our head around what a closure is by through creating our in a practical example.
Lastly, we'll touch on default values in functions and how they can make our code more reliable, especially if an expected argument isn't provided.
From primitive data types, we'll move onto objects.
We'll touch on a variety of practical patterns to more easily get our object data through object destructuring, as you see below:
Then after destructuring our objects, we'll see how to better assemble them. By using the object spread operator we can seamlessly merge multiple objects in an immutable fashion.
Arrays are essential for any list of data that we display in our apps and we need to know how to manipulate them with ease.
We'll cover how to perform actions on all elements in arrays through higher order array functions like map and filter to transform our elements or remove them from our array.
Additionally, we'll use methods like find to get individual elements based on certain conditions:
Then we'll cover the most important array method, reduce, and see its power to transform our array data into virtually any data type we want.
Constructor functions make it possible to give our objects shared behavior (functions) through something called the prototype chain.
We'll begin with a discussion of what asynchronous code is and how it was handled in the past using callback functions and how this creates problems in our code (such as 'callback hell').
Fortunately, we'll fix some of the inherent problems with using callbacks through an ES6 feature called a Promise. We'll gain experience using promises in a practical way by getting familiar with the browser's Fetch API, which allows us to make HTTP requests and bring outside data into our apps.
Then, best of all, we'll touch on how to make our promises work and look just like synchronous code so we can easily reason about it with the help of the new async-await syntax for functions.
We'll tackle thorny issues such as the
this keyword by covering a list of concrete rules to follow in order to figure out it's value in any context, such as in a DOM event handler:
And finally, we'll wrap up the course with a general discussion of imperative versus declarative code, which you should strive for in your coding career, and why.
Watch the course now
Enjoyed this tutorial? Here's a special bonus.
Reading tutorials are a great way to learn React, but there is no replacement for hands-on coding.
Introducing: the Learn React app
The Learn React app is an interactive learning experience designed to make you a confident React developer through 100s of fun challenges.
Ready to level up your React skills? Click the link below to get started!