Usually React is used for building websites and web applications, but
react-panorama allows you to use the power of React in Dota 2.
Alternatively, if you want to configure build tools yourself, or you want to use it without any build steps (UMD), you can check out
react-panorama installation guide.
Here's a basic hello-world application built with React:
The first parameter that gets passed to the
For more information about JSX you can check out official React documentation.
Instead of having all your UI in a monolithic XML file, React encourages you to split functionality into small building blocks - components.
In React, components are simple functions that return JSX:
Components can accept parameters as a function argument:
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:
Similarly, you can use
useState to bind state to input elements:
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 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.
react-panorama provides a custom hook that makes listening to game events a little easier:
Just like that, you can listen to UI events, custom net table updates, or just time passing.
react-panorama provides a few more custom hooks for common use cases.
One of things that React Hooks make easier is code reuse. For example, we can extract logic used to listen to KDA changes into a custom
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 little outdated).