React框架之JSX

Soulmate.

已于 2023-07-23 16:05:37 修改

阅读量118

点赞数 1

分类专栏： web前端开发文章标签：前端 react 前端框架

于 2022-07-01 14:09:12 首次发布

本文链接：https://blog.csdn.net/m0_64599482/article/details/125557549

版权

web前端开发专栏收录该内容

29 篇文章 1 订阅

订阅专栏

一、React概述

1.1、什么是React

React是一个用于构建用户界面的JavaScript库
React主要用来写HTML页面，或构建Web应用

1.2、React的特点

声明式：
你只需要描述UI(HTML)看起来是什么样，就跟写HTML一样
React负责渲染UI，并在数据变化时更新UI
基于组件：
组件是React最重要
组件表示页面中的部分内容
组合、复用多个组件，可以实现完整的页面功能
学习一次，随时使用：
使用React可以开发Web应用
使用React可以开发移动端原生应用(react-native)
使用React可以开发VR(虚拟现实)应用(react 360)

1.3、React的安装

安装命令：npm i react react-dom
react包是核心，提供创建元素、组件等功能
react-dom包提供DOM相关功能等

1.4、React的使用

1 引入react和react-dom两个js文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
2 创建React元素
3 渲染React元素到页面中
<div id="root">
    <script>
        const title = React.createElement('h1', null, 'hello world')
        ReactDOM.render(title,document.getElementById('root'))
    </script>
</div>

二、React脚手架的使用

2.1、React脚手架意义

1、脚手架是开发现代Web应用的必备

2、充分利用Webpack、Babel、ESLint等工具辅助项目开发

3、零配置，无需手动配置繁琐的工具即可使用

4、关注业务，而不是工具配置

2.2、使用React脚手架初始化项目

初始化项目，命令：npx create-react-app my-app

启动项目，在项目根目录执行命令：npm start

2.3、npx命令介绍

npm v5.2.0引入的一条命令
目的：提升包内提供的命令行工具的使用体验
原来：先安装脚手架包，在使用这个包中提供的命令
现在：无需安装脚手架包，就可以直接使用这个包提供的命令

2.4、在脚手架中使用React

1、导入react和react-dom这两个包
import React from 'react'
import ReactDOM from 'react-dom'
2、调用React.createElement()方法创建react元素
3、调用ReactDOM.render()方法渲染react元素到页面中

三、React基础

1、React是构建用户界面的JavaScript库
2、使用react时，推荐使用脚手架方式
3、初始化项目命令：npx create-react-app my-app
4、启动项目命令：yarn start(或npm start)
5、React.createElement()方法用于创建react元素
6、ReactDOM.render()方法负责渲染react元素到页面中

四、JSX的基本使用

4.1、createElement()问题

1、繁琐不简洁
2、不直观，无法一眼看出所描述的结构
3、不优雅，用户体验不爽

4.2、JSX简介

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

4.3、使用步骤

1 使用JSX语法创建react元素
    const title = <h1>hello</h1>
2 使用ReactDOM.render()方法渲染react元素到页面中
    ReactDOM.render(title,root)

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

1 JSX不是标准的ECMAScript语法，它是ECMAScript的语法扩展
2 需要使用babel编译处理后，才能在浏览器环境中使用
3 create-react-app脚手架中已经默认有该配置，无需手动配置
4 编译JSX语法的包为：@babel/preset-react

4.5、注意点

1 React元素的属性名使用驼峰命名法
2 特殊属性名：class->className、for->htmlFor、tabindex->tabIndex
3 没有子节点的React元素可以用/>结束
4 推荐：使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱

五、JSX中使用JavaScript表达式

5.1、嵌入JS表达式

数据存储在JS中
语法：{JavaScript表达式}
注意：语法中的单大括号，不是双大括号
const root = ReactDOM.createRoot(document.getElementById('root'));
const name = 'zero'
root.render(
    <h1>hello {name}</h1>
);

5.2、注意点

1 单大括号中可以使用任意的JavaScript表达式
2 JSX自身也是JS表达式
3 注意：JS中的对象是一个例外，一般只会出现在style属性中
4 注意：不能在{}中出现的语句(比如：if/for等)

六、JSX的条件渲染

条件渲染：根据条件渲染特定的JSX结构
可以使用if/else或三元运算符或逻辑运算符来实现

七、JSX的列表渲染

如果要渲染一组数据。应该使用数组的map()方法
注意：渲染列表时应该添加key属性，key属性的值要保证唯一
原则：map()遍历谁，就给谁添加key属性
注意：尽量避免使用索引号作为key
const root = ReactDOM.createRoot(document.getElementById('root'));
const songs = [
    {id: 1, name: '云边有朵雨做的云'},
    {id: 2, name: '追风筝的人'},
    {id: 3, name: '三体'},
]
root.render(
    <ul>{songs.map(item => <li key={item.id}>{item.name}</li>)}</ul>
);

八、JSX样式处理

1 行内样式--style
    <h1 style={{color: 'red'}}>行内样式</h1>
2 类名--className
    // 引入CSS样式
    import './css/index.css'
    <h1 className="title">类名样式</h1>