react入门
官网
React是什么？
- react用于构建用户界面的JavaScript库。
- react是一个将数据渲染为HTML视图的开源JavaScript库
谁开发的？
由Facebook开发，且开源。
- 起初由Facebook的软件工程师Jordan Walke创建。
- 于2011年部署于Facebook的newsfeed。
- 随后在2012年部署于Instagram。
- 2013年5月宣布开源。
- 近十年 “陈酿” React正在被腾讯、阿里等一线大厂广泛使用。
为什么要学？
- 原生JavaScript操作DOM繁琐、效率低（DOM-API 操作 UI）。
- 使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
- 原生JavaScript没有组件化编码方案，代码复用率低。
react的特点
- 采用组件化模式、声名式编程、提高开发效率及组件复用率。
- 在React Native中可以使用React语法进行移动端开发。
- 使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。
学习React之前你要掌握的JavaScript基础知识
- 判断this的指向
- class(类)
- ES6语法规范
- npm包管理器
- 原型、原型链
- 数组常用方法
- 模块化
React高效的原因
- 使用虚拟(virtual)DOM，不总是直接操作页面真实DOM。
- DOM Diffing 算符，最小化页面重绘。
React安装
- React 可以直接下载使用，你可以在官网 https://reactjs.org/ 下载最新版。
- 你也可以直接使用 Staticfile CDN 的 React CDN 库，地址如下：
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
- 官方提供的 CDN 地址：
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
- 实例如下：
<!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>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="app"></div>
</body>
<script type="text/babel"> //此处一定要写babel
// 创建虚拟DOM
const VDOM = <h1 id="text">hello react!</h1> //此处一定不要写引号，因为不是字符串
// 渲染虚拟DOM到页面上
ReactDOM.render(VDOM, document.getElementById("app"))
</script>
</html>
- 引入库解析：
- react.development.js - React 的核心库
- react-dom.development.js - 提供与 DOM 相关的功能
- babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。
- 通过 npm 使用 React
- 如果你的系统还不支持 Node.js 及 NPM 安装包及源码下载地址为：https://nodejs.org/en/download/。
- 如果使用 npm 速度慢的话，你可以使用淘宝镜像 cnpm 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
- 使用 create-react-app 快速构建 React 开发环境
执行以下命令创建项目：
cnpm install -g create-react-app
//全局安装 create-react-app
create-react-app my-app
//创建项目 my-app
cd my-app/
//进入my-app文件夹
npm start
//运行项目
虚拟DOM
- 本质是object类型的对象(一般对象)。
- 虚拟DOM比较 “轻”，真实DOM比较 “重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
- 虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
JSX
- JSX介绍
-
全称：JavaScript XML
-
React定义的一种类似于XML的JS扩展语言：JS+XML
-
本质上React.createElement(component,props,children)方法的语法糖
-
作用：用来简化创建虚拟DOM
a. 写法：var VDOM=< h1>Hello JSX!</ h1>
b. 它不是字符串，也不是HTML/XML标签
c. 它最终产生的就是一个JS对象 -
标签名任意：HTML标签或者其它标签
- 实例如下：
<!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>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<style>
.title {
background-color: pink;
}
</style>
<body>
<!-- 准备一个容器 -->
<div id="app"></div>
</body>
<script type="text/babel">
const id = 'Title'
const data = 'Hello,REact'
// 创建虚拟DOM
const VDOM = (
<div>
<h1 className="title" id={id.toLowerCase()}>
<span style={{ color: "white", fontSize: "30px" }}>{data.toLocaleLowerCase()}</span>
</h1>
<input type="text" name="" id="" />
<text>123</text>
<Text>123</Text>
</div>
)
// 渲染虚拟DOM到页面上
ReactDOM.render(VDOM, document.getElementById("app"));
</script>
</html>
- JSX语法规定
- 定义虚拟DOM时，不要写引号。
- 标签中混入JS表达式时要用 {} 。
- 样式的类名指定不要用class，需要使用className 。
- 内联样式，要用style={{key:value}}的形式去写。
- 只有一个根标签。
- 标签必须闭合。
- 标签首字母
a. 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
b. 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
遍历数据（map）
- 实例如下：
<!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>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="app"></div>
</body>
<script type="text/babel">
const list = ["Angular", "React", "Vue"]
const obj = [{ id: 1, name: 'Angular' }, { id: 2, name: "React" }, { id: 3, name: "Vue" }]
// 创建虚拟DOM
const VDOM = (
<div>
<ul>
<h1>前端框架列表</h1>
{list.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
<ul>
{
obj.map(item => (
<li key={item.id}>{item.name}</li>
))
}
</ul>
</div>
)
// 渲染虚拟DOM到页面上
ReactDOM.render(VDOM, document.getElementById("app"));
</script>
</html>
- Js表达式与JS语句
- 表达式：一个表达式可以产生一个值，可以放在任何一个需要的地方
下面这些都是表达式：
a. a
b. a+b
c. fn(1)
d. arr.map(item=>{})
e. function fn(){} - 语句：
下面这些都是表达式：
a. if(){}
b. for(){}
c. switch(){case:xxx}
