Techie BabajiLearn to Code. Build Real Skills.
React · Getting Started

JavaScript Prerequisites

React code is mostly modern JavaScript. If these eight features feel natural, React will feel easy — if not, they are what makes React look confusing.

Beginner 6 min Lesson 2 of 42 Runnable examplesExamples target React 19 with Vite.
Before you start:Introduction to React
0/42 in React
On this page · 6 min · Beginner

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
6 min
Difficulty
Beginner
Updated
Oct 28, 2026

Related tutorials

Interview questions

Learning objectives#

  • Read arrow functions and destructuring fluently
  • Copy and update arrays and objects with spread
  • Transform lists with map and filter
  • Use import/export, ternaries, && and optional chaining

Explanation#

Arrow functions (x => x * 2) are used for components, event handlers and callbacks everywhere.

Destructuring pulls values out: const { name, price } = product; const [count, setCount] = useState(0);.

Spread creates updated copies without changing the original: { ...user, city: "Pune" }, [...items, newItem]. React state must be updated this way.

map turns data into JSX (products.map(p => <li>{p.name}</li>)); filter removes items (todos.filter(t => !t.done)).

Modules: export default App and import App from "./App". Ternaries (cond ? a : b) and && choose what to render. Optional chaining (user?.address?.city) avoids crashes on missing data.

Code example: Eight features React uses constantly#

JavaScriptEight features React uses constantly Runnable
const products = [
  { id: 1, name: 'Pen', price: 20, stock: 0 },
  { id: 2, name: 'Notebook', price: 60, stock: 12 },
  { id: 3, name: 'Bag', price: 650, stock: 3 },
];


// 1. Arrow functions
const withTax = price => Math.round(price * 1.18);


// 2. Destructuring
const { name, price } = products[1];
console.log(name, withTax(price));


// 3. Spread: copy and change (never mutate state)
const updated = { ...products[0], stock: 5 };
console.log(products[0].stock, updated.stock);


// 4. map: data → display strings (in React: → JSX)
console.log(products.map(p => `${p.name}: ₹${p.price}`));


// 5. filter
const inStock = products.filter(p => p.stock > 0);
console.log(inStock.length);


// 6. Spread to add to a list
const more = [...products, { id: 4, name: 'Ruler', price: 15, stock: 9 }];
console.log(more.length, products.length);


// 7. Ternary and &&
const label = p => (p.stock > 0 ? 'In stock' : 'Sold out');
console.log(label(products[0]), products[2].stock < 5 && 'Hurry!');


// 8. Optional chaining and ??
const user = { name: 'Asha' };
console.log(user.address?.city ?? 'No city');
Expected output
Notebook 71
0 5
[ 'Pen: ₹20', 'Notebook: ₹60', 'Bag: ₹650' ]
2
4 3
Sold out Hurry!
No city
Opens this example in the full playground

Step-by-step explanation#

  1. withTax is an arrow function returning a value without a return keyword.
  2. Destructuring takes name and price out of the second product.
  3. Spreading products[0] creates a new object; the original stock stays 0.
  4. map and filter return new arrays — the original array is untouched.
  5. [...products, x] creates a longer copy; products still has 3 items.
  6. ?. and ?? turn a missing address into a friendly default.

Real-world use case#

A React product list does exactly this: filter the products by search text, map them to <ProductCard> elements, and update the cart with [...cart, item].

Common mistakes#

Mutating instead of copying

products.push(x) or user.city = "Pune" changes the original. In React, always create a new array or object.

Forgetting to return in map

items.map(i => { <li>{i}</li> }) returns undefined. Use parentheses or return.

Confusing default and named exports

export default App → import App. export function Button → import { Button }.

Best practices#

  • Practise map/filter/reduce until they are automatic
  • Prefer const and immutable updates
  • Use optional chaining for API data
  • Keep modules small with clear exports

Remember this#

{ ...obj, key: newValue } and [...arr, item] = copy + change.

map → transform, filter → keep some.

cond ? a : b and cond && a are React’s if-statements.

Practice exercise#

Your task: Given todos = [{ id: 1, text: "Learn JS", done: true }, { id: 2, text: "Learn React", done: false }], create a new array where todo 2 is done, without changing the original, and log the texts of unfinished todos from the original.

Need a hint?
Use map with a ternary: t.id === 2 ? { ...t, done: true } : t.
Show solution
JavaScript Runnable
const todos = [{ id: 1, text: 'Learn JS', done: true }, { id: 2, text: 'Learn React', done: false }];
const updated = todos.map(t => (t.id === 2 ? { ...t, done: true } : t));
console.log(updated[1].done, todos[1].done);                      // true false
console.log(todos.filter(t => !t.done).map(t => t.text));          // [ 'Learn React' ]
Opens this example in the full playground

Mini quiz#

JavaScript Prerequisites quizPredict the output Question 1 of 3

What is logged?

const a = [1, 2];
const b = [...a, 3];
console.log(a.length, b.length);
Score so far: 0/0

Want more? Practise all React MCQs · React interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.