Video Tutorial: Building a React App - pt3: Code Components
In the previous part of this tutorial we have converted an existing HTML page into a React app, but we have not seen much interactivity so far. In this new chapter we start exploring one of the most interesting React features, the components.
Let's Build Something Dynamic
We are going to create our first React component, a powerful beast, not easy to tame, so let's proceed gradually. The newly created component will look pretty useless at first, but we will refine it, step by step, and make it more powerful and efficient.
The list of speakers in our example page is a good candidate to be turned into a component, because it has a repetitive structure. So let's start with creating the component; we just take a new document and save it as a JavaScript file in the src folder (everything we do in React must be stored in this folder); in this document we use a standard structure (the only thing that changes is the name, SpeakerList in our case).
Inside the return() statement, we put the HTML code we want to be generated by the component. Save the file and import it into the React app using an import instruction, as we did before with the CSS files: import SpeakerList from './SpeakerList'. Note that you don't need to put the .js extension in the path.
Now that the app includes the component, we can replace the corresponding HTML code with a call that inserts the component into the markup: <SpeakerList /> (don't forget to close the tag). If the page in your browser does not change (and you don't get an error), don't worry, the component has successfully replaced the former HTML markup; although still the result does not seem so exciting, because it doesn't differ from what we've seen before. However, this step is just a preliminary one; we now have a component that delivers static HTML markup, but we can use JavaScript to have it generate the markup programmatically instead.
The Component Starts Evolving
So let's move a bit further and get rid of those ugly HTML tags. We can organize the component as if it were a JavaScript object, and through the use of props (a way to transfer properties to the children of an object), we can also set the component's arguments. Therefore, we move back to the .js file and replace the content of the HTML tags we want to change with this.props.name_of_the_property. We freely choose the names of the properties, and use these names inside the component in the React app. So, assuming that we want to change the name of each speaker, in the component file <p class="speaker-name">Slim Shady</p> becomes <p className="speaker-name">{this.props.name}</p>, and in the app page <SpeakerList /> becomes <SpeakerList name="Name of the new speaker" />. We can provide as many arguments to the component as we want, e.g. topic, picture, description and, instead of writing this.props.name, this.props.picture and this.props.description, we can use a more handy shortcut. In the component file, inside the render() statement, we write var {name, picture, description} = this.props; and instead of <p class="speaker-name">{this.props.name}</p> we can just code <p class="speaker-name">{name}</p>.
Our page has become a bit more dynamic now, but, again, this is just an introduction to the possibilities of React components. The picture will look more interesting when we import external data. So, we hope you're looking forward to the next chapter.
