UI = f(state): the same function, different data
Battery is a function from a number to a picture. Change a level and only that battery changes.
React is a JavaScript library for building user interfaces: you describe what the screen should look like for the current data, and React updates the real page for you whenever that data changes.
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.
Add a Reset button to the React counter that sets the count back to 0.
Write a Battery usage that shows a battery at 25%. What colour is it?
Explain it without notes
What problem does React solve that plain DOM code makes hard?
Explain the difference between imperative and declarative UI code with an example.
What does "UI = f(state)" mean?
Is React a library or a framework? What's the difference?
Preview
Console
Nothing logged yet.