Building a ReactJS dashboard
The ReactJS framework implements its abstraction of the DOM, and makes all the event machinery fast and efficient. Creating a UI using ReactJS consists of creating some classes with a few methods, which are called by the engine when the page is created or updated.
This approach means that you do not have to worry about what will happen when the DOM changes anymore. All you have to do is implement some methods, and let React take care of the rest.
Implementing classes for React can be done in JavaScript or JSX. We will discuss about it in the next section.
The JSX syntax
The JSX syntax extension (https://facebook.github.io/jsx/) adds XML tags to JS, and can be used by tools like ReactJS when the rendering of the page happens. It is promoted by the ReactJS community as the best way to write React apps.
In the following example, a <script>
section contains a div
variable whose value is an XML tree representing a div
. This syntax is valid JSX. From there, the ReactDOM...