前言 | ❤️ 只有与自己和解,故事才会翻到下一页 ❤️ |
---|
【React入门必备知识篇01】--- React 基础 & JSX
一、React 基础
(1)React 概述
1.1 什么是 React
1️⃣ React
是一个用于构建用户界面的 JavaScript 库。
2️⃣ React
主要用来写HTML页面,或构建Web应用。如果从 MVC 的角度来看,React 仅仅是视图层(V),也就是只负责视图的渲染,而并非提供了完整的 M 和 C 的功能。
3️⃣ React
起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
1.2 React 的特点
1.2.1 声明式设计
1️⃣ 你只需要描述 UI(HTML)看起来是什么样,就跟写HTML一样;
2️⃣ React
负责渲染 UI,并在数据变化时更新 UI;
代码演示如下:
const jsx = <div className="app">
<h1>Hello React! 动态变化数据:{count}</h1>
</div>
1.2.2 基于组件
- 组件是
React
最重要的内容; - 组件表示页面中的部分内容;
- 组合、复用多个组件,可以实现完整的页面功能;
- 通过
React
构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中;
1.2.3 学习一次,随处使用
- 使用 React 可以开发 Web 应用;
- 使用 React 可以开发移动端原生应用(react-native);
- 使用 React 可以开发 VR(虚拟现实)应用(react 360)等;
(2)React 的基本使用
2.1 React 的安装
安装命令:npm i react react-dom
react
包是核心,提供创建元素、组件等功能react-dom
包提供 DOM 相关功能等
2.2 React 的使用
1️⃣ 引入 react
和 react-dom
两个 js 文件;
2️⃣ 创建 React
元素;
3️⃣ 渲染 React
元素到页面中;
完整代码演示如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基本使用</title>
</head>
<body>
<div id="root"></div>
<!-- 1 引入js文件 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script>
// 2 创建react元素
// 参数一:元素名称
// 参数二:元素属性
// 参数三:元素的子节点
const title = React.createElement('h1', null, 'Hello React')
// 3 渲染react元素
// 参数一:要渲染的react元素
// 参数二:挂载点
ReactDOM.render(title, document.getElementById('root'))
</script>
</body>
</html>
2.3 方法说明
- React.createElement() 说明(了解即可)
// 返回值:React元素
// 第一个参数:要创建的React元素名称
// 第二个参数:该React元素的属性
// 第三个及其以后的参数:该React元素的子节点
const el = React.createElement('h1', { title: '标题' }, 'Hello React')
ReactDOM.render()
说明
// 第一个参数:要渲染的React元素
// 第二个参数:DOM对象,用于指定渲染到页面中的位置
ReactDOM.render(el, document.getElementById('root'))
(3)React 脚手架的使用
3.1 React 脚手架意义
- 脚手架是开发 现代Web 应用的必备;
- 充分利用 Webpack、Babel、ESLint 等工具辅助项目开发;
- 零配置,无需手动配置繁琐的工具即可使用;
- 关注业务,而不是工具配置;
3.2 使用 React 脚手架初始化项目
- 初始化项目,命令:npx create-react-app my-app
- 启动项目,在项目根目录执行命令:npm start
npx 命令介绍:
- npm v5.2.0 引入的一条命令;
- 目的:提升包内提供的命令行工具的使用体验;
- 从前:先安装脚手架包,再使用这个包中提供的命令;
- 现在:无需安装脚手架包,就可以直接使用这个包提供的命令;
3.3 在脚手架中使用 React
1️⃣ 导入 react
和 react-dom
两个包;
import React from 'react'
import ReactDOM from 'react-dom'
2️⃣ 调用 React.createElement() 方法创建 react
元素;
3️⃣ 调用 ReactDOM.render()
方法渲染 react
元素到页面中;
(4)React 基础小结
- React是构建用户界面的JavaScript库。
- 使用 react 时,推荐使用脚手架方式。
- 初始化项目命令:npx create-react-app my-app 。
- 启动项目命令:yarn start(或 npm start)。
- React.createElement() 方法用于创建 react 元素(知道)。
- ReactDOM.render() 方法负责渲染 react 元素到页面中。
二、JSX
(1)JSX 的基本使用
1.1 createElement() 的问题
- 繁琐不简洁。
- 不直观,无法一眼看出所描述的结构。
- 不优雅,用户体验不爽。
1.2 JSX 简介
1️⃣ JSX
是 JavaScript XML 的简写,表示在 JavaScript 代码中写 XML(HTML) 格式的代码。
2️⃣ 优势:声明式语法更加直观、与HTML结构相同,降低了学习成本、提升开发效率。
3️⃣ JSX
是 React 的核心内容。
1.3 使用步骤
1️⃣ 使用 JSX
语法创建 react
元素;
// 使用 JSX 语法,创建 react 元素:
const title = <h1>Hello JSX</h1>
2️⃣ 使用 ReactDOM.render()
方法渲染 react
元素到页面中;
// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))
😆思考:为什么脚手架中可以使用 JSX 语法?😆:
- JSX 不是标准的 ECMAScript 语法,它是 ECMAScript 的语法扩展。
- 需要使用 babel 编译处理后,才能在浏览器环境中使用。
- create-react-app 脚手架中已经默认有该配置,无需手动配置。
- 编译 JSX 语法的包为:https://babeljs.io/docs/en/babel-preset-react
1.4 注意事项
React
元素的属性名使用驼峰命名法。- 特殊属性名:class → className、for → htmlFor、tabindex → tabIndex 。
- 没有子节点的React元素可以用 /> 结束 。
- 推荐:使用小括号()包裹 JSX ,从而避免 JS 中的自动插入分号陷阱。
(2)JSX 中使用 JavaScript 表达式
2.1 嵌入 JS 表达式
- 数据存储在JS中
- 语法:{ JavaScript表达式 }
- 注意:语法中是单大括号,不是双大括号!
完整代码演示如下:
import React from 'react'
import ReactDOM from 'react-dom'
/*
JSX中使用JavaScript表达式
*/
const name = 'Jack'
const age = 19
const title = (
<h1>
Hello JSX, {name}, 年龄:{age}
</h1>
)
// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))
2.2 注意事项
- 单大括号中可以使用任意的 JavaScript 表达式
- JSX 自身也是 JS 表达式
- 注意:JS 中的对象是一个例外,一般只会出现在 style 属性中
- 注意:不能在{}中出现语句(比如:if/for 等)
(3)JSX 的条件渲染
- 场景:loading效果
- 条件渲染:根据条件渲染特定的 JSX 结构
- 可以使用 if/else 或 三元运算符 或 逻辑与运算符 来实现
完整代码演示如下:
import React from 'react'
import ReactDOM from 'react-dom'
/*
条件渲染:
*/
const isLoading = false
// if-else:
// const loadData = () => {
// if (isLoading) {
// return <div>loading...</div>
// }
// return <div>数据加载完成,此处显示加载后的数据</div>
// }
// 三元表达式:
// const loadData = () => {
// return isLoading ? (<div>loading...</div>) : (<div>数据加载完成,此处显示加载后的数据</div>)
// }
// 逻辑与运算符:
const loadData = () => {
return isLoading && (<div>loading...</div>)
}
const title = (
<h1>
条件渲染:
{loadData()}
</h1>
)
// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))
(4)JSX 的列表渲染
- 如果要渲染一组数据,应该使用数组的 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 = (
<ul>
{songs.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
)
// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))
(5)JSX 的样式处理
5.1 行内样式 — style
代码演示如下:
<h1 style={{ color: 'red', backgroundColor: 'skyblue' }}>
JSX的样式处理
</h1>
5.2 类名 — className(推荐)
代码演示如下:
<h1 className="title">
JSX的样式处理
</h1>
(6)JSX 小结
- JSX 是React 的核心内容。
- JSX 表示在JS代码中写HTML结构,是React声明式的体现。
- 使用 JSX 配合嵌入的 JS 表达式、条件渲染、列表渲染,可以描述任意 UI
结构。 - 推荐使用 className 的方式给JSX添加样式。
- React 完全利用 JS 语言自身的能力来编写UI,而不是造轮子增强 HTML 功
能。
三、总结
😝 由于内容较多,所以我决定分开写啦,我会坚持一直更新呢!喜欢的朋友们记得点点赞哦! 😝