The JavaScript you'll use in every component
React is plain modern JavaScript plus JSX, so you need a handful of JavaScript features (arrow functions, destructuring, spread, map and filter, modules, ternaries, promises), Node.js with npm, an editor and React DevTools.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Use destructuring to read title and year from const film = { title: "Lagaan", year: 2001 } and log Lagaan (2001).
Given const nums = [1, 2, 3, 4], make a new array with only the even numbers doubled, without changing nums.
Explain it without notes
Why does React code use destructuring so much? Give two examples.
Why do React developers copy arrays and objects with spread instead of changing them?
What do Node.js and npm do in a React project?
Console
(nothing was printed)Expected console output
[ 'HTML', 'CSS' ] [ 'HTML', 'CSS', 'React' ]
[ 'HTML', 'CSS', 'REACT' ]
[ 'HTML', 'React' ]
Asha is busy
Asha -> Asha K.