What used to be rendered on the server using a template language (here moustache)…
The majority of the content of this file is keywords and software development notions (module, object, function, point dereference…).
Using ES6 syntactic sugars and react functional component we can greatly reduce this noise.
What happened here? Technically speaking, we export as default an arrow function that destructures its only argument (props) and returns some JSX. The result is a much more simple syntax closer to a template.
But does this scale?
The benefit of this notation is that we get a declarative block at the top of the file that lists the needed properties and a template block at the bottom that uses the properties.