JSX是JavaScript的语法扩展，它不是字符串，也不是HTML。JSX可以很好地描述UI交互的本质形式，它具备JavaScript的所有功能。JSX可以生成React“元素”。基本上使用\src\index.jsimportReactfrom'react'importReactDomfrom'react-dom'//看起来是HTML，其实是JSXconsttitle=

HelloReact

//调用ReactDom.render方法，传入jsx和nodes对象ReactDom.render(title,document.getElementById('root'))在使用JSX时可以按照HTML的规则简单直接使用（需要注意不是html），所以当有多行代码时，需要用Brackets()换行。importReactfrom'react'importReactDomfrom'react-dom'//用小括号包裹jsx，可以换行，代码更整洁consttitle=()ReactDom.render(title,document.getElementById('root'))设置VSCode编辑器允许JSX代码补全：File--Preferences--Settings--UserSettings添加“emmet.includeLanguages”在UserSettings:{"javascript":"javascriptreact"}如下图所示：JSXexpression如前所述，JSX具有JavaScript的所有功能，具体使用时可以直接套用HTML的规则。也就是说，如何在HTML规则中展现JS的能力呢？先从一个简单的套路开始，在JSX中可以完成：动态显示数据{}调用方式：自定义+内置支持表达式，支持三元表达式类型模板字符串接下来开始吧：importReactfrom'react';importReactDOMfrom'react-dom';constname='西陵老师'functionsayHello(){return'大家好'}constobj={name:'刘备',age:100}constflag=true//请开始表演====consttitle=(

嘿嘿

)//JSX本身也是一个值，可以直接吃constApp=()ReactDOM.render(App,document.getElementById('root'));JSX本身就是一个表达式JSX添加属性：字符串属性，直接用双引号把动态属性包起来，不用双引号，直接用{}class={xxx}JSX添加子元素JSX只有一个每个父元素单标签必须关闭//01jsx本身就是一个表达式constnames=

西陵老师

//02添加属性constage=99//03jsx添加子元素（JSX只有一个父元素）//04单个标签必须关闭//ComponentfunctionApp(){return(//返回中只能有一个JSX块//

//错误);}exportdefaultApp;最后，JSX最好用小括号()包裹事件绑定事件处理函数和事件绑定//事件处理函数constevent1=function(){alert('HeyReact')}functionApp(){return()}exportdefaultApp事件参数传递事件处理函数和事件绑定因为事件绑定需要自己接收函数，作为事件处理不能直接调用。//事件参数constevent1=function(name,age){alert(name)alert(age)}functionApp(){return()}exportdefaultApp，所以需要用箭头functiontoreturnaneventwhenpassingparameters处理函数不应该是函数调用，或者使用bind等方法将函数本身作为返回值传入。还是那句话，JSX是JS的扩展，也就是JS。事件对象传参01函数不传参：默认传入事件对象，所以在事件处理函数中可以直接接收形参。02箭头函数参数传递：因为默认传入的是事件对象，所以在使用箭头函数时，需要在箭头函数中传入，然后在箭头函数返回的函数中传入。03bind等方法：传入函数本身作为返回值，默认会在最后一个参数中加入事件对象。不管有没有传入参数，事件对象都不用写，事件处理函数按顺序接收即可。//事件对象传参constevent1=function(ev){console.log(ev);}functionApp(){return()}exportdefaultApp列表渲染JSX默认会构造数组，所以在JSX中可以直接显示数组的值。constitem1=[1,3,5]functionApp(){return()}exportdefaultApp是同样，如果数组元素值也是JSX，也可以直接使用。constitem1=[1,3,5]constitem2=[

item1

,

item1

,

item1

]functionApp(){return()}exportdefaultApp在项目中，获取的数组元素大部分是对象数据。要显示结构，需要在使用前循环数组。//数组数据constarr=[{id:1,name:'绝对痴情'},{id:2,name:'像我这样的人'},{id:3,name:'南山南'}]//===Datatraversal===functionloops(){vara2=[]//遍历数据for(vari=0;i{arr[i].name})}returna2}functionApp(){return(

{/*调用遍历函数获取JSX数组显示*/}{loops()}

)}exportdefaultApp不推荐使用，太麻烦了。不过基本思路还是一样的，因为JSX可以自动构造数组结构，我们只需要遍历JSX数据形式的数据即可，所以可以选择更优雅的遍历方式map()函数。//数组数据constarr=[{id:1,name:'绝对痴情'},{id:2,name:'像我这样的帅哥'},{id:3,name:'南山难'}]functionApp(){return(

{/*map方法遍历数组*/}{arr.map(item=>

{item.id}--{item.name}

)}

)}exportdefaultAppstylesettinginlinestyle样式需要以对象的形式显示：//声明样式对象conststyles={color:'red',//需要处理的样式的属性名,or//font-size:'20px',//直接使用报错fontSize:'30px',//转为大写√'background-color':'pink'//用引号包裹√}functionApp(){return(

{/*内联样式需要对象形式显示*/>西岭老师真帅

)}exportdefaultAppOutreachStyles创建相应的CSS文件，并使用模块化语法规则导入样式文件。创建CSS文件\src\App.cssbody{background-color:skyblue;color:blue;}.box{font-size:30px;}\src\App.js//引入外部样式文件import'./App.css'functionApp(){return(

小兰同学

胖蓝

)}exportdefaultApp条件渲染条件渲染是函数调用.importReactfrom'react'importReactDomfrom'react-dom'varf=falseconstfun1=()=>{if(f){return(

hahahaha

)}else{return(

嘿

)}}consttitle=(//使用括号，可以换行，代码更整洁

{fun1()}

)ReactDom.render(title,document.getElementById('root'))[编辑推荐】ES6新增语法——Promise详解ReactvsSvelte：虚实DOM之战ES6新增语法——Async……敬请期待完整React开发视频教程React入门Step1：环境搭建详解