In the previous part of this tutorial we explored components: the distinctive React feature. We did no magic because we wanted to focus on the basic structure of components, but now the time has come to explore the advantages of generating code employing external data.
We left our speakers' list, the portion of markup that we chose to be generated by a component, coded in a dry and efficient manner, but with most of the markup still hard-coded. Clearly, adding sophisticated infrastructure like React to a standard HTML project should bring enough advantages to justify that choice. Until now, we didn't have enough of them, so let's move on to a more promising feature: importing the speaker data and using it to generate, instead of hard-coding, the markup of the speakers' list. The chosen data format is JSON, a language-independent format for specifying attributes and their values. The structure of our JSON file looks something like this:
This is remarkably clear and understandable, something that helped make this format very popular.
This piece of code is to replace the markup we took down before. The advantages of this approach are pretty clear: now we can add or remove any number of speakers, just by modifying an easy-to-read JSON file (that, by the way, can be generated automatically by various programs)
That was the last part of Scrivito's introduction to React. We started from the installation process and progressed through components and external data sources in order to make our website less hard-coded, but dry and efficient instead. The story does not end here; there's still much more to explore about React and, now that we have a more dynamic and efficient website, the next step will be to extend its possibilities.
As the official guide says, ‘Thinking in React’ is a new approach to designing web interfaces. May not be easy to learn at first, but it's more focused and simpler than other solutions such as Angular or Ember and, due to its rational approach, it attracts more and more enthusiastic developers.