【React】JSX的基本使用 、为什么React脚手架内可以使用JSX

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

没有子节点的标签可以 /> 结束
 

猜你喜欢

转载自blog.csdn.net/m0_64494670/article/details/129293189