(三)react中JSX语法的基本使用

1. 导入 react

import React from 'react' // react库

import ReactDOM from 'react-dom' // 用于操作dom元素

2. 创建虚拟DOM

语法:React.createElement('类型参数', { 入参即元素的属性,null表示无 },子元素)

参数介绍:类型参数type可以是字符串、函数,也可以是React提供的一些内置组件类型。实际上类型参数type可以是:

  • 标签名字符串:浏览器原生标签
  • React 组件:class 组件或函数组件
  • React fragment、React Profiler等内置组件

例如:

const virtualDom= React.createElement('div', {

  className:'greeting'

}, 'Hello, world!')

但是有个问题:React.createElement() 方法创建单层元素还算可以,可是如果出现嵌套结构,使用这种方法可读性差,比较繁琐,无法一眼就看出结构层次,例如:

    React.createElement(  'div', null,  
       React.createElement('h1', null, '手机'), 
       React.createElement('ul', null, 
          React.createElement('li', null, '华为'),  
          React.createElement('li', null, '荣耀')
       )
   )

所以接下来咱们的 JSX 语法就该登场了!

例如上述代码可以用JSX来书写:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

(1):什么是 JSX

JSX即JavaScript XML,表示 JavaScript 代码中写 XML(HTML)格式的代码,就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展,只要你把HTML代码写在JS里,那就是JSX。它是react.js开发的一套语法糖,一个在React组件内部构建标签的类XML语法。可以提高组件的可读性,因此推荐使用JSX。

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

注意:

  • 最终会被编译为 createElement() 方法
  • 只能有一个根标签
  • 标签要闭合(单边标签得有斜杠)

  • 小写首字母对应 HTML的标签,组件名首字母大写。

  • 注释使用 / * 内容 */

  • html标签内注释{/* 最外层有花括号*/}

(2):JSX 语法怎么用

前提:安装:npm i -D babel-preset-react (依赖与:babel-core/babel-loader脚手架创建的项目会自动安装

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

// JSX 语法
const ele = (
    <div>
       <h1>手机</h1>
       <ul>
          <li>华为</li>
          <li>荣耀</li>
       </ul>
    </div>
)


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

语法:ReactDOM.render(template,targetDOM)。

参数介绍:参数1:组件  参数2dom对象表示渲染到哪个元素内 

// 渲染
ReactDOM.render(ele, document.querySelector('#root'))

 注意:

  • JSX 语法上更接近 JavaScript 而不是 HTML,所以 React DOM 使用 camelCase(小驼峰命名)来定义属性的名称,例如:className
  • 特殊属性名: class --> className(因为class是js的关键字) 、for --> htmlFor(因为for是js的关键字)
  • 所有的标签都必须闭合,无论是单标签还是双标签
  • 推荐:使用小括号包裹 JSX 结构,从而避免 JS 中的自动插入分号陷阱
  • 事件名用驼峰命名法。HTML是全小写(onclick),JSX中是驼峰(onClick)

3、嵌入 JS 表达式 

语法:{JavaScript表达式}

const name = '张三'
const title = (
   <div>你好,我叫:{name}</div>
)

注意点

  • 单打括号中可以是任意的 JavaScript 表达式,如:三元表达式,加减乘除,数组,字符串
  • 单大括号中不能出现语句(例如:if/for等)
  • JS 对象一般只会出现在style属性中

 4、条件渲染实现

可以在函数表达式中使用 if/else 或者三元运算符来实现

const loadData = () => {
    if(idLoading) {
        return <div>数据加载中...</div>
    } else {
        return <div>数据加载完成</div>
    }
}

const load = (
    <div>
        {loadData()}
    </div>
)

5、JSX 的列表渲染

const books = [
    {id: 1, name: 'React'},
    {id: 2, name: 'Vue'},
]

 通过遍历数组的方法 map   语法:Array.prototype.map()

const list = (
    <ul>
        {books.map(item => <li>{item.name}</li>)}
    </ul>
)

6、JSX 的样式处理 

行内样式 - style

<h1 style={{ color: 'red', backgroundColor: 'skyblue' }}>  
    JSX的样式处理
</h1>

类名 - className

需要使用 import '样式文件路径/样式文件名称.css’导入样式文件 ,title类在xxx.css文件中定义好

<h1 className="title">  
    JSX的样式处理
</h1>

总结

  • JSX 表示在JS代码中写HTML结构,是React声明式的体现
  • 使用 JSX 配合嵌入的 JS 表达式、条件渲染、列表渲染,可以描述任意 UI 结构
  • 推荐使用 className 的方式给JSX添加样式
     

7.JSX编译原理

JSX的语法需要通过 babel-preset-react 编译后,才能被解析执行

/* 1 在 .babelrc 开启babel对 JSX 的转换 */

{

  "presets": [

    "env", "react"

  ]

}



/* 2 webpack.config.js */

module: [

  rules: [

    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },

  ]

]



/* 3 在 js 文件中 使用 JSX */

const dv = (

  <div title="标题" className="cls container">Hello JSX!</div>

)



/* 4 渲染 JSX 到页面中 */

ReactDOM.render(dv, document.getElementById('app'))

附:箭头函数也可以创建虚拟Dom

注:组件名称必须以大写字母开头,和标签可以区分开,清晰明了。

let Mon = ()=>{

  return <h1>6666666</h1>

}

root.render(<Mon></Mon>); // 相当于 new Mon()
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值