React 基础知识（脚手架安装使用+JSX+组件基础+事件处理）

目录

React的特点

React的安装

React的使用

方法说明

React脚手架的使用

在脚手架中使用React

JSX

JSX的基本使用

JSX中使用JavaScript表达式

JSX条件渲染

JSX列表渲染

 JSX样式处理

 React组件

react组件介绍

react组件的两种创建方式

React事件处理

事件绑定

事件对象

---

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

用户界面：HTML页面(前端)

React主要用来写HTML页面，或构建Web应用。

如果从MVC的角度来看，React仅仅是视图层(V)，也就是只负责视图的渲染，而并非提供了完整的M和C的功能。

React的特点

1.声明式：只需描述UI(HTML)看起来是什么样，就跟写HTML一样。React负责渲染UI，并在数据变化时更新UI。

2.基于组件：

· 组件是react最重要的内容

· 组件表示页面中的部分内容

· 组合、复用多个组件，可以实现完整的页面功能

3.学习一次，随处使用

· 使用React可以开发Web应用

· 使用React可以开发移动端原生应用(react-native)

· 使用React可以开发VR(虚拟现实)应用(react 360)

React的安装

安装命令：npm i react react-dom

· react包是核心，提供创建元素、组件等功能

· react-dom包提供DOM相关功能等

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元素到页面中

方法说明

· React.creatElement()说明

//返回值：React元素

//第一个参数：要创建的React元素名称

//第二个参数：该React元素的属性

//第三个及其以后的参数：该React元素的子节点

const el = React.createElement('h1',{title:'标题'},'Hello React')

 

 · ReactDOM.render()说明

//第一个参数：要渲染的React元素

//第二个参数：DOM对象，用于指定渲染到页面中的位置

ReactDOM.render(el, document.getElementById('root'))

React脚手架的使用

安装react脚手架命令：npm i -g create-react-app

1.初始化项目，命令：npx create-react-app my-app(项目名不能包含大写字母)或者yarn create react-app myapp

2.启动项目，在项目根目录执行命令：npm start或者yarn start

在脚手架中使用React

1.导入react和react-dom两个包

import React from 'react'

import ReactDOM from 'react-dom'

2.调用React.createElement()方法创建react元素。

3.调用ReactDOM.render()方法渲染react元素到页面中。

react18👇

JSX

JSX的基本使用

1.createElement()的问题：繁琐、不直观，用户体验不爽。

JSX是Javascript XML的简写，表示在JavaScript代码中写XML(HTML)格式的代码。

优势：声明式语法更加直观，与HTML结构相同，降低了学习成本、提升开发效率

JSX是React的核心内容

使用步骤：1.使用JSX语法创建react元素

// 使用JSX语法，创建react元素：

const title = <h1>Hello JSX</h1>

2.使用ReactDOM.render()方法渲染react元素到页面中

// 渲染创建好的React元素

ReactDOM.render(title,root)

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

1.JSX不是标准的ECMAScript语法，它是ECMAScript的语法扩展。

2.需要使用babel编译处理后，才能在浏览器环境中使用。

3.create-react-app脚手架中已经默认有该配置，无需手动配置。

4.编译JSX语法的包为：@babel/preset-react。

注意点：

1.React元素的属性名使用驼峰命名法

2.特殊属性名：class -> className、for -> htmlFor、tabindex -> tabIndex。

3.没有子节点的React元素可以用/>结束。

4.推荐：使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱。

JSX中使用JavaScript表达式

嵌入JS表达式

·  数据存储在JS中

· 语法：{JavaScript表达式}

· 注意：语法中是单大括号，不是双大括号！

JSX条件渲染

· 场景：loading效果

· 条件渲染：根据条件渲染特定的JSX结构

· 可以使用if/else或三元运算符或逻辑与运算符来实现

JSX列表渲染

· 如果要渲染一组数据，应该使用数组 的map()方法

 · 注意：渲染列表时应该添加key属性，key属性的值要保证唯一

· 原则：map()遍历谁，就给谁添加key属性。

· 注意：尽量避免使用索引号作为key

 JSX样式处理

1.行内样式------ style

2.类名-----className(推荐)

 React组件

react组件介绍

· 组件是React的一等公民，使用React就是在用组件

· 组件表示页面中的部分功能

· 组合多个组件实现完整的页面功能

· 特点：可复用、独立、可组合

react组件的两种创建方式

1.使用函数创建组件

· 函数组件：使用JS的函数(或箭头函数)创建的组件

· 约定1：函数名称必须以大写字母开头

· 约定2：函数组件必须有返回值，表示该组件的结构

· 如果返回值为null，表示不渲染任何内容

· 渲染函数组件：用函数名作为组件标签名

· 组件标签可以是单标签也可以是双标签

使用JS中的函数创建的组件叫做：函数组件

函数组件中必须有返回值

组件名称必须以大写字母开头，React据此区分组件和普通的React元素

2.使用类创建组件

· 类组件：使用ES6的class创建的组件

· 约定1：类名称也必须以大写字母开头

· 约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性

· 约定3：类组件必须提供render()方法

· 约定4：render()方法必须有返回值，表示该组件的结构。

 

抽离为独立JS文件

1.创建Hello.js（例）

2.在Hello.js中导入React

3.创建组件（函数或类）

4.在Hello.js中导出该组件

5.在index.js中导入Hello组件

6.渲染组件

 

 

 

 

React事件处理

事件绑定

· React事件绑定语法与DOM事件语法相似

· 语法：on + 事件名称={事件处理程序}，比如：onClick={() => {}}

· 注意：React事件采取驼峰命名法，比如：onMouseEnter、onFocus

· 在函数组件中绑定事件：

 

 

事件对象

· 可以通过事件处理程序的参数获取到事件对象

· React中的事件对象叫做：合成事件（对象）

· 合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题

 

 这个文档太长啦，开启下一个新的啦