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 元素到页面中。
(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元素
### 最后
好了,这就是整理的前端从入门到放弃的学习笔记,还有很多没有整理到,我也算是边学边去整理,后续还会慢慢完善,这些相信够你学一阵子了。
做程序员,做前端工程师,真的是一个学习就会有回报的职业,不看出身高低,不看学历强弱,只要你的技术达到应有的水准,就能够得到对应的回报。
学习从来没有一蹴而就,都是持之以恒的,正所谓活到老学到老,真正懂得学习的人,才不会被这个时代的洪流所淘汰。