Essential Javascript for React That Every Developer Should Know
Jagadeesh Ruthrakotti
December 5, 2024
4 minutes read
Share
You don’t need to be a JavaScript expert to start your ReactJS journey, but just as knowledge of ingredients is a must for any chef hoping to master cooking, the same is true for learning ReactJS. It’s a modern JavaScript UI library, so you need to know some essential JavaScript for react.
Essential JavaScript Concepts For React:
Functions and Arrow Functions.
Objects.
Arrays and array methods.
Destructuring.
Template literals.
Ternary Operators.
ES Modules and Import/Export Syntax.
What to learn in JavaScript before react?
Before starting with React, it’s essential to master JavaScript basics like variables, functions, arrays, and objects. Familiarity with ES6 features such as arrow functions and template literals, along with asynchronous JavaScript concepts like promises and async/await, sets a strong groundwork for React development. Understanding scope, closures, and event handling further enriches your React learning experience.
Functions and Arrow Functions:
In JavaScript, there are two types of functions. You have normal functions and arrow functions.Let’s explore the difference between them.
Arrow functions was introduced in ES6. And it introduced a simple and shorter way to create functions.Here’s how to create a normal function, with arguments, which returns something:
If the return statement is the only statement in the function, you can even have a shorter function expression. For example:
This function only contains the return statement. With arrow functions, we can have something shorter like this:
We skip the curly braces and the return keyword. Shorter; one-liner.
In JavaScript, an object is an unordered collection of key-value pairs. Each key-value pair is called a property.
The key of a property can be a string. And the value of a property can be any value, e.g., a string, a number, an array, and even a function.
JavaScript provides you with many ways to create an object. The most commonly used one is to use the object literal notation.
The following example creates an empty object using the object literal notation:
let empty = {};
To create an object with properties, you use the key:value within the curly braces. For example, the following creates a new person object:
let person = {
firstName: ‘John’,
lastName: ‘Doe’
};
The person object has two properties firstName and lastName with the corresponding values ‘John’ and ‘Doe’. When an object has multiple properties, you use a comma (,) to separate them like the above example.
How much JavaScript is required for react?
To excel in React, mastering JavaScript fundamentals is key. This includes understanding variables, functions, arrays, and objects, as well as ES6 features like arrow functions and template literals. Familiarity with asynchronous JavaScript concepts such as promises and async/await is also valuable. While a strong JavaScript foundation is essential, learning React-specific concepts is equally vital for building powerful applications.
JavaScript Arrays and Array Methods:
An array is a special variable, which can hold more than one value.
const cars = [“Volvo”, “BMW”, “Honda”];
You can able to create an array using an array literal.
const array_name = [item1, item2, . . .];
You can also create an array using the JavaScript keyword new
const cars = new Array(“Volvo”, “BMW”, “Honda”);
An array is a data structure that contains list of elements which store multiple values in a single variable. The strength of JavaScript arrays lies in the array methods. Array methods are functions built-in to JavaScript that we can apply to our arrays – Each method has a unique function that performs a change or calculation to our array and saves us from writing common functions from scratch.
Destructuring:
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. Example for simple Destructuring,
const vehicles = [‘mustang’, ‘f-150’, ‘expedition’];
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];
Template Literals:
Template literals are literals delimited with backtick ( ` ) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.
const name = ‘Jack’;
console.log(`Hello ${name}!`); // Hello Jack!
Ternary Operators:
The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark ( ? ), then an expression to execute if the condition is truthy followed by a colon ( : ), and finally the expression to execute if the condition is false.
The ternary operator can be a good replacement for if statements in some cases. It allows you to write concise, cleaner, and easier-to-read lines of code if used well.
ES Modules and Import/Export Syntax:
With ES2015 (ES6), with get built-in support for modules in JavaScript. Like with CommonJS, each file is its own module. To make objects, functions, classes or variables available to the outside world it’s as simple as exporting them and then importing them where needed in other files.
Exporting:
You can export members one by one. What’s not exported won’t be available directly outside the module.
export const myNumbers = [1, 2, 3, 4];
const animals = [‘Panda’, ‘Bear’, ‘Eagle’]; // Not available directly outside the module
export function myLogger() {
console.log(myNumbers, animals);
}
export class Alligator {
constructor() {
// …
}
}
Importing:
Importing is also very straightforward, with the import keyword, members to be imported in curly brackets and then the location of the module relative to the current file.
import { myLogger, Alligator } from ‘app.js’;
So far all the important concepts are covered and these are the necessary JavaScript things to learn react.
FAQ
1. Is JavaScript used for React?
Yes, JavaScript is the main language used with React. React is a JavaScript library, so you need to know JavaScript to work with it. Even if you’re not an expert, having a good grasp of JavaScript basics like variables, functions, arrays, and objects will help a lot when learning React.
2. Can I write JavaScript in React?
Yes, you can write JavaScript inside React code. In fact, React is built in a way that lets you mix HTML-like syntax (called JSX) with JavaScript. You can write functions, use conditions, loop through arrays, and more, all within your React components. For example, you can use JavaScript to show different content based on a condition:
{age >= 18 ? “You can vote” : “You cannot vote”}
So, writing JavaScript in React is not just allowed, it’s expected.
3. How much JavaScript is required for React?
To start with React, you don’t need to know everything about JavaScript, but you should be comfortable with the basics. This includes variables, functions, arrays, and objects. It’s also helpful to learn some newer features like arrow functions, template literals, destructuring, and the import/export syntax. Knowing how promises and async/await work will also come in handy. The better you understand JavaScript, the easier it will be to learn and use React effectively.
“Amit Singh is the Chief Strategy Officer and Chief of Staff to the CEO at Altimetrik, where he drives corporate strategy, growth acceleration, and value creation through transformation initiatives. In this dual role, he partners closely with leadership teams, investors, and the board to align business strategy with sustained, technology-driven growth.
With over two decades of experience at the intersection of technology, business, and transformation, Amit brings a unique perspective on how organizations can innovate and adapt in a rapidly evolving digital landscape. His career has been defined by building high-performing teams, scaling innovative platforms, and driving organizational change to deliver lasting impact.
Before joining Altimetrik, Amit held senior leadership roles at Visa, where he led technology strategy, engineering, and product development for Real-Time Payments and the Visa Developer Platform. Earlier, he served as Chief Product Officer at a startup and spent more than a decade at Oracle, leading product and engineering teams across a wide range of enterprise software applications.”
Our expertise
Before we proceed..
Altimetrik is committed to protecting your personal information. To apply for a position, you will need to provide your email address and create a login. Your information will be used in accordance with applicable data privacy laws, our Privacy Policy, and our Privacy Notice.
