Writing a function component
The function, representing a component, defines what to update on the screen. It returns a value composed of some HTML-like code. You should be quite familiar with elements such as <ul> and <li>; React also allows the addition of JavaScript expressions under 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:
const Title = () => {
const text = "Hello World1"
return <h1>{text}</h1>
}
Or, if the text is returned from a function, we can do the following:
const Title = () => {
const fn = () => "Hello World"
return <h1>{fn()}</h1>
}
We know that this JavaScript expression is filled in the location where the children...
