1.0 开始学习React——React全家桶
- React基础
- React-Router路由库
- PubSub消息管理库
- Redux集中式状态管理的库
- Ant-Design精美的UI组件库
2.0 React是什么
用于构建用户界面的JavaScript库(视图)。
前端:
1.发送请求获取数据
2.处理数据(过滤、整理格式等)
3.操作DOM呈现页面
Facebook开发,且开源。(软件工程师Jordan Walke)
3.0 React的特点
1.采用组件化模式、声明式编码,提高开发效率及组件复用率
2.在React Native中可以使用React语法进行异动端开发
3.使用虚拟Dom+优秀的Diffing算法,尽量减少与真实DOM的交互
4.0 学习React之前需要掌握的JavaScript基础知识
- 判断this的指向
- class(类)
- ES6语法规范
- npm包管理器
- 原型、原型链
- 数组常用方法
- 模块化
5.0 官网
英文官网: https://reactjs.org/
6.0 相关js库
- react.js:React核心库。
- react-dom.js:提供操作DOM的react扩展库。
- babel.min.js:解析JSX语法代码转为JS代码的库
7.0 开发第一步
下载js库
新建一个文件夹“react_basic”,新建文件夹“js”,将几个文档放入其中。
<!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>
<!-- 1.0 准备容器 -->
<div id="test"></div>
<!-- 2.0引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 3.0 引入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.0 创建虚拟DOM **/
const vDom =
<h1>Hello,React</h1>
/*jsx:一定不能加引号,因为不是字符串*/
/*2.0 渲染虚拟DOM到页面*/
ReactDOM.render(vDom, document.getElementById('test')) //虚拟DOM,容器
</script>
<body>
</body>
</html>
8.0 React为什么不用js而用jsx?
jsx仅在js基础上加入较少的规则。
jsx解决虚拟DOM编写繁琐的问题。
如下两段代码等价:
<script type="text/babel" > /* 此处一定要写babel */
//1.创建虚拟DOM
const VDOM = ( /* 此处一定不要写引号,因为不是字符串 */
<h1 id="title">
<span>Hello,React</span>
</h1>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
<script type="text/javascript" >
//1.创建虚拟DOM
const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
也就是说jsx最终会翻译成js执行,省去的麻烦是不用程序员自己去编写冗长的代码。
9.0 虚拟DOM到底是什么
就是一个一般的js对象,Object类型。
测试代码如下:
<script type="text/babel" > /* 此处一定要写babel */
//1.创建虚拟DOM
const VDOM = ( /* 此处一定不要写引号,因为不是字符串 */
<h1 id="title">
<span>Hello,React</span>
</h1>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
const TDOM = document.getElementById('demo')
console.log('虚拟DOM',VDOM);
console.log('真实DOM',TDOM);
debugger;
console.log(typeof VDOM);
console.log(VDOM instanceof Object);
/*
关于虚拟DOM:
1.本质是Object类型的对象(一般对象)
2.虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM,呈现在页面上。
*/
</script>
10.0 jsx语法规则
- 全称: JavaScript XML
- react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
- 作用: 用来简化创建虚拟DOM
- 写法:var ele = <h1>Hello JSX!</h1>
- 注意1:它不是字符串, 也不是HTML/XML标签
- 注意2:它最终产生的就是一个JS对象
- 标签名任意: HTML标签或其它标签
- 标签属性任意: HTML标签属性或其它
- 基本语法规则
- 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
- 遇到以 { 开头的代码,以JS语法解析: 标签中的js表达式必须用{ }包含
- babel.js的作用
- 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
- 只要用了JSX,都要加上type="text/babel", 声明需要babel来处理
<script type="text/babel" >
const myId = 'aTgUiGu'
const myData = 'HeLlo,rEaCt'
//1.创建虚拟DOM
const VDOM = (
<div>
<h2 className="title" id={myId.toLowerCase()}>
<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
</h2>
<h2 className="title" id={myId.toUpperCase()}>
<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
</h2>
<input type="text"/>
</div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
/*
jsx语法规则:
1.定义虚拟DOM时,不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class,要用className。
4.内联样式,要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。
(2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。
*/
</script>
最终效果如下:
11.0 JSX2.0
JSX练习
需求: 动态展示如下列表
我们可以如下写:
<!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>
<!-- 1.0 准备容器 -->
<div id="test"></div>
<!-- 2.0引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 3.0 引入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>
<body>
<script type="text/babel">
const vDom=(
<div>
<h1>前端js框架</h1>
<hl>
<li>Angular</li>
<li>React</li>
<li>vue</li>
</hl>
</div>
)
ReactDOM.render(vDom,document.getElementById('test'))
</script>
</body>
</html>
但我们日常开发一般都需要动态显示,代码修改如下:
<script type="text/babel">
const data=['Angular','React','vue']
const vDom=(
<div>
<h1>前端js框架</h1>
<hl>
{
for (let i = 0; i < data.length; i++) {
// 一些操作
}
}
</hl>
</div>
)
ReactDOM.render(vDom,document.getElementById('test'))
</script>
会发现如上代码会报错的。
/*
一定注意区分:【js语句(代码)】与【js表达式】
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
下面这些都是表达式:
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
2.语句(代码):
下面这些都是语句(代码):
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}
*/
修改代码:
<script type="text/babel">
const data = ["Angular", "React", "vue"];
const vDom = (
<div>
<h1>前端js框架</h1>
<hl>
{data.map((item) => {
return <li>{item}</li>;
})}
</hl>
</div>
);
ReactDOM.render(vDom, document.getElementById("test"));
</script>
以上代码执行时没有问题的,但是会报错:
必须要有一个唯一的
key
属性。
所以可以改写成如下:
<script type="text/babel">
const data = ["Angular", "React", "vue"];
const vDom = (
<div>
<h1>前端js框架</h1>
<hl>
{data.map((item,index) => {
return <li key={index}>{item}</li>;
})}
</hl>
</div>
);
ReactDOM.render(vDom, document.getElementById("test"));
</script>
END