- Objective:
- Breadcrumb:
# 概念阐释
JSX的基本单位叫JSX 元素。它和HTML元素看起来一模一样，唯一区别是它会出现在JS文件中。
```jsx
<h1>Hello world</h1>
```
# 实例
```jsx
const navBar = <nav> I am a nav bar </nav>;
```
```jsx
const myTeam = {
center: <li>Benzo Walli</li>,
powerForward: <li>Rasha Loa</li>,
smallForward: <li>Tayshaun Dasmoto</li>,
shootingGuard: <li>Colmar Cumberbatch</li>,
pointGuard: <li>Femi Billon</li>
};
```
# 相关内容
在JSX中，opening tag例如`<br>` `<img>`必须写上closing tag
```jsx
const profile = (
<div>
<h1>John Smith</h1>
<img src="images/john.png" />
<article>
My name is John Smith.
<br />
I am a software developer.
<br />
I specialize in creating React applications.
</article>
</div>
);
```
# 参考资料
- [JSX Elements And Their Surroundings](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/jsx-elements-and-surroundings)
- [Self-Closing Tags](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/self-closing-tags)