Before we dive into the generated code, let's talk about the technical stack. We looked at React in Chapter 2, Getting Started with JHipster, but let's recap. 

React is a view rendering library that was 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 in HTML approach, 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, are renamed to className, and attribute names are written using camelCase rather than dash-case.

For example, the following is a JSX snippet. You always 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 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 fast and efficient.

React components can have their own state and you can pass various properties to a component, all of 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 such as state management, and routing.