How Much JavaScript is Enough JavaScript to Learn React? 🤔

The transition from javascript to react can be difficult especially if you are a beginner. The javascript language has a lot of concepts which could take you months if not years to learn (and not even get good at them). To be honest, i have been coding in javascript and react for over 4 years, and even i don't know everything that is there in javascript, but i can still develop full-stack apps in javascript, react and node. The good news is that you don't need to learn everything in javascript for you to start learning react. And you can actually continue learning more javascript concepts as you work with react. I am writing this post to help you transition to react smoothly and not get stuck at javascript for far too long. And if you are good with both javascript and react I would like to hear your thoughts on this topic at the discussion section below.

1. var, let and const

These are used to declare variables in javascript. var and let can be re-assigned values while const is use to create constant variables. In modern javascript it's recommended to use const by default and only use let when you explicitly need to reassign a variable. This helps in writing more maintainable and predictable code.

2. JavaScript Data Types

Understanding the different javascript data types must be one of the most important concept you need to understand well. Almost every line of code you will be writing you will be interacting with these data types. When declaring variables, manipulating data, or even while debugging, it is there good to understand them and know when to use them.

undefined - A variable declare without being assigned a value takes the value of undefined by default. undefined is used to represent absence of a value.
null - null is assigned by the programmer to represents intentional absence of a value.
boolean - Has only two possible values, true or false
string - Represents a sequence of characters using quotes
number - Can be integers or decimal numbers
symbol and bigint - I rarely use them but might be useful in some cases. symbols are often used to add unique property keys to an object. bigint is used to represent large numeric values.
objects - They store data in key and value pairs.
arrays and functions - These are not necessarily types but special objects. Arrays are used to store list of values while Functions are use to write reusable pieces of code/logic.

Understanding these data types is your very first step to becoming good at javascript.

3. JavaScript Array Methods

When you start developing apps, you will find yourself mostly working with list of data. Knowing and understanding the different array methods is essential in react in order to correctly update the state. Some of the methods you might find useful are:

.map - often use to display list of data in react by looping through them.
.filter - when you want to remove an item/items from a list. important when updating state for a delete functionality
.find - to get the first element of an array that satisfies a given condition
.findIndex - similar to .find only that this returns the index(position) of the item instead of the item.
.reduce - used to accumulate values in an array. Good example could be getting the totals of a shopping cart items.
.forEach - you can use this to loop over an array.
.slice - used to get a subarray(a portion of an array)
.push - used when you want to add an item to an array

Although there are many other array methods worth knowing, I find the above being mostly used.

4. Objects and Array Destructuring

Destructuring is used to extract values and assign them variables in a more readable way. In react the concept is widely used when accessing and manipulating props and state. You can also easily assign default values to props when using destructuring.

5. The Spread Operator (...)

The spread operator is very common in react when adding properties to an object or array or even combining objects or arrays, and then using the new value to update the state.

6. Functions (Regular and Arrow Functions)

You need to understand how to create and work with functions. Functions are important in creating reusable logic that can be reused in multiple modules. Understand the syntax and how to pass arguments in both regular and arrow functions. Understand the usage of the return statement in a function. Learn the difference between them, the this keyword, the arguments object and how the functions are hoisted.

7. Conditional Statements

These allow you to execute different blocks of code based on whether a specified condition evaluates to true or false. They include the if statement, the switch statement and the ternary operator.

8. Accessing and Manipulating the DOM

The DOM is a crucial part of web development in JavaScript. It provides a standardized way to interact with and manipulate the structure of web documents, making it possible to create dynamic and interactive web pages. Although in React you will not be interacting with the DOM directly, understanding how to navigate and manipulate the DOM is fundamental for front-end development.

9. JavaScript Modules

Finally I think you should learn javascript modules, modules are a way to organize code of related functionality into separate files. Modules help improve code maintainability, reusability, and organization by allowing developers to break down a large codebase into smaller, more manageable pieces. In javascript, modules can be created using the export and import keywords. In React modularity is widely adapted by making most components as modules.

In my opinion, the above is enough javascript to start learning React. There are many other javascript concepts not mentioned above but I think as you learn react and work on react projects you can as well learn more javascript along the way.

What do you think? Is the above javascript enough javascript to start learning react?

I am adding this section to showcase my content. I have a youtube channel where I create javascript, react and other coding tutorial. My latest big course was on creating a full-stack ecommerce app in Next.js, it is complete and ready on my youtube channel 🔥

Build and Deploy a Full-Stack E-Commerce: Next.js 13, React.js, Typescript, Tailwind, Prisma, Stripe

Blog