Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Natalie Cluer
Natalie Cluer
18,893 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,392 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

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

Can you post your code here?