JSX的基本使用
createElement()的问题
- 使用 createElement() 方法创建 react 元素,繁琐不简洁
- 不直观,无法一眼看出所描述的结构,代码可读性较差
- 不优雅,用户体验很差
JSX简介
JSX 是 JavaScript 的简写,表示在 JavaScript 代码中写 XML(HTML) 格式的代码
优势: 声明式语法更加直观,与 HTML 结构相同,降低了学习成本,提升开发效率
JSX 是 react 的核心内容
使用步骤
1. 使用 JSX 语法创建 react 元素
// 使用 JSX 语法创建 react 元素
const title = <h1>Hello JSX</h1>
2. 使用 React DOM,render() 方法渲染 react 元素到页面中
// 渲染创建好的 React 元素
ReactDOM.render(title, root)
小结
-
推荐使用 JSX 语法创建 React 元素
-
写 JSX 就跟写 HTML 一样,更加直观,友好
-
JSX 语法更能体现 React 的声明式特点(描述UI长什么样子)
-
使用步骤:
// 使用 JSX 创建 React 元素
const title = <h1>Hello JSX <span>这是span</span></h1>
// 渲染 React 元素
ReactDOM.render(title, document.getElementById('root'))
注意点
- React元素的属性名使用驼峰命名法
- 特殊属性名: class => className, for => htmlFor, tabindex => tabIndex
- 没有子节点的React元素可以用 /> 结束
- 推荐: 使用小括号包裹JSX,从而避免JS中的自动插入分号陷阱
// 导入 react
import React from 'react'
import ReactDOM from 'react-dom'
// 使用 JSX 创建 React 元素
const title = <h1 className="title">Hello JSX <span/></h1>
// 渲染 React 元素
ReactDOM.render(title, document.getElementById('root'))
// 使用小括号包裹JSX
const dv = (
<div>Hello JSX</div>
)