起源: 由Facebook工程师Jordan Walke开发，因为他深受XHP的影响，XHP是一个简单的PHP HTML组件框架。React于2011年首次亮相，首次用于Facebook的Newsfeed。第二年在Instagram中使用。2013年5月，React在美国JSConf开源。
React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。认为它可能是将来Web开发的主流工具之一。
官网: https://reactjs.org/
中文网站: https://react.docschina.org/
特点：
- 声明式
你只需要描述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-
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>Document</title>
</head>
<body>
<!-- 渲染容器 -->
<div id="root"></div>
<!-- 先react 后react-dom 否则就报错了-->
<!-- 1、引入react -->
<script src="./js/react.development.js"></script>
<!-- 2、引入react-dom -->
<script src="./js/react-dom.development.js"></script>
<script>
// hello react
// (标签,{属性},内容)
// <div class="mydiv">hello React</div>
// 1、创建虚拟节点
let vNode = React.createElement(
'div',
{ className: 'mydiv' },
'hello React'
)
// function getNode(string){
// return document.querySelector(string)
// }
// 2、渲染节点到页面容器中
// render(虚拟节点,DOM节点)
// ReactDOM.render(vNode, document.getElementById('root'))
// react 18后使用createRoot方法
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(vNode)
</script>
</body>
</html>二、JSX语法
1.JSX介绍
由于通过React.createElement()方法创建的React元素有一些问题：代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。
React使用JSX来替代常规的JavaScript，JSX可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求（必须需要有一个唯一的根元素）。React不一定非要使用JSX，但它有以下优点：
JSX执行更快，因为它在编译为JavaScript代码后进行了优化
它是类型安全的，在编译过程中就能发现错误
声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率速
jsx语法中一定要有一个顶级元素包裹（XML一大特点），否则编译报错，程序不能运行
2.JSX重构
Hello world 在项目中尝试JSX最快的方法是在页面中添加这个
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>重构hello world代码：
注意：
在jsx语法中不支持“//”注释形式以及“<!---->”注释形式，只能使用“{/* */}”注释形式。
在JSX语法中，要把JS代码写到{ }中，所有标签必须要闭合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<!-- babel 翻译jsx语法 -->
<script src="./js/babel.min.js"></script>
<!-- type 类型 设置babel 这段代码通过babel 编译 -->
<script type="text/babel">
// let node = React.createElement(
// "div", // 标签
// { className: "mydiv" }, // 属性
// "hollo word" // 内容
// );
// () 是一个结构体 代表是一行
const url = "https://img0.baidu.com/it/u=3356607099,534850047&fm=253&fmt=auto&app=138&f=JPEG?w=903&h=500";
const html = '<h1>标题1<h1>'
const text = "hello 你好";
let node = // 转为正常的html 语言
(
<div className="mydiv">
hello word
{/* 引用text变量 react 中插值表达式*/}
{text}
<div>jsx语法</div>
<div>hello + 110</div>
<div>110 + {text} </div>
{/* 属性的变量解析不能加引号
jsx语法标签必须加闭合标签 "/"
js中的style 中写法是对象{} 格式 单个样式 为{} 故而 {{中间写样式}}
dangerouslySetInnerHTML 渲染 html页面
建议不直接渲染 html 直接渲染容易造成 xss攻击网站
*/}
<img src={url} alt="" style={{ width: 100 + 'px'}}/>
<div dangerouslySetInnerHTML= {{__html: html}} ></div>
</div>
);
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(node);
</script>
</body>
</html>jsx中使用数组遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./js/babel.min.js"></script>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script type="text/babel">
const arr = ["js", "vue", "react"];
let node = (
<div>
数组渲染
<ul>
{/* 第一个{} jsx中写js 必须 {} 箭头函数调用遍历*/}
{arr.map((item) => {
return <li> {item}</li>;
})}
</ul>
<ul>{parse()}</ul>
</div>
);
function parse() {
let tmp = [];
arr.forEach((item) => {
tmp.push(<li>{item}</li>);
});
return tmp;
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(node);
</script>
</body>
</html>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>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./js/babel.min.js"></script>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script type="text/babel">
const data = [
{
id: 1,
name: '我的'
},
{
id: 2,
name: 'peilong'
}
]
let vNode = (
<div>
{data.map((item) => (
<div>
<div>编号:{item.id}</div>
<div>姓名:{item.name}</div>
</div>
))}
</div>
)
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(vNode)
</script>
</body>
</html>
