一、react简介
1.1、概述
React 起源于 Facebook(脸书) 的内部项目，它是一个用于构建用户界面的 javascript 库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。认为它可能是将来 Web 开发的主流工具之一。
1.2、特点
- 声明式
你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI
- 基于组件
组件时React最重要的内容，组件表示页面中的部分内容
- 学习一次，随处使用
使用React可以开发Web应用(ReactJs)，使用React可以开发移动端(react-native)，可以开发VR应用(react 360)
1.3、React与传统MVC的关系
React用于构建用户界面的JavaScript库，它不是一个完整的MVC框架，最多可以认为是MVC中的V（view），甚至React并不非常认可MVC开发模式。
React构建页面UI库。可以简单地理解为，React将界面分成各个独立的小块，每一个块就是组件，这些组件可以组合、嵌套，就成了我们的页面。
1.4、浏览器扩展与VSCode开发扩展安装
1.4.1、Chrome浏览器扩展
打开Chrome 浏览器设置，点击更多工具，点击扩展程序，点击加载已解压的扩展程序，找到fmkadmapgofadopljbjfkapdkoienihi-4.15.0-8112021-Crx4Chrome.com.crx文件（我会上传），然后选择该文件即可。
1.4.2、VSCode安装react开发扩展
1.5、使用react打印出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>Document</title>
</head>
<body>
<!-- 1、引入react js文件 -->
<!-- react.js 核心包 react-dom.js 相关dom操作的包 -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 2、挂载点 -->
<!-- 解释：react渲染之后的内容统一挂在到当前#app元素中-->
<div id="app"></div>
<!-- 3、创建 -->
<script>
ReactDOM.render(
//在js中有：document.createElement(节点名,属性,子元素)
//在react有：React.createElement(节点名,属性,子元素)
React.createElement('p','','hello world'),
document.querySelector('#app')
)
/*
react渲染过程：
1、拿到react组件中state中的数据，通过object.defineperoprty进行监听
2、通过render函数，把组件渲染成vdom
3、通过patch函数，把vdom挂载到真实的dom上
*/
</script>
</body>
</html>二、JSX
2.1、简介
由于通过React.createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。
React使用 JSX 来替代常规的JavaScript，JSX 可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求。React不一定非要使用JSX，但它有以下优点：
- JSX执行更快，因为它在编译为JavaScript代码后进行了优化
- 它是类型安全的，在编译过程中就能发现错误
- 声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率速
- jsx语法中一定要有一个顶级元素包裹，否则编译报错，程序不能运行
jsx本质是什么？
jsx等同于vue模板，vue模板不是html，jsx不是js
2.2、使用JSX打印出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>Document</title>
</head>
<body>
<!-- 1、引入react js文件 -->
<!-- react.js 核心包 react-dom.js 相关dom操作的包 -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 引入babel -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<!-- 2、挂载点 -->
<!-- 解释：react渲染之后的内容统一挂在到当前#app元素中-->
<div id="app"></div>
<!--
什么是jsx?
react的模板叫jsx jsx不是js，是react的模板，既可以放react语法，又可以放html元素
如何使用jsx?
1、引入babel
2、type="text/babel"
3、jsx提取出来一个变量
-->
<!-- 3、创建 -->
<script type="text/babel">
//jsx提取出来一个变量
var mydiv = <div>hello world</div>
ReactDOM.render(
mydiv,
document.querySelector('#app')
)
</script>
</body>
</html>2.3、插值表达式
附代码：
<!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>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<div id="app"></div>
<!--
react插值语法：{} 可以放变量 表达式 函数调用
-->
<script type="text/babel">
var name = '王昭没有君啊';
var flag = false;
var myJsx = (
//jsx必须要有一个根节点
<div>
<h3>插值表达式案例:</h3>
<p>{name}</p>
<p>{flag ? '王昭没有君啊' : '王昭君'}</p>
</div>
)
//进行渲染
ReactDOM.render(
myJsx,
document.querySelector('#app')
)
</script>
</body>
</html>2.4、动态属性
附代码：
<!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>
<style>
.bgcolor{
color: palevioletred;
}
</style>
</head>
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<div id="app"></div>
<!--
动态属性
react动态属性 直接在属性后面加{} 就可以，
里面可以放变量，表达式函数调用
jsx中没有class 用className来替代
-->
<script type="text/babel">
var mycolor = 'bgcolor';
var myJsx = (
<div>
<h3>动态属性案例</h3>
{/* 静态属性 */}
<p className="bgcolor">王昭没有君啊</p>
{/* 动态属性 */}
<p className={mycolor}>王昭没有君啊</p>
{/* 需求：把某个html片段插入某个标签中 */}
<p dangerouslySetInnerHTML={{__html:'<a href="http://baidu.com">百度一下</a>'}}></p>
</div>
);
ReactDOM.render(
myJsx,
document.querySelector('#app')
)
</script>
</body>
</html>2.5、循环数组
附代码：
<!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>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<div id="app"></div>
<!--
工作中常用的数组循环方式
arr.map() map是对当前数组进行遍历，处理每个元素，之后返回处理之后的数组。
key的作用？
简单的说就是为了提高渲染性能，底层使用diff算法来进行更新比较，
相同的key diff是直接复用的，这样可以提高性能。
工作中使用唯一主键作为key的值，不建议使用index来作为可以
-->
<script type="text/babel">
var arr = [
{id:1,name:'王昭',age:23},
{id:2,name:'王昭君',age:24},
{id:3,name:'王昭没有君啊',age:25}
]
var myJsx = (
<div>
<h3>循环数组案例</h3>
{arr.map(item=>{
return <p key={item.id}>姓名：{item.name} ， 年龄：{item.age}</p>
})}
</div>
)
ReactDOM.render(
myJsx,
document.querySelector('#app')
)
</script>
</body>
</html>2.6、循环对象
附代码：
<!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>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<div id="app"></div>
<!--
循环对象的方法：
先把对象转化为数组，然后循环数组
-->
<script type="text/babel">
var obj ={
name: '王昭没有君啊',
age: 23,
address:'北京'
}
var myJsx = (
<div>
<h3>循环对象案例</h3>
{Object.keys(obj).map(item=>{
return <p key={item}>属性：{item} ，属性值：{obj[item]}</p>
})}
</div>
)
ReactDOM.render(
myJsx,
document.querySelector('#app')
)
</script>
</body>
</html>三、脚手架创建项目
3.1、React脚手架
React团队主要推荐使用create-react-app来创建React新的单页应用项目的最佳方式。
create-react-app会配置你的开发环境，以便使你能够使用最新的 JavaScript特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的电脑上安装 Node >= 8.10 和 npm >= 5.6。
3.2、创建React项目
全局安装
不需要考虑路径，打开cmd输入：
npm install -g create-react-app
构建一个项目
在你想要创建项目的路径下，输入：
create-react-app my-test（my-test为项目名称，不能是中文）
出现如下信息，就表示reactjs项目创建成功
还需要注意的是，3月底发布了React18.0.0版本，我们工作一定要选一个稳定的版本去使用，因为它刚出的版本bug很多，还需要一段时间去维护，我们就需要回到项目中，安装一个稳定的版本，输入如下指令：
cnpm i -S react@17.0.2 react-dom@17.0.2
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
