02react基础-jsx

JSX产生的原因

由于通过createElement()方法创建的React元素有一些问题,代码比较繁琐,结构不直观,无法一眼看出描述的结构,不优雅,用户体验不爽

JSX的概述

SX是JavaScript XML 的简写,表示在JavaScript代码中写HTML格式的代码
优势:声明式语法更加直观,与HTML结构相同,降低了学习成本,提升开发效率

使用步骤

import React from 'react'
import ReactDOM from 'react-dom'

// 1.使用JSX创建react元素
const title = 

Hello JSX 这是span

// 2.渲染react元素 ReactDOM.render(title, document.getElementById('root'))

为什么在脚手架中可以使用JSX语法

  • SX 不是标准的ECMAScript语法,它是ECMAScript的语法拓展
  • 需要使用babel编译处理后,才能在浏览器环境中使用
  • create-react-app脚手架中已经默认有该配置,无需手动配置
  • 编译JSX语法的包: @bable/preset-react

注意点:

  • React元素的属性名使用驼峰命名法
  • 特殊属性名:class -> className,for -> htmlFor,tabindex -> tabIndex
  • 如果没有子节点的React元素可以用 /> 来结束
  • 推荐:使用 小括号包裹JSX,从而避免JS中自动插入分号报错例子
const title = (
  

Hello JSX

)

JSX中使用JavaScript表达式

import React from 'react'
import ReactDOM from 'react-dom'
/* 
  JSX中使用JavaScript表达式
*/
const name = 'Jack'
const age = 19
const title = (
  

Hello JSX, {name}, 年龄:{age}

) // 渲染react元素 ReactDOM.render(title, document.getElementById('root'))
image.png

注意点:

  • 只要是合法的js表达式都可以进行嵌入
  • JSX自身也是js表达式
  • 注意:js中的对象是一个例外,一般只会出现在style属性中
  • 注意:在{}中不能出现语句
import React from 'react'
import ReactDOM from 'react-dom'
/* 
  JSX中使用JavaScript表达式的注意点:
*/
// 函数调用表达式
const sayHi = () => 'Hi~'
const dv = 
我是一个div
const title = (

Hello JSX

{1}

{'a'}

{1 + 7}

{3 > 5 ? '大于' : '小于等于'}

{sayHi()}

{dv} {/* 错误演示 */} {/*

{ {a: '6'} }

*/} {/* { if (true) {} } */} {/* { for (var i = 0; i < 10; i++) {} } */}

) // 渲染react元素 ReactDOM.render(title, document.getElementById('root'))

条件渲染

    1. if-else
import React from 'react'
import ReactDOM from 'react-dom'

/* 
  条件渲染:
*/
const isLoading = true
//if-else
const loadData = () => {
  if (isLoading) {
    return 
loading...
} return
数据加载完成,此处显示加载后的数据
} const title = (

条件渲染: {loadData()}

) // 渲染react元素 ReactDOM.render(title , document.getElementById('root'))
02react基础-jsx_第1张图片
image.png
  • 2三元表达式
import ReactDOM from 'react-dom'
/* 
  条件渲染:
*/
const isLoading = true
// 三元表达式:
const loadData = () => {
  return isLoading ? (
loading...
) : (
数据加载完成,此处显示加载后的数据
) } const title = (

条件渲染: {loadData()}

) // 渲染react元素 ReactDOM.render(title , document.getElementById('root'))
  • 3.逻辑与运算符
import React from 'react'
import ReactDOM from 'react-dom'
/* 
  条件渲染:
*/
const isLoading = true
//逻辑与运算符:
const loadData = () => {
  return isLoading && (
loading...
) } const title = (

条件渲染: {loadData()}

) // 渲染react元素 ReactDOM.render(title , document.getElementById('root'))

列表渲染

  • 如果需要渲染一组数据,我们应该使用数组的 map () 方法
  • 注意:渲染列表的时候需要添加key属性,key属性的值要保证唯一
  • 原则:map()遍历谁,就给谁添加key属性
  • 注意:尽量避免使用索引号作为key
import React from 'react'
import ReactDOM from 'react-dom'
/* 
  列表渲染:
*/
// 歌曲列表:
const songs = [
  {id: 1, name: '痴心绝对'},
  {id: 2, name: '像我这样的人'},
  {id: 3, name: '南山南'},
]
const list = (
  
    {songs.map(item =>
  • {item.name}
  • )}
) // 渲染react元素 ReactDOM.render(list, document.getElementById('root'))
image.png

样式处理

  • 1.行内样式 -style
    类名 -className
  • {item.name}
  • 这种方式比较的麻烦,不方便进行阅读,而且还会导致代码比较的繁琐

    • 2.类名 -className
    • 创建CSS文件编写样式代码
    .container {
        text-align: center
    }
    

    在js中进行引入,然后设置类名即可

    import './css/index.css'
    
  • {item.name}
  • 总结:

    • JSX是React的核心内容
    • JSX表示在JS代码中写HTML结构,是React声明式的体现
    • 使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构
    • 推荐使用className的方式给JSX添加样式
    • React完全利用JS语言自身的能力来编写UI,而不是造轮子增强HTML功能

    你可能感兴趣的:(02react基础-jsx)