React Basic - 入门知识
React Basic - 入门知识
目标:
- React 概述
- React 体验
- 认识 JSX 语法
- 脚手架工具介绍:create-react-app / vite-react
1. React 概述
目标:
- 什么是 React
- React 的生态和背景
1.1 什么是 React
A JavaScript library for building user interfaces
一个用于构建用户界面的 JavaScript 库
React 是一个开源的 Javascript 库,用于构建 Web 应用中的视图层,也就是 Web应用中的前端用户界面MVC中的V层(View)。
React的思想非常独特,性能出众,可以写出重复代码少,逻辑清晰的前端代码。并且可以将用户界面代码HTML+CSS 和 JS 逻辑代码即进行完美的融合。
除了构建浏览器端的 Web 页面以外,还可以构建移动端的原生 App 应用。
官网地址:https://zh-hans.reactjs.org/
github地址:https://github.com/facebook/react/
官网(新)地址(Beta版):https://reactjs.bootcss.com/
1.2 React 的生态和背景
它是由 Facebook 的软件工程师在 2012 年创建,于 2013 年 5 月开源,目前由 Facebook 以及个人开发人员和公司组成的社区维护。
React 生态圈异常活跃,在构建客户端 web 应用的过程中你遇到的问题几乎都可以在社区中找到答案。
Redux | MobX | Recoil | Formik | React Table |
---|---|---|---|---|
Next.js | Gatsby | React Query | SWR | React Router |
React Spring | Styled-Components | Ant Design | Material UI | MSW |
2 React 体验
目标:
- Browser 端(引入方式)
- createElement
- render
- practice(练习)
2.1 Browser 端(引入方式)
<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
2
React 可以构建在浏览器中运行的 web 应用,也可以构建在移动端运行的原生应用,React 在构建这两种应用时会有一些通用方法和一些非通用方法,通用方法都被放置在了 react
文件中,非通用方法比如实现 web 应用的方法被放置在了 react-dom
中,实现移动端应用的方法被放置在了 react-native-web
文件中。
React:核心库,包括了构建 Web 应用和移动端应用通用方法
React-dom:只包含了构建 web 应用的方法
React-Native-Web:只包含构建移动端应用的方法
2.2 createElement 创建虚拟 Dom 元素
当引入了 React
核心库文件后,window 对象下会多出一个 React
对象,该对象下面的createElement
方法用于创建元素
例如:
2.3 Render 渲染
当引入了 React-Dom
文件后,Window 对象下会多出 ReactDOM
对象,对象下的 render
方法就是用来渲染元素的。
container:
使用示例:
ReactDOM.render(div, document.getElementById("root"));
2.4 practice(练习)
目标:
将指定的 HTML 结构使用 React 提供的方式渲染(createElement方法)
![paratice - html struture](https://raw.githubusercontent.com/Sue-52/PicGo/main/images/paratice - html struture.png)
渲染:
![paratice - react render](https://raw.githubusercontent.com/Sue-52/PicGo/main/images/paratice - react render.png)
3 认识 JSX 语法
目标:
- 已知问题
- JSX 是什么
- JSX 语法规则
3.1 已知问题
由于 React
内部的优化机制所制,其必须使用 createElement
方法进行用户界面的构建,但是对于开发者来说这样增加了编写代码的复杂度和开销。
为了解决以上问题,React
为 createElement
方法创造了替代语法,这种语法和传统的 HTML 语法相似度极高, 这样开发者就可以使用熟悉的语法构建界面了。在应用构建阶段, 再使用 balbel
将这种替代语法转换为 createElement
方法, 这样 React 又可以使用它创建元素了。
原先创建元素:
const button = React.createElement("button", { type: "button" }, "按钮")
后续创建元素:
const button = <button type="button">按钮</button>
3.2 JSX 是什么
JSX 是 JavaScript 编程语言的语法扩充,是由 Facebook 创建的,用于在 React 中构建用户界面。
使用:
const button = <button> button </button>
ReactDOM.render(button, document.getElementById("root"));
2
但是这种语法浏览器是无法识别的,所以我们需要使用 Babel
转换,将其转换为 React.createElement
方法的调用,所以说 JSX 本质就是 Javascript。
Babel:将语法转换为
React.createElement
方法的调用
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.13.17/babel.min.js"></script>
3.3 JSX 语法规则
JSX 的基本语法规则:遇到 HTML 标签(以 <
开头),就用 HTML 规则解析;遇到代码块(以 {
开头),就用 JavaScript 规则解析。
1. 跟标记
在使用 JSX 语法创建元素时,元素的最外层需要一个跟标记。
错误用法:
const jsx = (
<p> p1 </p>
<p> p2 </p>
<p> p3 </p>
)
2
3
4
5
正确用法:
const jsx = (
<div>
<p> p1 </p>
<p> p2 </p>
<p> p3 </p>
</div>
)
2
3
4
5
6
7
为了避免因为满足规则而出现的无意义标签,React
提供了占位符标记,占位符标记在渲染后不会产生真实 DOM 对象
使用:
const jsx = (
<React.Fragment>
<p> p1 </p>
<p> p2 </p>
<p> p3 </p>
</React.Fragment>
)
2
3
4
5
6
7
简写方法:
const jsx = (
<>
<p> p1 </p>
<p> p2 </p>
<p> p3 </p>
</>
)
2
3
4
5
6
7
2. 单标记需闭合
错误示范:
<input type="text" >
正确示范:
<input type="text" />
3. 属性命名规则
属性名应该遵循小驼峰命名发
示例:
HTML 写法
<input maxlength="10" readonly autofoucs />
1JSX 写法
<input maxLength="10" readOnly autoFoucs />
1
4. className 属性
再给元素添加类名应该使用 className 属性,因为 class 在 Javascript 中是保留关键字。
HTML写法
<div class="div"> I am a div </div>
1JSX 写法
<div className="div"> I am a div </div>
1
5. HtmlFor 属性
在 label 标签中 使用 htmlFor
属性,因为 for 在 Javascript 中是保留关键字。
HTML写法
<label for="demo">This is a test input</label>
1JSX 写法
<label htmlFor="demo">This is a test input</label>
1
6. JSX 格式美化
在多个 JSX 标签同时使用时避免了不一定会换行,只需在最外层的根元素外套上一组小括号即可使标记格式对其,避免了格式混乱产生的错误。
示例:
const element = (
<>
<div>header</div>
<div>footer</div>
</>
)
2
3
4
5
6
7. 注释
在 JSX 中注释的写法为:{/* */}
、//
function App() {
// 注释
const data = 0;
return (
<>
{/* 注释 */}
<div>div</div>
</>
)
}
2
3
4
5
6
7
8
9
10
8. 插值语法
在 JSX 中可以使用插值语法将动态数据插入到指定位置。
插入文本
const someClass = "some-class" const someText = "I am interpolating text" const text_jsx = <p className={someClass}>{someText}</p>
1
2
3执行计算
const x = 10 const y = 20 const paragraph = <p>{x * y}</p>
1
2
3渲染函数返回值
function getValue() { return "some value from getValue function" } const text = <p>{getValue()}</p>
1
2
3
4插值对象
const obj = {name: "张三"}; const text = <p>{obj}</p> const other = <p>{{name: "李四"}}</p>
1
2
3
4 脚手架工具介绍:create-react-app / vite-react
目标:
- create-react-app
- vite
4.1 create-react-app
create-react-app
是 React 官方提供的用于创建 React 应用的脚手架工具。
npm install create-react-app -g
npm init react-app react-demo
2
4.2 vite
vite
是一种新型的前端构建工具,它能显著改善前端开发体验。
Vite由两个主要部分组成:
- dev server:利用浏览器的ESM能力来提供源文件,具有丰富的内置功能并具有高效的HMR
- 生产构建:生产环境利用Rollup来构建代码,提供指令用来优化构建过程
Vite作为一个基于浏览器原生ESM的构建工具,它省略了开发环境的打包过程,利用浏览器去解析imports,在服务端按需编译返回。同时,在开发环境拥有速度快到惊人的模块热更新,且热更新的速度不会随着模块增多而变慢。因此,使用Vite进行开发,至少会比Webpack快10倍左右。
npm init @vitejs/app 项目名
选择 react 选项
即可创建项目。