React中的JSX

JSX的基本使用

createElement()的问题

1. 使用 createElement() 方法创建 react 元素,繁琐不简洁
2. 不直观,无法一眼看出所描述的结构,代码可读性较差
3. 不优雅,用户体验很差

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)

小结

1. 推荐使用 JSX 语法创建 React 元素

2. 写 JSX 就跟写 HTML 一样,更加直观,友好

3. JSX 语法更能体现 React 的声明式特点(描述UI长什么样子)

4. 使用步骤:

// 使用 JSX 创建 React 元素
const title = <h1>Hello JSX <span>这是span</span></h1>

// 渲染 React 元素
ReactDOM.render(title, document.getElementById('root'))

注意点

1. React元素的属性名使用驼峰命名法
2. 特殊属性名: class => className, for => htmlFor, tabindex => tabIndex
3. 没有子节点的React元素可以用 /> 结束
4. 推荐: 使用小括号包裹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>
)