目录
在最新的react 18中，ReactDOM.render()已经不支持
一、React概述
1.1 React介绍
React是是构建用户界面的JavaScript库
用户界面：HTML页面（前端）
React主要用来写HTML页面，或者构建Web应用
1.2 React的特点
-
声明式：
只需要描述页面UI（HTML）看起来是什么样，与写HTML一样。React负责渲染UI，并在数据变化时更新UI
比如：想在页面中有一个标题，只需要写一个h1标签就可以
const jsx=<div className="app">
<h1>Hello React!</h1>
</div>-
基于组件：
- 组件是React最重要的内容
- 组件表示页面中的部分内容
- 组合、复用多个组件，可以实现完整的页面功能
-
学习一次，随处使用
- 使用React可以开发Web应用
- 使用React可以开发移动端原生应用（react-native）
- 使用React可以开发VR应用
二、 React基本使用
2.1 React的安装
安装命令：npm i react react-dom
react包是核心，提供创建元素、组件等功能
react-dom包提供DOM相关功能（负责渲染到页面中）
2.2 React的使用
1.引入react和react-dom两个js文件
先引入react，再引入react-dom文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
2.创建react元素
React.createElement(元素名称，{元素属性}，元素的子节点)
若没有元素属性，写null
第三个及其以后的参数都表示元素的子节点
<script>
const title=React.creactElement('h1',null,'hello react')
</script>3.渲染React元素到页面中
ReactDOM.render()
参数一：要渲染的React元素
参数二：挂载点 DOM对象，用于指定渲染到页面中的位置
eg:
const title=React.createElement('h1',null,'Hello React‘)
//若想要元素属性：const title=React.createElement('h1',{title:'标题',id='p1'},'Hello React‘)
ReactDOM.render(title,document.getElementById('root'))
在最新的react 18中，ReactDOM.render()已经不支持
const title = <h1>Hello React</h1>;
//ReactDOM.createRoot方法创建了一个根组件 这个方法接受一个DOM元素作为参数 这个DOM元素是React的挂载点
const root = ReactDOM.createRoot(document.getElementById('root'));
//调用root对象的render方法 将之前创建的title JSX元素渲染到DOM中
root.render(title); 三、React脚手架的使用
3.1 React脚手架的意义
-
脚手架是开发现代Web应用的必备
-
充分利用Webpack、Babel、ESLint等工具辅助项目开发
-
零配置，无需手动配置繁琐的工具即可使用 开箱即用
3.2 使用React脚手架初始化项目
1.初始化项目：npx create-react-app my-app
2.启动项目，在项目根目录执行命令：npm start
创建成功后浏览器初始界面
npx命令介绍
npm v5.2.0 引入的一条命令
目的：提升包内提供的命令行工具的使用体验
原来：先全局安装脚手架包，再使用这个包中提供的命令
现在：无需安装脚手架包，就可以直接使用这个包提供的命令
执行命令：
推荐使用：npx create-react-app my-app
1.npx Node.js工具命令，查找并执行后续的包命令
2.create-react-app 核心包（固定写法），用于创建React项目
3.my-app React项目名称（可以自定义）
- npm init react-app my-app
- yarn create react-app my-app
3.3 在脚手架中使用React
my-app-->src-->index.js
1.导入react和react-dom两个包
import React from 'react'
import ReactDOM from 'react-dom'2.调用React.createElement()方法创建react元素
3.调用ReactDOM.render()方法渲染react元素到页面中
index.js
//React必要的两个核心包
import React from 'react'
import ReactDOM from 'react-dom'
//创建react元素
const title=React.createElement('h1',null,'Hello React')
//渲染React元素
ReactDOM.render(title,document.getElementById('root'))react 18
import React from 'react';
import ReactDOM from 'react-dom/client';
const title = <h1>Hello React</h1>;
//ReactDOM.createRoot方法创建了一个根组件 这个方法接受一个DOM元素作为参数 这个DOM元素是React的挂载点
const root = ReactDOM.createRoot(document.getElementById('root'));
//调用root对象的render方法 将之前创建的title JSX元素渲染到DOM中
root.render(title); 
四、JSX基础
1.JSX的基本使用
1.1 createElement()的问题
-
繁琐不简洁
-
不直观，无法直接看出所描述的结构
1.2 JSX简介
JSX是JavaScript XML的简写，表示在JavaScript代码中写XML(HTML格式的代码)
优势：
-
声明式语法更加直观，与HTML结构相同
-
降低了学习成本，提升了开发效率
JSX是React的核心内容
1.3 使用步骤
1.使用JSX语法创建react元素
直接将jsx作为变量的值
//使用JSX语法创建react元素
const title=<h1>Hello JSX </h1>2.使用ReactDOM.render()方法渲染到页面中
//渲染创建好的React元素
ReactDOM.render(title,root)eg:
import React from 'react'
import ReactDOM from 'react-dom'
//使用JSX语法创建react元素
const title=<h1>Hello JSX</h1>
//渲染创建好的React元素
ReactDOM.render(title,document.getElementById('root'))为什么脚手架中可以使用JSX语法？
-
JSX不是标准的ECMAScript语法，它是ECMAScript的语法扩展
-
需要使用Babel编译处理后，才能在浏览器环境中使用
-
JSX的本质
JSX并不是标准的JS语法，它是JS 的语法扩展，浏览器本身不能识别，需要 通过解析工具做解析之后才能在浏览器中运行
-
create-react-app脚手架已经默认有该配置，不需要手动配置
-
编译JSX语法的包为：@babel/preset-react
1.4 注意点
-
React元素的属性名使用驼峰命名法
-
特殊属性名：eg:class->className for->htmlFor
-
没有子节点的React元素可以用/>结束
const title=<h1>Hello JSX <span></span></h1> ======>
const title=<h1>Hello JSX <span /></h1>
-
推荐：使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱
//使用小括号包裹
const dv = (
<div>Hello JSX</div>
)
2.JSX中使用JavaScript表达式
嵌入JS表达式
数据存储在JS中
语法：{JavaScript表达式}
const name='Jack'
const dv=(
<div> 你好，我叫{name}</div>
)注意点：
-
单大括号中可以使用任意的JavaScript表达式
-
JSX自身也是JS表达式
const h1=<h1>我是JSX</h1> const dv=( <div>嵌入表达式：{h1}</div> ) -
注意：JS中的对象是一个例外，不能直接使用对象的形式，会报错
-
const title=( <p>{{a:'6'}}</p> ) -
不能在{}中出现语句（比如：if/for）
3.JSX的条件渲染
场景：loading效果
条件渲染：根据条件渲染特定的JSX结构
可以使用if/else或三元运算符或逻辑与运算符来实现
//if/else
const isLoading=true
const loadData = () => {
if(isLoading) {
return <div>loading…</div>
}
return <div>数据加载完成，此处显示加载后的数据</div>
}
const title=(
<h1>
条件渲染：
{loadData()}
</h1>
)
//三元表达式
const isLoading=true
const loadData = () => {
return isLoading ? (<div>loading…</div>):(<div>数据加载完成，此处显示加载后的数据</div>)
}
const title=(
<h1>
条件渲染：
{loadData()}
</h1>
)
//逻辑与运算符（显示/隐藏）
const isLoading=true
const loadData = () => {
return isLoading && (<div>loading…</div>) //逻辑终端，效果不同
}
const title=(
<h1>
条件渲染：
{loadData()}
</h1>
)4.JSX的列表渲染
-
如果要渲染一组数据，应该使用数组的map()方法
-
注意：渲染列表时应该添加key属性，key属性的值要保证唯一
-
原则:map()遍历谁，就给谁添加key属性
-
尽量避免使用索引号作为key属性
const songs=[
{id:1,name:'111'},
{id:2,name:'222'},
{id:3,name:'333'},
]
const list=(
<ul>
{
songs.map(item=><li key={item.id}>{item.name}</li>)
}
</ul>
)5.JSX的样式处理
1.行内样式——style
//<h1 style={对象形式}>
<h1 style={{color:'red',backgroundColor:'skyblue'}}>
JSX的样式处理
</h1>2.类名——className(推荐)
//引入css
import 'css文件路径'
<h1 className="title">
JSX的样式处理
</h1>
扫一扫
1252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
