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 trial

JavaScript React by Example Setting up With Create React App Setting up the Project

Natalie Cluer
Natalie Cluer
18,898 Points
Posted by Natalie Cluer
Natalie Cluer
18,898 Points

class 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
Seth Kroger
56,414 Points
Seth Kroger
Seth Kroger
56,414 Points

class 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.

Oziel Perez
Oziel Perez
61,321 Points
Oziel Perez
Oziel Perez
61,321 Points

Note: 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

Thomas Gauperaa
Thomas Gauperaa
3,584 Points
Thomas Gauperaa
Thomas Gauperaa
3,584 Points

Can you post your code here?