🌈个人主页：前端青山
🔥系列专栏：React篇
🔖人终将被年少不可得之物困其一生
目录
一、概述
官网：React
中文网（个人翻译站）：React 官方中文文档
新版网站：React 官方中文文档
1、介绍
React起源于Facebook的内部项目，它是一个用于构建用户界面的javascript库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。
React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。认为它可能是将来Web开发的主流工具之一。
特点：
-
声明式
你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI
-
基于组件
组件是React最重要的内容，组件表示页面中的部分内容
-
学习一次，随处使用【react原生生态比vue好】
-
ReactJs：web开发
-
react-native：原生app开发（RN）
-
react360：vr应用
-
2、开发工具的安装
-
Chrome 浏览器扩展：https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=zh-CN
-
vscode安装react开发扩展
3、React初识
目标：实现基于react的hello world的显示。
React开发需要引入多个依赖文件，其中react.js、react-dom.js这两个文件是我们创建react应用程序必须要引入的依赖文件。
-
react.js
-
核心，提供创建元素，组件等功能
-
-
react-dom.js
-
提供DOM相关功能
-
下载对应的react.js和react-dom.js的开发版本的js类库文件到本机中后，通过HTML的script标签引入到当前的网页中，如下（注意顺序，先引核心文件，再引其他文件）：
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 world</title>
</head>
<body>
<!-- 1. Add a DOM Container to the HTML -->
<div id="root"></div>
<!-- 2. Add the Script Tags -->
<!-- react封装的一些接口（interface）集合文件 -->
<script src="./js/react.development.js"></script>
<!-- react封装的接口（interface）实现方法 -->
<script src="./js/react-dom.development.js"></script>
<!-- 3. Load our React component（Create a React Component） -->
<script>
// 获取dom容器
const dom = document.getElementById("root")
// React.createElement：创建一个react元素（组件）
// React.createElement语法：React.createElement(标签名,属性对象,子节点)
const el = React.createElement("div", { id: "msg", className: "text" }, "hello world")
// 要求提升：在div中的p标签里面输出hello world
// const el = React.createElement("div", {}, React.createElement("p", {}, "hello world"))
// 进行渲染
ReactDOM.render(el, dom);
</script>
</body>
</html>二、JSX语法
1、概述
由于通过React.createElement()方法创建的React元素有一些问题：代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。
React使用JSX来替代常规的JavaScript，JSX可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求（必须需要有一个唯一的根元素）。React不一定非要使用JSX，但它有以下优点：
-
JSX执行更快，因为它在编译为JavaScript代码后进行了优化
-
它是类型安全的，在编译过程中就能发现错误
-
声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率速
-
jsx语法中一定要有一个顶级元素包裹（XML一大特点），否则编译报错，程序不能运行
2、JSX重构Hello world
在项目中尝试JSX最快的方法是在页面中添加这个 <script> 标签，引入解析jsx语法的babel类库，注意后续的<script>标签块中使用了JSX语法，则一定要申明类型type="text/babel"，否则babel将不进行解析jsx语法。
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>重构hello world代码：
<!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>JSX语法</title>
</head>
<body>
<!-- 1. 创建渲染容器 -->
<div id="root"></div>
<!-- 2. 添加script标签 -->
<!-- jsx语法要求：jsx语法属于js增强语法，浏览器不认识。需要通过babel进行转化，因此需要引入babel.js，要求babel.js文件在最前面 -->
<script src="./js/babel.min.js"></script>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<!-- 3. 创建react组件 -->
<!-- babel默认不解析script代码段，只解析text/babel属性的script代码段 -->
<script type="text/babel">
// 获取dom
const dom = document.getElementById("root")
// 创建组件（jsx语法）
const el = (
<div>
<p>hello world</p>
</div>
)
// 渲染
ReactDOM.render(el, dom)
</script>
</body>
</html>3、JSX语法基础
3.1、基础
在JSX语法中，要把JS代码写到{ }中，所有标签必须要闭合。
let num = 100;
let bool = false;
// JSX 语法
var vNode = (
<div>
{/* 我是注释 */}
{num}
<hr />
{/* 三目运算 */}
{bool ? "条件为真" : "条件为假"}
</div>
);
ReactDOM.render(vNode, document.getElementById("app"));注意：在jsx语法中不支持“//”注释形式以及“<!---->”注释形式，只能使用“{/* */}”注释形式。
const src = "http://www.mobiletrain.org/images/index/new_logo.png";
const style = { fontSize: "20px", color: "red" };
const html = "<a href='http://www.baidu.com'>百度一下</a>";
// 获取元素
const app = document.getElementById("app");
// 创建虚拟DOM
const vNode = (
<div>
{ /*标签的属性如果需要被JSX解析，则属性的值不能加引号*/ }
<img src={src} />
<hr/>
<p style={style}>北川3次地震为汶川地震余震</p>
<hr/>
<p className="cl1">iPhone12开售排队</p>
{ /*
输出HTML字符串（了解）
注意点：react默认不解析html字符串
原因是：安全问题
如果真要输出解析的html字符串请按照以下的语法
*/ }
<p dangerouslySetInnerHTML={{__html:html}}></p>
</div>
);
// 渲染页面
ReactDOM.render(vNode, app);3.2、数组渲染
3.2.1、直接渲染
let arr = ["张三", "李四", "王五", "赵六"];
// 获取挂载点
const el = document.getElementById("app");
// 创建虚拟DOM
const vNode = (
<div>
{/* 直接输出数据 */}
{arr}
</div>
);
// 渲染
ReactDOM.render(vNode, el);3.2.2、处理并渲染
let arr = ["张三", "李四", "王五", "赵六"];
// 获取挂载点
const el = document.getElementById("app");
// 创建虚拟DOM
const vNode = (
<div>
{/* 处理并渲染 */}
<ul>
{/* 给循环体包裹一层{}，不包就错 */}
{
arr.map((item, index) => {
return <li key={index}>{item}</li>;
})
}
<hr />
{
/*
给循环体包裹一层{}，不包就错，如果循环体就1行
{}与return可以被省略（箭头函数）
*/
}
{
arr.map((item, index) => (
<li key={index}>{item}</li>
))
}
</ul>
</div>
);
// 渲染
ReactDOM.render(vNode, el);React 使用一种名为 JSX 的语法扩展来编写组件的 UI 结构。JSX 看起来类似 HTML，但实际上是 JavaScript 表达式。它可以与 JavaScript 无缝结合，允许在其中嵌入变量、表达式和函数调用!
