React核心概念与JSX
React概况
React是一个只用来写HTML的UI页面的JS库，在MVC设计模式中它只相当于View，故：它并不是一个框架（MVC架构角色设计）。
React组件内数据改动会自动更新到屏幕上。
React项目是一个SPA单页面应用。
使用create-react-app脚手架工具创建的应用会默认安装babel, webpack工具，支持ES6特性。
React的特点
声明式：在使用react编写UI页面的时候，编写的代码只是一种说明，说明页面长什么样子，而对于如何将这段声明描述转换成真实的页面DOM则有React框架来完成。
组件化：react框架的开发是使用的组件化开发，将一个个可重复的块状UI封装成一个个组件，提供了代码的复用。
学习一次到处运行：学了react, 则可以用来写Html前端页面，iOS，安卓移动端应用，VR虚拟现实等。
这三种应用场景都需要导入React, 但是不同的场景需要导入不同的ReactDom
React库与React-Dom库
React库：主要负责创建，管理react组件，它创建的react组件实际上是一个js对象，里面包含了要显示标签的描述说明。
如：创建一个react元素对象。
// React.createElement创建的ele是一个js对象
// 第一个参数：要创建的React元素
// 第二个参数：该React元素的属性
// 第三个参数及其以后的参数：该React元素的子节点
const ele = React.createElement('h1', {id: '标题'}, 'Helle React Ele');
React-Dom库： 主要负责将react生成的组件，标签转换成真实的页面上的DOM元素。它主要是通过库提供的render方法进行实现ReactDOM.render
// ReactDOM.render将这个react生成的js对象，映射成真实的DOM元素并展示到屏幕上
// 第一个参数：要渲染的React元素
// 第二个参数：DOM元素，用于指定渲染到页面中的位置， 所以React创建的应用是SPA单页面应用。
ReactDOM.render(ele, document.getElementById('root'))
真实DOM与虚拟DOM
const ele3 = React.createElement('h2', {id:'title2'}, React.createElement('h3', {id:'title3'}, 'hello, ele3'))
const ele4 = <h2><h3>hello, ele4</h3></h2>
const ele5 = document.getElementById('demo')
console.log('虚拟DOM', ele4)
console.log('真实DOM', ele5)
debugger
ReactDOM.render(ele2,document.getElementById('rootReact'));
console.log('虚拟DOM', ele4)是一个普通的JS对象，它的类型是Object
console.log('真实DOM', ele5)也是一个普通的JS对象，它的类型是Object
它们的区别是：
console.log('虚拟DOM', ele4)因为只在React内部使用，它的方法是属性非常少，是一个很轻量的对象。
console.log('真实DOM', ele5)因为是document上真实存在的对象，所以dom元素需要的属性和方法都有，所以它比较重。
虚拟DOM就是使用React对象创建的ele元素
如虚拟Dom对象：React.createElement('h3', {id:'title3'}, 'hello, ele3')
虚拟DOM
ele4：使用jsx编写的虚拟DOM
const ele4 = <h2><h3>hello, ele4</h3></h2>
ReactDOM.render(ele2,document.getElementById('rootReact'));
ele3: 使用js编写的虚拟Dom
const ele3 = React.createElement('h2', {id:'title2'}, React.createElement('h3', {id:'title3'}, 'hello, ele3'))
ReactDOM.render(ele2,document.getElementById('rootReact'));
babel转换过程
将JSX翻译成JS
ele4：使用jsx编写的虚拟DOM
通过babel转换器转换后，得到
ele3: 使用js编写的虚拟Dom
另外：
在html页面中的script标签里，script的type默认是js,
这里使用type="text/babel"是告诉浏览器，这块作用域用的是JSX, 并用babel进行解析。
<script type="text/babel">
let myDom = <h1>hello tan</h1>;
//将虚拟DOM元素myDom, 渲染到真实DOM上去
ReactDOM.render(myDom,document.getElementById('rootReact'));
</script>
使用脚手架创建项目
方式一：本地全局安装reate-react-app脚手架工具
.npm install -g create-react-app 全局安装脚手架 2.create-react-app --version 查看安装的版本 3.create-react-app my-app 创建项目 4.npm start/ yarn start 启动项目
方式二：临时使用远程reate-react-app脚手架工具
npx是npm v5.2.0引入的一条指令，用于提升包内命令行工具使用体验。可以不先按照到本地而直接使用create-react-app脚手架工具。
yarn是Facebook发布的包管理器，用于替代npm, 功能和npm一样。，具有快速，可靠，安全的特点。
npx create-react-app my-app 创建项目 2.npm start/ yarn start 启动项目
通过使用reate-react-app脚手架创建的项目，默认已经安装了babel，所以项目已经默认支持ES6语法。
如可以使用import导入方式代替require('')方式了
因为react项目是SPA单页面应用，所以在使用reate-react-app脚手架创建的项目里，可以只保留index.html和index.js这两个源代码文件。其中index.html是单页面应用的根页面。index.js是react项目的入口。其中webpack编译器编译的入口就是index.js文件。
最简单的react项目实现中，index.js文件这样写。
import React from 'react';
import ReactDOM from 'react-dom';
const ele = React.createElement('h1', {title: '文章的标题'}, 'Hello React')
ReactDOM.render(ele, document.getElementById('root'))
JSX是React的核心功能，它是声明式的体现，用JSX可以在JS中体现html结构。
通过在JSX中使用JS表达式的方式，实现了React的条件渲染，列表渲染来描述UI的布局结构。
React使用className或style={{}}设置样式布局, 并且React完全是利用了JS的能力，而非造轮子增强html的功能，如for循环在React中用map方法，而在Vue中使用v-for方法。
JSX概况
jsx : javascript xml
可以理解成在js中编写html。这里写的jsx语句本质上是 React.createElement这类js语句的语法糖。
p1和p2是等价的。
let p1 = React.createElement('h1',null,"hello React !!")
let p2 = <h1>"hello React !!"</h1>
ReactDom.render(p1, document.getElementById("root"))
为什么能在react脚手架项目中可以直接使用jsx, 而不能直接在js中使用jsx， 是因为create-react-app脚手架中默认加入了babel转换工具，使用@babel/preset-react做这层转换。
jsx注意点
1.react中的属性是驼峰命名
2.与html的标签中属性不同的情况class->className
3.如果标签中没有内容，那么可以直接/>结束
3.定义jsx时可以使用（）包裹，放置编译器自动插分号陷阱。
在jsx中使用js变量，其实也是在js语法糖中使用js变量。
jsx中引入js表达式时需要用{}，需要注意Vue中插入变量使用的是{{}}双花括号插值表达式
1.可以放表达式，不可以放if,for语句
2.jsx标签变量也可以放
3.不可以方法{对象}，style可以放对象{{}}
js表达式是什么？
是一个带返回值的变量或其他 如：
1.a
2.a+b
3.list.map()
它们在左边都可以用一个const var = 进行接收。
这个接收的值是{}要展示的值
js语句是什么
js语句是什么
1.if(){}
2.for(){}
3.switch(){}
这些没有返回指定值的代码就是js语句，它们不能放到React的{}中
2.内联样式，要用style={{key:value}}
3.标签首字母
首字母小写，React会自动转换成对应的html标签 首字母大写，React会寻找定义的组件
条件渲染
//1.if else表达式
//2.三元运算符
//3.逻辑运算符
let loading = false
//条件渲染
//1.if else表达式
let loadData = () => {
if (loading) {
return <h4>加载中...</h4>
} else {
return <h4>加载完成</h4>
}
}
//2.三元运算符
loadData = () => {
return loading ? <h4>加载中...</h4> : <h4>加载完成</h4>
}
//3.逻辑运算符
loadData = () => {
return loading && <h4>加载中...</h4>
}
const container = (
<div>
{loadData()}
</div>
)
ReactDom.render(container, document.getElementById("root"))
列表渲染
1.使用map做列表映射
2.list下要设置key做唯一标识, 并且这个key最好不要用index下标，防止对数据删除时造成混乱
//列表渲染
const songs = [
{id:1,name:"大约在冬季"},
{id:2,name:"菊花台"},
{id:3,name:"捉泥鳅"}]
const container = (
<div>
{songs.map((item)=><li key={item.id}>{item.name}</li>)}
</div>
)
ReactDom.render(container, document.getElementById("root"))
样式渲染
jsx样式设置有2种方式
1.通过style={{color:"red", textAlign:"center"}}对象的方式设置
2.通过className="title"类名的方式设置
//样式渲染
const artile = function () {
return <p className="title" style={{color:"red", textAlign:"center"}}>这是一篇文章</p>
}
const container = (
<div>
{artile()}
</div>
)
ReactDom.render(container, document.getElementById("root"))
