Writing a Function Component

React components and dynamic HTML rendering

The function, representing a component, defines what to update on the screen. It returns a value composed of some HTML-like code. We must be quite familiar with elements such as <ul> and <li>; React also allows the addition of JavaScript expressions within these elements. When used together, it requires the JavaScript expression to be wrapped in a pair of brackets, {}. The job of this expression is to provide dynamic HTML content.

For instance, if we have a text variable and would like to display it, we could do the following: