In modern React applications, state is usually managed using hooks. One of the basic hooks, useState, allows you to declare a component-scoped variable, which re-renders the component every time its value gets changed. Here's a basic counter example:
In React, the only things that should affect what component shows are its props and state. So, in order to make component update data when a certain game event happens, you need to make event listener update component's state.
Since we can update component state only within the component itself, we also have to put our GameEvents.Subscribe call inside the component. However you can't register it in the render function itself, because it gets executed more often than we need to, since we need to register our listener only when the component gets mounted for the first time. That's when we have to use another builtin hook - useEffect.
useEffect hook is a function that usually gets called with 2 parameters. First one is the callback we want to execute, which would register our listener. The second is the list of state variable that our . Since we don't use any state for our listener, we can just use an empty array (). Also, optionally our callback can return a cleanup function, which is called either when one of dependencies changes, or when component gets unmounted.
This tutorial have covered only basics of React. React has a large ecosystem of libraries, patterns and articles, lots of which would apply to Panorama. As a starting point you can check out the official React website (although some parts of it are a littleoutdated).