文章目录
一、什么是React
React是一个用于构建用户界面的javaScript库,起源于facebook的内部项目,后续在13年开源了出来
1.1 特点
- 声明式
你只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI
- 基于组件
组件时React最重要的内容,组件表示页面中的部分内容
- 学习一次,随处使用
使用React可以开发Web应用,使用React可以开发移动端,可以开发VR应用,可以结合react-native angular-ionic、vue-weex
1.2 React的使用
- 引入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>
- 创建React元素
// 创建元素节点
// 1. 元素名称
// 2. 元素属性 传递的是个对象
// 3. 元素内容
let title = React.createElement('li', null, 'hellow react');
- 渲染到页面
// 渲染到页面
ReactDOM.render(title, root)
1.3 实例
<!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>Document</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元素
// 参数1:元素名称
// 参数2:元素属性
// 第3个及以后的参数:元素的子节点
// const title = React.createElement('h1', { title:'标题', id:'1' }, 'hello world!')
const title = React.createElement('h1', { title: '标题', id: '1' }, 'hello world!', React.createElement('span', null, '我是span里的文本'))
// 3、渲染react元素
// 参数1:要渲染的react元素
// 参数2:挂载点
ReactDOM.render(title, document.getElementById('root'))
</script>
</body>
</html>
二、 React脚手架
2.1 React脚手架意义
- 脚手架是开发现代Web应用的必备
- 充分利用 Webpack,Babel,ESLint等工具辅助项目开发
- 零配置,无需手动配置繁琐的工具即可使用
- 关注业务,而不是工具配置
2.2 使用React脚手架初始化项目
-
初始化项目,命令:
npx create-react-app my-pro
npx
目的:提升包内提供的命令行工具的使用体验- 原来:先安装脚手架包,再使用这个包中提供的命令
- 现在:无需安装脚手架包,就可以直接使用这个包提供的命令
create-react-app
这个是脚手架名称不能随意更改
my-pro
自己定义的项目名称
-
启动项目,在项目根目录执行命令:
npm start
-
yarn命令简介
- yarn 是Facebook发布的包管理器,可以看做是npm的替代品,功能与npm相同
- yarn具有快速,可靠和安全的特点
- 初始化新项目:
yarn init
- 安装包:
yarn add
包名称 - 安装项目依赖:
yarn
2.3 脚手架中使用React
- 导入
react
和react-dom
两个包
import React from 'react'
import ReactDOM from 'react-dom'
- 创建元素
const text = React.createElement('h1', null, 'hello react')
- 渲染元素
ReactDOM.render(text, document.getElementById('root'))
- 在
index.js
中输入下面代码会自动显示在浏览器中
// 1.导入模块
import React from 'react'
import ReactDOM from 'react-dom'
// 2.创建元素
const text = React.createElement('h1', null, 'hello react')
// 3.渲染到页面
ReactDOM.render(text, document.getElementById('root'))
三、JSX
的使用
3.1 概述
JSX
产生的原因
由于通过createElement()
方法创建的React元素有一些问题,代码比较繁琐,结构不直观,无法一眼看出描述的结构,不优雅,用户体验不爽
JSX
的概述
JSX
是JavaScript XML
的简写,表示在JavaScript代码中写HTML格式的代码
优势:声明式语法更加直观,与HTML结构相同,降低了学习成本,提升开发效率
3.2 简单入门使用
使用步骤
- 使用JSX语法创建react元素
let text = <h1>我是通过JSX创建的元素</h1>
- 使用ReactDOM来渲染元素
ReactDOM.render(text,document.getElementById('root'))
为什么在脚手架中可以使用JSX语法
- JSX 不是标准的ECMAScript语法,它是ECMAScript的语法拓展
- 需要使用babel编译处理后,才能在浏览器环境中使用
- create-react-app脚手架中已经默认有该配置,无需手动配置
- 编译JSX语法的包: @bable/preset-react
注意点
- React元素的属性名使用
驼峰命名法
- 特殊属性名:
class -> className
,for -> htmlFor
,tabindex -> tabIndex
- 如果没有子节点的React元素可以用
/>
来结束 - 推荐:使用小括号包裹JSX,从而避免JS中自动插入分号报错
3.3 JSX语法
JSX是来描述页面的结构,我们一般在编写业务逻辑渲染页面的时候,需要涉及到传递值,调用函数,判断条件,循环等,这一些在JSX中都能得到支持
3.3.1 嵌入JS表达式
语法:{JavaScritp表达式}
例子:
let content = '插入的内容'
let h1 = <h1>我是通过JSX创建的元素+ {content}</h1>
注意点
- 只要是合法的js表达式都可以进行嵌入
- JSX自身也是js表达式,也可以被嵌入
- 注意:js中的
对象
是一个例外,一般只会出现在style
属性中,用于设置行内样式 - 注意:在{}中不能出现语句(if / for)
3.3.2 条件渲染
根据不同的条件来渲染不同的JSX结构
let isLoading = true
let loading = ()=>{
if(isLoading){
return <div>Loading...</div>
}
return <div>加载完成</div>
}
可以发现,写JSX的条件渲染与我们之前编写代码的逻辑是差不多的,根据不同的判断逻辑,返回不同的 JSX结构,然后渲染到页面中
3.3.3 列表渲染
- 如果需要渲染一组数据,我们应该使用数组的 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'))
3.3.4 样式处理
行内样式 -style
在style里面我们通过对象的方式传递数据
// 双大括号与vue的不同,第一个是jsx语法,第二个是里面是对象
<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添加样式 - React完全利用JS语言自身的能力来编写UI,而不是造轮子增强HTML功能