react JXL介绍、JXL基本使用

 

目录

 

一 关于JXL

1.1 JXL简介

1.2 为什么要用JXL?

1.3 JXL优点

二 使用JXL

2.1 使用步骤

 2.2 JXL使用注意点

---

一 关于JXL

1.1 JXL简介

JXL:javaScipt xml的简写, 在javaScipt中写xml(html)格式的代码
JXL 是 react的核心内容

1.2 为什么要用JXL?

因为React.createElement有下面的问题
1 繁琐、不简洁
2 不直观、无法一眼看出描述的结构
3 不优雅,用户体验不爽

1.3 JXL优点

1 声明式的语法更加直观
2 与html结构相同,降低了学习成本
3 提升开发效率

二 使用JXL

2.1 使用步骤

1 使用jxl语法创建react元素
2 使用ReactDOM.render渲染

src-index.js

//导入react
import React from "react";
import ReactDOM from "react-dom";

//1 使用jxl创建react元素

const title = <h1> hello jsx<span>你好</span></h1>

//2 渲染react
//参数1:要渲染的元素  参数2:要渲染到哪里去(挂载点)
ReactDOM.render(title,document.getElementById("root"));

public-index.html

预览

为什么在脚手架中可以使用JXL语法?
答:脚手架中有 babel 来编译处理

 

 
2.2 JXL使用注意点

1 react元素的属性名使用 驼峰命名法
2 注意特殊属性名
class → className
for → htmlFor
tabindex → tableIndex

示例:

 应修改成下面的

3 没有子节点的react元素可以使用单标签结束/>

4 推荐使用()包裹JXL