JSX的基本使用
(1) JSX产生的原因
由于通过createElement() 方法创建 React元素有一些问题,代码比较繁琐,结构不够直观 无法一眼看出描述的结构 , 不优雅 ,用于体验不好
(2)JSX介绍
JSX是 javascript的简写 , 表示在 javascript 代码找那个写 xml html等格式代码
优势: 声明式语法更直观 提升了开发效率
(3)JSX语法使用
使用jsx语法创建react元素 ,然后使用ReactDOM渲染元素
let h1 = <h1>我是通过JSX创建的元素</h1>
ReactDOM.render(h1,document.getElementById('root'))
总结:
写JSX就跟写html一样 更直观 友好
JSX语法更能体验React的声明式特点
为什么React脚手架内可以使用JSX
说明:
JSX是ECMAscript的语法扩展
需要使用bale编译处理后 ,才能在浏览器环境内使用
create-react-app 脚手架已经默认有这个配置 不用手动配置
编译JSX语法的包: @bable/preset-react
注意:
React元素的属性名使用驼峰命名法
html 与 JSX属性名对比:
class -> className , for -> htmlFor , tabindex -> tabindex
没有子节点的标签可以 /> 结束