I am about half-way through Zac Gordon’s book React Explained. I read most of it on the plane back from Europe and didn’t do the exercises. A couple weeks ago I finally circled back to the exercises.
For the JSX exercise #3 we are asked to create a Header component with a header element and the two earlier used example inside of it.
When I tried to run my code, every browser would choke and the computer freeze. I was quite stumped. I couldn’t figure it out. I gave up and watch Zac’s video and before he got to the spot it already dawn on me that Capitalization is a feature of JSX and React.
When I first wrote my code it wasn’t clear to me the distinction between Header the component and <header/> the element. I had both capitalized and sent the browser into an endless loop fast, with self referencing component calls.
Here is the correct code. Capital H for the component. Small h for the header element.
function Header() {
return(
<header id="main">
{h1LinkEl}
{pEl}
</header>
);
}Then we can call it in the render function
ReactDOM.render(
<Header/>,
document.getElementById('root')
);
