- Objective:
- Breadcrumb:
# 概念阐释
和HTML一样，JSX可以在元素内添加属性。
```jsx
const title = <h1 id='title'>Introduction to React.js: Part I</h1>;
```
# 实例
```jsx
const p1 = <p id='big'> big </p>;
const p2 = <p id='small'> small </p>;
```
# 相关内容
在JSX中，属性`class`要被写成`className`，这是因为在JS中有class类，因此会报错。
```jsx
import React from 'react';
import { createRoot } from 'react-dom/client'
const container = document.getElementById('app');
const root = createRoot(container);
// Write code here:
const myDiv = <div className='big'>I AM A BIG DIV</div>;
root.render(myDiv);
```
# 参考资料
- [Attributes In JSX](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-jsx-752c2293-9f61-412a-92e2-70ad6e01a0a7/lessons/react-jsx-intro/exercises/attributes-in-jsx)
- [class vs className](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-jsx-752c2293-9f61-412a-92e2-70ad6e01a0a7/lessons/react-jsx-advanced/exercises/jsx-classname-class)