The console shows logs and React's warnings
React's development build checks your code while it runs and prints warnings like this one. You'll learn why lists need keys in Topic 3.3.
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?
Preview
Console
Nothing logged yet.Expected console output
Rendering 2 fruits
Each child in a list should have a unique "key" prop.
Check the render method of `App`. See https://react.dev/link/warning-keys for more information.