> For the complete documentation index, see [llms.txt](https://chrysalis-1.gitbook.io/sei-ga-web-development-notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chrysalis-1.gitbook.io/sei-ga-web-development-notes/react/advanced-jsx.md).

# Class Names

### class vs className

​![](https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJpjNndxxBqo49X5XzFF1%2Fuploads%2FGEhGOE5cQltBnI7LzIRS%2Fimage.png?alt=media\&token=8657f9ce-71bc-4b50-94b2-249d6a50c981)**CODING TIME**

* Create an index.html and index.js file

{% code title="index.html" %}

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>First React</title>
  
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script defer src="index.js"></script>
</head>

<body>
  <h1>First React</h1>
  <div id="root"></div>
</body>
</html>
```

{% endcode %}

{% code title="index.js" %}

```
const rootElement = document.getElementById("root");

const element = <h1>Hello World</h1>
console.log(element);

ReactDOM.render(element, document.getElementById("root"));;
```

{% endcode %}

* Add a `div classname="App"` to the body:

{% code title="index.html" %}

```
<div className="App">
    <h1>Hello CodeSandbox</h1>
    <h2>Start editing to see some magic happen!</h2>
 </div>
```

{% endcode %}

* Check the element in Chrome Developer Tools and you should see the following:

![](https://3269038430-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJpjNndxxBqo49X5XzFF1%2Fuploads%2FCiEWuTJQySKyqchUzzEr%2Fimage.png?alt=media\&token=b3f128ba-f951-4d2e-84c6-81513efeaa15)

* Now let's cut out the whole div class from the HTML file and put it in our js file so it looks like this:

![index.html](https://3269038430-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJpjNndxxBqo49X5XzFF1%2Fuploads%2FFz4ZmxpANfZ09ROMJ4SW%2FScreenshot%202022-01-23%20at%2010.28.59%20PM.png?alt=media\&token=02e3f1bf-f2bc-4819-8f52-8a2b800a582f)

![index.js](https://3269038430-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJpjNndxxBqo49X5XzFF1%2Fuploads%2FK1wBAZ8xLQqEkxL0PGGL%2FScreenshot%202022-01-23%20at%2010.29.25%20PM.png?alt=media\&token=82fd5508-aaf4-49d0-afd1-9bcd8ee25407)

Take a look at your browser and inspect it. You should see something like this:

![](https://3269038430-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJpjNndxxBqo49X5XzFF1%2Fuploads%2F1tRmbr9XJ45VPu8Iqzjn%2FScreenshot%202022-01-23%20at%2010.26.30%20PM.png?alt=media\&token=40730e6c-42a5-4bb0-badc-6e047bc1f6ce)

#### **🏆CODING TIME COMPLETED**

Did you notice that it changed `div classname` to `div class`? Grammar in JSX is mostly the same as HTML with some slight differences.

In HTML, we use class as an attribute name:

```
<h1 class="big">Hello</h1>
```

In JSX, we use className instead:

```
<h1 className="big">Hello</h1>
```

This is because JSX is translated into JS and class is a reserved word in JS. When JSX is rendered, JSX `className` attributes are rendered as `class` attributes.

Example of a code which uses className:

```
import React from 'react';
import ReactDOM from 'react-dom';

const myDiv = (
  <div className="big">
    I AM A BIG DIV
  </div>
);

ReactDOM.render(myDiv, document.getElementById('app'))
```