React—JXS语法

大家好，欢迎来到IT知识分享网。

1.createElement()问题

2.JSX简介

JSX是JavaScript XML的简写，表示在JavaScript代码中写XML ( HTML）格式的代码。

优势:声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率

3. 使用步骤

1.使用JSX语法创建react元素

 2.使用ReactDOM.render()方法渲染react元素到页面中

 在index.js中书写下面代码：

//1.导入react import React from 'react' import ReactDOM from 'react-dom' //2.使用JXS创建react元素 const title = <h1> 标题 <span>这是span标签</span></h1> //3.渲染react元素 ReactDOM.render(title, document.getElementById('root'))

4.小结

 5.为什么脚手架可以使用JSX语法？

1.JSX不是标准的ECMAScript语法，它是ECMAScript的语法扩展。
2.需要使用babel编译处理后，才能在浏览器环境中使用。
3. create-react-app脚手架中已经默认有该配置，无需手动配置。
4.编译JSX语法的包为:@babel/preset-react。
 

6.注意点

1. React元素的属性名使用驼峰命名法
2．特殊属性名: class -> className、for -> htmlFor、tabindex -> tablndex 。

const title = <h1 className='titlt'> 标题 </h1>

3．没有子节点的React元素可以用/>结束。

const title = <h1 />

4．推荐:使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱。

7.在JSX中使用JavaScript表达式

1.嵌入JS表达式

案例：

//1.导入react import React from 'react' import ReactDOM from 'react-dom' //2.使用JXS创建react元素 const name = "hsq" const title = <h1>名字:{name}</h1> //3.渲染react元素 ReactDOM.render(title, document.getElementById('root'))

 2.注意点：

单大括号中可以使用任意的JavaScript表达式

注意:不能在{}中出现语句(比如: if/for等)

例子：

//1.导入react import React from 'react' import ReactDOM from 'react-dom' // 函数表达式 const dv = <div>我是一个div</div> const sayHi = () => 'Hi' const obj = { a: '这是对象属性' } const arr = ['数组内容'] const title = <h1> <p>{1}</p> <p>{'a'}</p> <p>{1 + 7}</p> <p>{3 > 5 ? '大于' : '小于等于'}</p> <p>{obj.a}</p> <p>{arr[0]}</p> <p>{sayHi()}</p> {/* 错误演示 */} {/* <p>{ 
  { a: '对象' }}</p> */} {/* {if(true){ }} */} {/* {for(let i=0;i<10;i++){}} */} {dv} </h1> //3.渲染react元素 ReactDOM.render(title, document.getElementById('root'))

 8.JXS的条件渲染

9.JXS的列表渲染 

如果要渲染一组数据，应该使用数组的map()方法
注意︰渲染列表时应该添加key属性，key 属性的值要保证唯一

原则: map()遍历谁，就给谁添加key属性

 10.JSX的样式处理

1.行内样式—style

2.类名—className(推荐) 

 11.总结

1.JSX是React的核心内容。
2.JSX表示在JS代码中写HTML结构，是React声明式的体现。
3.使用JSX配合嵌入的JS表达式、条件渲染、列表渲染，可以描述任意UI
结构。

4．推荐使用className 的方式给JSX添加样式。
5. React完全利用JS语言自身的能力来编写Ul，而不是造轮子增强HTML 功
能。