Why should you care?

Every React tutorial and job interview assumes you know these basics. They make components shorter and easier to read.

See it live — copy this example

Paste into src/App.jsx (or the file noted in the steps). Save and watch the browser update.

const user = { name: 'Asha', role: 'admin' };
const { name, role } = user;

const greet = (n) => `Hello, ${n}`;

const more = { ...user, role: 'editor' };

console.log(greet(name));
console.log(more);

Run Example »

Edit the code and click Run to see the result update live.

What happened?

• Destructuring pulls fields from objects.
• Arrow functions define components and handlers.
• Spread copies objects when updating state immutably.

Try it yourself

1. Practice destructuring props: function Card({ title, price }) { ... }
2. Use import/export between files.
3. Replace .then() chains with async/await in fetch examples.
4. Change text or labels in the example and save — watch the browser update.
5. Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

Know: const, arrow functions, destructuring, spread, import/export, async/await. React components are just JavaScript functions.