React 之 JSX 语法的基本使用

林小饼
282 阅读6分钟

一、React 是什么？

react 是一个用于构建用户界面的 JavaScript 库

二、React 的特点？

  • 声明式 UI
  • 组件化
    • 函数组件：使用 JS 的函数或者箭头函数创建的组件
    • 类组件：使用 ES6 的 class 语法创建组件
  • JSX 语法
  • 虚拟 DOM

三、使用 React 脚手架创建项目

  • 创建：npx create-react-app react-basic(（项目名称）)
  • 切换：cd react-basic(项目名称)
  • 启动：yarn start 或 npm start 或 npm run start

四、需要下载的基础插件

  • Simple React Snippets
  • React Standard Style code snippets
  • React Component

五、react 项目目录说明与调整

  • 说明：

    • src 目录是我们写代码进行项目开发的目录
    • 查看 package.json 两个核心库：react、react-dom（脚手架已经帮我们安装好，我们直接用即可）

  • 调整：

    • 删除 src 目录下的所有文件
    • 创建 index.js 文件作为项目的入口文件，在这个文件中写 React 代码即可

image.png

六、React 的基本使用 (index.js)

  • 导入 react 和 react-dom
  • 创建 react 元素(虚拟DOM)
  • 渲染 react 元素到页面中 示例1：创建 h1 标签
// 1.导入 react 和 reactDOM
import React from 'react'
import ReactDOM from 'react-dom'
// 2.创建 react 元素(虚拟DOM)
const h1 = React.createElement('h1', null, 'hello React')
// 3.渲染 react 元素到页面
ReactDOM.render(h1, document.getElementById('root'))

image.png

示例2：创建一个 div 带 id 和 className（相当于 class）

// 1.导入 react 和 reactDOM
import React from 'react';
import ReactDOM from 'react-dom';
// 2.创建 react 元素(虚拟DOM)
const div = React.createElement('div', { id: 'box', className: 'box' }, '我是div')
// 3.渲染 react 元素到页面
ReactDOM.render(div, document.getElementById('root'));

image.png

示例3：创建 三个 li，必须要有 key

// 1.导入 react 和 reactDOM
import React from 'react'
import ReactDOM from 'react-dom'
// 2.创建 react 元素(虚拟DOM)
const ul = React.createElement('ul', { className: 'list' },
    [
        React.createElement('li', { className: 'li1',key:'1' }, '我是 li1 元素'),
        React.createElement('li', { className: 'li2',key:'2' }, '我是 li2 元素'),
        React.createElement('li', { className: 'li3',key:'3' }, '我是 li3 元素'),
    ])
// 3.渲染 react 元素到页面
ReactDOM.render(ul, document.getElementById('root'))

image.png

七、JSX 语法的基本使用

前面铺垫了那么久，终于来到 JSX 语法了。

首先，我们正视一下 createElement 的问题：繁琐、不优雅、不直观。

上述的示例3，我只创建了两层，实际开发中远不止于此，如果真的采用 createElement 的方法创建元素，那将比 回调地狱 还可怕。

那 JSX 到底是什么神奇的东东，能让开发人员赞不绝口、爱不释手？我们一起来揭一揭它的庐山真面目吧！

1. JSX 介绍

所谓 JSX，正是JavaScript XML的简写，表示了在 Javascript 代码中写 XML(HTML) 格式的代码。其声明式语法更加直观，与 HTML 结构相同，有利于提高开发效率。

值得 注意 的是：JSX 不是标准的 JS 语法，而是 JS 的 语法扩展。脚手架中内置的 @babel/plugin-transform-react-jsx 包，用来解析该语法。

2. 使用步骤（index.js）

在 jsx 中可以在{}里使用 js 表达式

  • 导入 react 和 reactDOM
  • 使用 jsx 语法创建 react 元素
  • 把 react 元素渲染到页面中 示例1：直接渲染标签
// 1.导入 react 和 reactDOM
import React from 'react'
import ReactDOM from 'react-dom'
// 2.使用 jsx 语法创建 react 元素
const content =
    (<div>
        <ul>
            <li>我是 li 元素</li>
        </ul>
        <h1>我是大标题</h1>
    </div>)
// 3.渲染 react 元素到页面
ReactDOM.render(content, document.getElementById('root'))

image.png

示例2：使用三元运算符渲染数据

// 1.导入 react 和 reactDOM
import React from 'react'
import ReactDOM from 'react-dom'
// 2.定义对象
const obj = {
    name: 'Lucy',
    age:16
}
// 3.使用 jsx 语法创建 react 元素
const p = <p>我叫{obj.name},我是{obj.age > 18 ? '成年' : '未成年'}人</p>
// 4.渲染 react 元素到页面
ReactDOM.render(p, document.getElementById('root'))

image.png

示例3：直接渲染数组到标签

// 1.导入 react 和 reactDOM
import React from 'react'
import ReactDOM from 'react-dom'
// 2.使用 jsx 语法创建 react 元素
const arr = ['我', '会', '变', '成', '字', '符', '串']
const p = <p>{arr}</p>
// 3.渲染 react 元素到页面
ReactDOM.render(p, document.getElementById('root'))

