Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialTadjiev Codes
9,626 PointsDear folks, I'm having trouble understanding why my App Component doesn't get rendered on the browser?
Dear folks,
I'm having trouble understanding why my App Component doesn't get rendered on the browser?
The link for the workspace: https://w.trhou.se/x0j4u30k4k
Although, when I render the Player Component, it actually does work.
Thanks in advance)
2 Answers
Simon Coates
8,377 Pointsi had a look. I got something on screen once I reintroduced the commented out variables, altered the declaration of header (to include ()=>) and removed a // comment in favor of {/* */}
const desc = 'I just learned how to create a React node and render it into the DOM.';
const myTitleID = 'main-title';
const name = 'Guil';
const Header =()=>(
<header>
<h1 id={myTitleID}>{ name }'s First React Element!</h1>
<p className="main-desc">{ desc }</p>
</header>
);
const Player = () => {
return(
<div className = "player">
<span className = "player-name">
Guil
</span>
{/* We're calling as if the Counter Component here and that's called Composition*/}
<Counter />
</div>
);
}
const Counter = () => {
// retrun keyword within to hold our JSX
return(
<div className="counter">
<button className="counter-action decrement"> - </button>
<span className="counter-score">35</span>
<button className="counter-actiion increment"> + </button>
</div>
);
}
const App = () => {
return(
// A self closing Header tag to call that Header elemnent through composition method
<div className="scoreboard">
<Header />
{/* Players list */}
<Player />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
Tadjiev Codes
9,626 PointsAlright, thanks. I thought at first maybe it didn't work cuz of those variables but the problem was with the comment kind of
Tadjiev Codes
9,626 PointsAnd the ()=> arrow function symbols seem to be forgotten as well in that component
Simon Coates
8,377 PointsSimon Coates
8,377 PointsAs state, there were 3 problems. The comment thing was kinda trivial. The initial one was an exception due to referencing variables that you'd commented out. The second was the arrow function thing being missing on header. Babel seems to compile it, but it produces a React element, rather than the function to create that element. So it crashes slightly later and with an error message in the browser console that is much less clear.