React 的基本使用！
React 介绍！
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
单页面使用React！
1.准备好一个“容器”
2.引入react核心库
3.引入react-Dom 这个是用于支持react操作dom
4.引入babel用于将jsx语法转为js
下列是在 单页面定义的react页面：首先需要下载react，下载包里面提供了方法以及学习的实例你可以在官网 （https://reactjs.org/) 下载最新版。 或者我们也可以在单页面中引入有关于react 的 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>
下面我们调用 React的createElement()方法 并渲染在单页面上。
<script type='text/babel'> //这里一定要写babel 因为我们用的是jsx语法 js代码与html标签相结合
//一种方法
var ll = React.createElement('div', { className: "title" }, "标题")
console.log(ll);
ReactDOM.render(ll, document.getElementById("app"))
//第二种直接声明对象 运用ReactDom.render()方法渲染
var name = '李四'
var age = 19
var d1 = 'r1'
var re = (<div className={d1}>
<h3> 我是 {name},今年 {age} 岁了 </h3>
</div>)
ReactDOM.render(re, document.getElementById("app"))
<script/>
在这里给大家总结一下 jsx 的语法规则：
jsx语法规则：
1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要使用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={{ key:value }}的形式去写。
5.只有一个根标签 一般用div包裹起来。
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
通过jsx 给大家总结一下关于jsx的面试题！
1. 什么是jsx？
JSX 是J avaScript XML 的简写。是 React 使用的一种文件，它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能。下面是JSX的一个例子：
2. jsx与js的区别？
1.JS：即JavaScript，一种直译式脚本语言
JSX:即JavaScript XML——一种在React组建内部构建标签的类XML语法。(增强React程序组件的可读性)
2.区别：
1、浏览器只能识别普通的js，普通的css，并不能识别scss，或者jsx（scss是css的拓展，jsx可以看做是js的拓展），所以webpack的作用是把scss转换为css，把jsx转换为浏览器可以识别的js，然后浏览器才能正常使用；
2、js就是本身并不支持react里面的jsx（也就是在js文件里面直接写html那种），现在他们可以直接写是因为编辑器可以选择语言的解析模式了（待会截图给你看），编辑器正确显示是因为 虽然是.js文件，编辑器用了.jsx的解析模式，所以显示正确
3…jsx文件会自动触发编辑器以jsx的模式解析当前的文件，所以可以更不会出错
JSX语法，像是在Javascript代码里直接写XML的语法，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，React 官方推荐使用JSX， 当然你想直接使用纯Javascript代码写也是可以的，只是使用JSX，组件的结构和组件之间的关系看上去更加清晰。
