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 trialNatalie Cluer
18,898 Pointsclass vs className
In the video, Guil changes the instances of class
to className
in the jsx so that his app looks the way he styled it in the browser. But on my computer I hadn't changed class
to className
and my app looked the way it should. Any possible reason for this? When I changed class
to className
it actually broke the layout
2 Answers
Seth Kroger
56,413 Pointsclass
is a reserved word in JavaScript, i.e., it's a word that forms a statement such as if
, let
, or for
. Since JSX lets you use JavaScript expressions inside using class
for an HTML class would cause it to be misinterpreted as the start of a class statement. JSX instead uses className
to avoid that and if the file is properly run though the Babel's JSX compiler (which webpack should do for you automatically) there shouldn't be an issue.
Thomas Gauperaa
3,584 PointsCan you post your code here?
Oziel Perez
61,321 PointsOziel Perez
61,321 PointsNote: class was added as a keyword in ES6, but many browsers haven't implemented this yet, hence why react is usually configured to be transpiled by babel through webpack