Dynamic User Interfaces in React

Dynamic User Interfaces shows how a React app reacts to the user: handling events, showing different content based on a condition, and rendering lists of data.

What each lesson covers:

• Event Handling: Event handlers, synthetic events and the event object, click, mouse and keyboard events, passing values to handlers, typing handlers in TypeScript, preventDefault and event propagation.
• Conditional Rendering: if statements, the ternary operator, the && operator, rendering based on state, and showing loading and error states.
• List Rendering: Rendering lists with map(), showing arrays of objects, filtering, what keys are and why they matter, and nested lists.

By the end of the chapter you can build screens that change as the user clicks, types and filters.

Every page runs real React in your browser. Edit the code and see the result next to it. Each lesson ends with exercises that check what your app shows, not how your code is written.

Lessons in this section

1. Event Handling

   Events and event handlers, synthetic events and the event object, click, mouse and keyboard events, passing values to handlers, typing handlers, preventDefault and event propagation.

2. Conditional Rendering

   Showing different things based on a condition: if statements, the ternary operator, the && operator, rendering based on state, and loading and error states.

3. List Rendering

   Rendering lists with map(), showing arrays of objects, filtering, what keys are and why they matter, and nested lists.