React
什么是React?
React是一个用于构建用户界面的javaScript库,起源于facebook的内部项目,后续在13年开源了出来
React基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello_react</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="text"></div>
<!-- 引入 react 核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入 react-dom ,用于支持react操作dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引用babel,用于将jsx转换为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> /* 此处一定要写babel */
// 1.创建虚拟 dom
const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号,因为不是字符串 */
// 2.渲染虚拟dom到页面
// 第一个参数是渲染哪个虚拟dom,第二个参数是容器
ReactDOM.render(VDOM, document.getElementById('text'))
</script>
</body>
</html>
React虚拟DOM的两种创建方式
第一种:使用jsx创建虚拟DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1-使用jsx创建虚拟DOM</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="text"></div>
<!-- 引入 react 核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入 react-dom ,用于支持react操作dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 用于将jsx转换为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> /* 这儿要写babel */
// 1.创建虚拟 dom
const VDOM = ( /* 这儿不要写引号,因为不是字符串 */
<h1 id="title">
Hello,React
</h1>
)
// 2.渲染虚拟dom到页面
// 第一个参数是渲染哪个虚拟dom,第二个参数是容器
ReactDOM.render(VDOM, document.getElementById('text'))
</script>
</body>
</html>
第二种:使用js创建虚拟DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2-使用js创建虚拟DOM</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="text"></div>
<!-- 引入 react 核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入 react-dom ,用于支持react操作dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 用于将jsx转换为js -->
<script src="../js/babel.min.js"></script>
<script type="text/javascript">
// 1.创建虚拟 dom
// 第一个参数是标签名,第二个参数是标签属性,第三个属性标签内容
const VDOM = React.createElement('h1', { id: 'title' }, 'hello,React')
// 2.渲染虚拟dom到页面
// 第一个参数是渲染哪个虚拟dom,第二个参数是容器
ReactDOM.render(VDOM, document.getElementById('text'))
</script>
</body>
</html>
但是用js创建虚拟DOM太过繁琐,若是我想让h1包含别的标签比如加一个p标签,使用jsx则只需要
<script type="text/babel"> /* 这儿要写babel */
// 1.创建虚拟 dom
const VDOM = ( /* 这儿不要写引号,因为不是字符串 */
<h1 id="title">
<span>Hello,React</span>
</h1>
)
// 2.渲染虚拟dom到页面
// 第一个参数是渲染哪个虚拟dom,第二个参数是容器
ReactDOM.render(VDOM, document.getElementById('text'))
</script>
而使用js创建虚拟DOM则需要
<script type="text/javascript">
// 1.创建虚拟 dom
// 第一个参数是标签名,第二个参数是标签属性,第三个属性标签内容
const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', {}, 'hello,React'))
// 2.渲染虚拟dom到页面
// 第一个参数是渲染哪个虚拟dom,第二个参数是容器
ReactDOM.render(VDOM, document.getElementById('text'))
</script>
可想而知若是还想包更多的标签js创建虚拟DOM有多繁琐
React脚手架
React脚手架意义
1.脚手架是开发现代Web应用的必备
2.充分利用 Webpack,Babel,ESLint等工具辅助项目开发
3.零配置,无需手动配置繁琐的工具即可使用
4.关注业务,而不是工具配置
使用React脚手架初始化项目
初始化项目,命令: npx create-react-app my-pro
npx 目的:提升包内提供的命令行工具的使用体验
原来:先安装脚手架包,再使用这个包中提供的命令
现在:无需安装脚手架包,就可以直接使用这个包提供的命令
create-react-app 这个是脚手架名称 不能随意更改
my-pro 自己定义的项目名称
JSX的使用
JSX产生的原因
由于通过createElement()方法创建的React元素有一些问题,代码比较繁琐,结构不直观,无法一眼看出描述的结构,不优雅,用户体验不爽
JSX的概述
JSX是JavaScript XML 的简写,表示在JavaScript代码中写HTML格式的代码
优势:声明式语法更加直观,与HTML结构相同,降低了学习成本,提升开发效率
简单入门使用
先创建一个“容器”
<!-- 准备好一个“容器” -->
<div id="text"></div>
使用JSX语法创建react元素
const VDOM = ( /* 这儿不要写引号,因为不是字符串 */
<h1 id="title">
我是通过JSX创建的元素
</h1>
)
使用ReactDOM来渲染元素
ReactDOM.render(VDOM, document.getElementById('text'))
JSX语法
JSX是来描述页面的结构,我们一般在编写业务逻辑渲染页面的时候,需要涉及到传递值,调用函数,判断条件,循环等,这一些在JSX中都能得到支持
嵌入JS表达式
语法:{JavaScritp表达式}
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌入JS表达式</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="text"></div>
<!-- 引入 react 核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入 react-dom ,用于支持react操作dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 用于将jsx转换为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> /* 这儿要写babel */
let content = '插入的内容'
// 1.创建虚拟 dom
let VDOM = ( /* 这儿不要写引号,因为不是字符串 */
<h1 id="title">
我是通过JSX创建的元素+ {content}
</h1>
)
// 2.渲染虚拟dom到页面
// 第一个参数是渲染哪个虚拟dom,第二个参数是容器
ReactDOM.render(VDOM, document.getElementById('text'))
</script>
</body>
</html>
注意点:
- 只要是合法的js表达式都可以进行嵌入
- JSX自身也是js表达式
- 注意:js中的对象是一个例外,一般只会出现在style属性中
- 注意:在{}中不能出现语句
条件渲染
根据不同的条件来渲染不同的JSX结构
let isLoading = true
let loading = ()=>{
if(isLoading){
return <div>Loading...</div>
}
return <div>加载完成</div>
}
可以发现,写JSX的条件渲染与我们之前编写代码的逻辑是差不多的,根据不同的判断逻辑,返回不同的 JSX结构,然后渲染到页面中
列表渲染
- 如果需要渲染一组数据,我们应该使用数组的 map () 方法
- 注意:渲染列表的时候需要添加key属性,key属性的值要保证唯一
- 原则:map()遍历谁,就给谁添加key属性
- 注意:尽量避免使用索引号作为key
let arr = [{
id:1,
name:'三国演义'
},{
id:2,
name:'水浒传'
},{
id:3,
name:'西游记'
},{
id:4,
name:'红楼梦'
}]
let ul = (<ul>
{arr.map(item => <li key={item.id}>{item.name}</li>)}
</ul>)
ReactDOM.render(ul,document.getElementById('root'))
样式处理
行内样式 -style
在style里面我们通过对象的方式传递数据
<li key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>
这种方式比较的麻烦,不方便进行阅读,而且还会导致代码比较的繁琐
类名 -className
创建CSS文件编写样式代码
.container {
text-align: center
}
在js中进行引入,然后设置类名即可
import './css/index.css'
<li className='container' key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>
小结
- JSX是React的核心内容
- JSX表示在JS代码中写HTML结构,是React声明式的体现
- 使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构
- 推荐使用className的方式给JSX添加样式
码
.container {
text-align: center
}
在js中进行引入,然后设置类名即可
import './css/index.css'
<li className='container' key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>
小结
- JSX是React的核心内容
- JSX表示在JS代码中写HTML结构,是React声明式的体现
- 使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构
- 推荐使用className的方式给JSX添加样式
- React完全利用JS语言自身的能力来编写UI,而不是造轮子增强HTML功能