Video Tutorial: Building a React App - pt5: Working with External Data

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.


Replacing hard-coded with generated markup

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:

[
  {
    "name": "Walter White",
    "image": "walter-white",
    "topic": "Corporate branding as a key factor",
  },

  {
    …
  },
]

This is remarkably clear and understandable, something that helped make this format very popular. 

Importing and rendering the data

We start with importing the JSON file into the HEAD of the document. In the App.js (which looks like an HTML page, though it’s actually a JavaScript file), our goal is to replace the hard-coded values of the props with those in the JSON file;  the first part of an attribute definition corresponds to the name of the prop and the second is its value. We perform this replacement operation by means of the JavaScript .map method; it iterates through the elements of an array (of speaker objects in the JSON file, in our case), calling a function for each of them.

{

	speakers.map((speakers, i) => 

<SpeakerList name={speakers.name}  image={speakers.image}  topic={speakers.topic} key={i} />

)

}

The i parameter should be familiar to everyone with a little experience in JavaScript or any other programming language; it's the control variable of the loop and contains the index of the respective speaker object. The key parameter is needed by React to create unique IDs for DOM elements.

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.