image.png

示例4：渲染数组里面的标签,需要有 key值

// 1.导入 react 和 reactDOM
import React from 'react'
import ReactDOM from 'react-dom'
// 2.使用 jsx 语法创建 react 元素
const arr1 = [
    <h1 key='1'>我的id:1, 我的name:'Lucy'</h1>,
    <h1 key='2'>我的id:2, 我的name:'Rose'</h1>,
    <h1 key='3'>我的id:3, 我的name:'Jack'</h1>
]
// const info = <div>{arr1}</div>
// ReactDOM.render(info, document.getElementById('root'))
// 3.渲染 react 元素到页面
ReactDOM.render(arr1, document.getElementById('root'))

image.png

示例5：map 遍历数组，进行列表渲染（1）

  • 换行：需要带上箭头函数的 {} 和 return
// 1.导入 react 和 reactDOM
import React from 'react'
import ReactDOM from 'react-dom'
// 2.定义数组
const arr2 = [
    { id: 1, name: 'Lucy' },
    { id: 2, name: 'Rose' },
    { id: 3, name: 'Jack' }
]
// 3.使用 jsx 语法创建 react 元素
const info =
    (<div>{arr2.map(item => {
        return <h1 key={item.id}>我的id:{item.id},我的name:{item.name}</h1>
    })}
    </div>)
// 4.渲染 react 元素到页面
ReactDOM.render(info, document.getElementById('root'))

image.png

示例6：map 遍历数组，进行列表渲染（2）

  • 不换行：去掉箭头函数的 {} 和 return
// 1.导入 react 和 reactDOM
import React from 'react'
import ReactDOM from 'react-dom'
// 2.定义数组
const arr3 = [
    { id: 1, name: 'Lucy' },
    { id: 2, name: 'Rose' },
    { id: 3, name: 'Jack' }
]
// 3.使用 jsx 语法创建 react 元素
const info =
    (<div>
        <ul>{arr3.map(item => <li key={item.id}>我的id:{item.id},我的name:{item.name}</li>)}</ul>
    </div>)
// 4.渲染 react 元素到页面
ReactDOM.render(info, document.getElementById('root'))

image.png

示例7：注册点击事件

  • 调用不带括号：点击触发 {fn}
  • 调用带括号使用箭头函数：点击触发 {()=>fn()}
  • 调用带括号：进入页面就触发一次，点击不触发（适合发请求等) {fn()}
// 1.导入 react 和 reactDOM
import React from 'react'
import ReactDOM from 'react-dom'
// 2.声明点击事件的函数
function fn() {
    console.log('点我呀123')
}
// 3.使用 jsx 语法创建 react 元素
const btns =
    (<div>
        <button onClick={fn}>按钮1</button>
        <button onClick={() => fn()}>按钮2</button>
        <button onClick={fn()}>按钮3</button>
    </div>)

// 4.渲染 react 元素到页面
ReactDOM.render(btns, document.getElementById('root'))

image.png

示例8：调用函数，返回一段字符串

// 1.导入 react 和 reactDOM
import React from 'react'
import ReactDOM from 'react-dom'
// 2.声明函数，在标签里面调用
function addText() {
    return '你好呀，div'
}
// 3.使用 jsx 语法创建 react 元素
const div =
    (<div>
        <p>我是 div 里的 p</p>
        {addText()}
    </div>)
// 4.渲染 react 元素到页面
ReactDOM.render(div, document.getElementById('root'))

image.png

示例8：调用函数，返回一个标签

// 1.导入 react 和 reactDOM
import React from 'react'
import ReactDOM from 'react-dom'
// 2.声明函数，在标签里面调用
function addEle() {
    return <h1>我是新增的 h1 标签</h1>
}
// 3.使用 jsx 语法创建 react 元素
const div =
    (<div>
        <p>我是 div 里的 p</p>
        {addEle()}
    </div>)

// 4.渲染 react 元素到页面
ReactDOM.render(div, document.getElementById('root'))

image.png

示例9：修改标签的样式

  • 法1：直接写行内样式
  • 法2：定义属性值变量
  • 法3：定义属性和属性值对象
  • 法4：import 导入 CSS 文件
// 1.导入 react 和 reactDOM
import React from 'react'
import ReactDOM from 'react-dom'
// 2.定义样式的变量（也可以导入 CSS 文件）
const red = 'red'
const objColor = {
    color: 'blue'
}
// 3.使用 jsx 语法创建 react 元素
const ul =
    (<ul>
        <li className="li1" style={{ color: 'yellow' }}>我li1</li>
        <li className="li2" style={{ color: red }}>我li2</li>
        <li className="li3" style={objColor}>我li3</li>
    </ul>)
// 4.渲染 react 元素到页面
ReactDOM.render(ul, document.getElementById('root'))

image.png

八、使用 JSX 语法注意点

  • 只有在脚手架中才能使用 JSX 语法

  • JSX 必须要有一个根节点

  • 没有子节点的元素可以使用/>结束

  • JSX 中语法更接近于 JavaScript

  • JSX 可以换行，如果 JSX 有多行，推荐使用()包裹 JSX

avatar
文章
阅读
粉丝