React JavaScript Prerequisites

Before you write a single line of React, you need a solid grip on certain JavaScript concepts. React builds on top of JavaScript — it does not replace it. If these fundamentals feel shaky, React will feel confusing fast. Think of this topic as gathering your tools before starting a construction project.

Why JavaScript Matters in React

React is a JavaScript library. Every component you write, every state update you trigger, and every event you handle is plain JavaScript underneath. The better your JavaScript, the easier React becomes.

Variables: let and const

React code uses let and const almost everywhere. Use const when the variable value will not change. Use let when it might change.

const name = "Alice";   // will not change
let score = 0;          // can change later
score = 10;

Avoid var. It has tricky scoping behavior that causes bugs in React components.

Arrow Functions

Arrow functions are shorter and behave differently with the this keyword compared to regular functions. React uses them constantly — in event handlers, in map() calls, and in hooks.

// Regular function
function greet(name) {
  return "Hello " + name;
}

// Arrow function (same result)
const greet = (name) => "Hello " + name;

When you see => in React code, that is an arrow function.

Template Literals

Template literals let you embed variables directly inside strings using backticks and ${}.

const user = "Bob";
const message = `Welcome back, ${user}!`;
// Result: "Welcome back, Bob!"

This is much cleaner than joining strings with +.

Destructuring

Destructuring pulls values out of objects or arrays into separate variables. React uses this constantly, especially with props and hooks.

Array Destructuring

const colors = ["red", "green", "blue"];
const [first, second] = colors;
// first = "red", second = "green"

Object Destructuring

const person = { name: "Alice", age: 25 };
const { name, age } = person;
// name = "Alice", age = 25

The useState hook in React returns an array, so you always destructure it:

const [count, setCount] = useState(0);

Spread and Rest Operators

The spread operator (...) copies or merges arrays and objects. It looks like three dots.

Spread Example – Think of it like emptying a bag into a bigger bag

const oldItems = ["pen", "book"];
const newItems = [...oldItems, "laptop"];
// newItems = ["pen", "book", "laptop"]

In React, you use spread to pass all props at once or to copy state without mutating it.

// Copying state safely
const updatedUser = { ...user, age: 26 };

Array Methods: map, filter, and find

These three array methods power most of React's list rendering.

map() – Transform every item in a list

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
// doubled = [2, 4, 6]

filter() – Keep only the items that match a condition

const scores = [55, 80, 90, 40];
const passed = scores.filter(s => s >= 60);
// passed = [80, 90]

find() – Get the first item that matches

const users = [{id: 1, name: "Ali"}, {id: 2, name: "Sam"}];
const found = users.find(u => u.id === 2);
// found = {id: 2, name: "Sam"}

Modules: import and export

React projects split code across many files. You use export to share code from a file and import to bring it into another file.

// greet.js
export const greet = (name) => `Hello, ${name}`;

// App.js
import { greet } from "./greet";
console.log(greet("React"));

Default exports work slightly differently but follow the same idea.

Promises and async/await

When you fetch data from a server, the response takes time. JavaScript uses Promises to handle this wait. React uses async/await inside the useEffect hook when loading data.

// Fetch user data from a server
const getUser = async () => {
  const response = await fetch("https://api.example.com/user/1");
  const data = await response.json();
  console.log(data);
};

Think of await as telling JavaScript: "Wait here until the answer comes back, then continue."

Short-circuit Evaluation and Ternary Operator

React uses these for showing or hiding content inside JSX.

Ternary – A compact if/else

const isLoggedIn = true;
const message = isLoggedIn ? "Welcome!" : "Please log in";

Short-circuit – Show something only if a condition is true

const isAdmin = true;
// Only renders the button if isAdmin is true
{isAdmin && <button>Delete User</button>}

Quick Checklist Before Starting React

• You know how to use const, let, and arrow functions
• You understand destructuring for arrays and objects
• You can use map() and filter() on arrays
• You understand how import and export work
• You have written at least one async/await function

If all five feel comfortable, you are ready to write React with confidence.

Summary

React relies on modern JavaScript features every single day. Arrow functions, destructuring, the spread operator, and array methods like map() appear in almost every React file you will ever read. Spending a day practicing these concepts makes everything in React much easier to follow.