前端开发React18 - 环境搭建和JSX

使用create-react-app快速搭建开发环境

npx create-react-app react-name

JSX（JavaScript 和 xml 的缩写）：

• 在 js 代码中编写 html 模版结构，是 react 中编写 ui 模版的方式
• HTML声明式模版写法
• JS可编程能力

JSX的本质：

• jsx不是js的标准语法，它是扩展语法
• 浏览器不能识别，需要解析工具才能运行

JSX中使用表达式：

通过大括号 {} 识别 js 中的表达式，比如字符串， 变量，函数调用，方法调用，对象

{'this is react'}

const num = 88 {num}

const fn = () => {console.log('hello')} {fn()}

const obj = { name: 'react'} {obj.name}

JSX中列表渲染：

const arr = [1,2,3]

{ <ul> arr.map( item => <li key={item}>{item}</li> ) </ul> }

JSX中条件渲染：

const flag = true

{ flag && <span>条件渲染</span>}

{ !flag ? <span>条件渲染true</span> : <span>条件渲染false</span>}

const type = 1

function typefn(){

if(type === 1)

return <span>1</span>

else if(type === 2)

return <span>2</span>

else

return <span>3</span>

}

{typefn()}

JSX中事件渲染：

<div onClick={()=>{alert('ok')}}>点击事件</div>

const evefn1 = (e) => {

console.log('ok', e)

}

<div onClick={evefn1}>点击事件</div>

const evefn2 = (name) => {

console.log('ok', name)

}

<div onClick={()=>evefn2('hello')}>点击事件</div>

const evefn3 = (e,name) => {

console.log('ok',e, name)

}

<div onClick={(e)=>evefn3(e,'hello')}>点击事件,传参,e</div>