React学习笔记(一)

React和JSX语法

在 React 中使用 JSX 语法描述用户界面，它是一种 JavaScript 语法扩展。

在 React 代码执行之前，Babel 会将 JSX 语法转换为标准的 JavaScript API。

JSX 语法就是一种语法糖，让开发人员使用更加舒服的代码构建用户界面。

JSX 语法

可以在JSX中使用表达式，JSX本身其实也是一种表达式，可以将它赋值给变量，当作参数传递，作为返回值

const user = {
  name: 'tom',
  age: 10
}
const element = <h1>hello {user.name} </h1>

function userInfo () {
  return <div>{element}<div>age: {user.age}</div></div>
}

插值表达式

插值表达式中各种数据的插值状态(备注：插值只能执行表达式，不能执行语句)

• number——正常输出

• true / false——不输出

• undefined——不输出

• null——不输出

• 数组——去掉逗号后渲染在页面

• 对象——需要调用属性名，不然会报错

  function App () { const booleanVal = true const numberVal = 10 const nullVal = null const undefinedVal = undefined const arrayVal = [1, 2, 3, 4] const ObjectVal = { name: 'tom' } return (

  {booleanVal}