Before we dive into the generated code, let's talk about the technical stack. We already looked at React in Chapter 2, Getting Started with JHipster, but let's recap.
React is a view rendering library created by Jordan Walke in 2011, and was open sourced in May 2013. It is maintained and backed by Facebook and has a huge community behind it. React follows the JS approach for HTML, where the markup code is written using JavaScript. To reduce verbosity, React uses a syntax sugar for Javascript called JSX (https://reactjs.org/docs/introducing-jsx.html) to describe view elements. It looks similar to HTML, but it is not exactly HTML as some of the standard HTML attributes such as class, for example, is renamed to className, and attribute names are written using camelCase rather than dash-case.
For example, the following is a JSX snippet. You always need to have to use React in context for JSX to work:
const element = <div><strong>Hello there</strong></div>
When it comes to TypeScript, the JSX extension becomes TSX.
React uses a concept called Virtual DOM to improve the rendering efficiency. Virtual DOM is a lightweight copy of the actual DOM, and by comparing the virtual DOM after an update against the virtual DOM snapshot before the update, React can decide what exactly changed and render only that on to the actual DOM, hence making render cycles efficient and fast.
React components can have their own state and you can pass properties to a component, which are available to the component as props.
Unlike Angular, React is not a full-fledged MVVM framework. It is just a view rendering library and hence when building React applications, we would always have to add a few more libraries for things like state management, routing, and so on.