React基础学习笔记（二）-jsx简介及基础语法使用示例
React项目启动流程解析
主要目的：保证读者拿到当前文章及后续文章中的实例代码都可以正常运行并得到正确结果
修订一点儿内容，之前没有考虑过文档中示例的可执行性， 可能会导致很多初学者看到这篇文章以及示例，不明白应该怎么取运行这些案例，这里对react项目的启动流程做一下简单说明如下：
React调用顺序: index.html → index.js→ components/组件
一般项目创建好后会有二个文件：index.html、index.js。
项目根目录文件夹下的public/index.html主要的作用就是最终项目项目打包编译后生成的虚拟DOM挂载的根DOM节点
项目根目录文件夹下的src/index.js是项目的入口文件，最终所有的react.Component实例对象都会被编译成js,通过render方法生成虚拟DOM最后进行挂载渲染到index.html。
说白了，React创建的项目默认就是个单页应用，只是把这个静态页面的view层的代码拆分成VM层，React框架主要的作用就是实现VM层的主要内容，在VM层通过js从服务端获取到数据
示例中代码的使用和调试方式：将示例的代码复制，直接覆盖粘贴到项目根目录/src/index.js文件中，替换掉index.js中原本的内容即可， 保存运行，在浏览器即可访问测试。
1、JSX简介
一个简单声明实例
import React from 'react'
import ReactDOM from 'react-dom'
// 下面就是一个声明jsx对象最简单的使用方式
const element = <h3>Hello, React!</h3>
ReactDOM.render(element, document.getElementById('root'))
上面这个示例中的标签语法既不是字符串也不是 HTML。它被称为 JSX，是一个JavaScript 的语法扩展。
我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。
JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。
JSX 可以生成 React “元素”
2、使用JSX的原因和目的
- React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。
- React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离
- React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。
- 它还可以使 React 显示更多有用的错误和警告消息。
3、JSX中常用操作演示
3.1 在JSX中嵌入表达式（相当于Vue中的插值语法）
import React from 'react'
import ReactDOM from 'react-dom'
// 第一步：声明数据
const str = 'hello react'
const gender = true
const price = 15
// 第二步：声明JSX对象
const jsxDemo = <div>
<h3>{
str}<h3>
<h3>{
price}<h3>
<h3>{
gender ? '男' : '女'}<h3>
<h3>{
price + 20}<h3>
<h3>{
price - 10}<h3>
<h3>{
price * 2}<h3>
<h3>{
price / 3}<h3>
</div>
// 第三步：使用ReactDOM对象进行元素生成渲染
ReactDOM.render(jsxDemo, document.getElementById('root'))
3.2 在JSX中给标签属性赋值（相当于Vue中的单向数据绑定）
// 第一步：声明数据
const attrType = 'text'
const attrName = 'username'
const attrVal = 'admin'
const attrClsName = 'uCls'
const attrPType = 'password'
const attrPName = 'password'
const attrPVal = '123123'
const attrClsPName = 'pCls'
// 第二步：声明JSX对象
const jsxDemo = <div>
// class属性在进行赋值时，属性名称必须写成className
<input type={
attrType} name={
attrName} value={
attrVal} className={
attrClsName} />
<input type={
attrPType} name={
attrPName} value={
attrPVal className={
attrClsPName} /> } />
</div>
// 第三步：使用ReactDOM对象进行元素生成渲染
ReactDOM.render(jsxDemo, document.getElementById('root'))
3.3 在JSX中嵌套jsx
// 第一步：声明子JSX对象
const subJSX = <h3>我是子JSX</h3>
// 第二步：声明父JSX对象
const jsxDemo = <div>
<h3>我是父JSX</h3>
<hr />
{
subJSX}
</div>
// 第三步：使用ReactDOM对象进行元素生成渲染
ReactDOM.render(jsxDemo, document.getElementById('root'))
3.4 在JSX中嵌套jsx数组
// 第一步：声明子JSX对象
const subJsxArr = [<h3>我是子JSX一号</h3>, <h3>我是子JSX二号</h3>, <h3>我是子JSX三号</h3>]
// 第二步：声明父JSX对象
const jsxDemo = <div>
<h3>我是父JSX</h3>
<hr />
{
subJsxArr}
</div>
// 第三步：使用ReactDOM对象进行元素生成渲染
ReactDOM.render(jsxDemo, document.getElementById('root'))
3.5 在JSX中循环数据数组生成JSX对象并渲染的两种方式
- 方式一：先生成jsx数组，在渲染jsx数组
// 第一步：声明数组数据
const dataArr = ['zhangsan', 'lisi', 'xiaocao']
// 第二步：声明jsx数组
const subJsxArr = dataArr.map((item, key) => {
return (
<h3 key={
key}>{
item}</h3>
)
})
// 第三步：声明父JSX对象
const jsxDemo = <div>
<h3>我是父JSX</h3>
<hr />
{
subJsxArr}
</div>
// 第四步：使用ReactDOM对象进行元素生成渲染
ReactDOM.render(jsxDemo, document.getElementById('root'))
- 方式二：直接使用表达式在jsx中生成jsx数组进行渲染
// 第一步：声明数组数据
const dataArr = ['zhangsan', 'lisi', 'xiaocao']
// 第二步：声明父JSX对象
const jsxDemo = <div>
<h3>我是父JSX</h3>
<hr />
{
dataArr.map((item, key) => {
return (
<h3 key={
key}>{
item}</h3>
)
})}
</div>
// 第三步：使用ReactDOM对象进行元素生成渲染
ReactDOM.render(jsxDemo, document.getElementById('root'))
4、JSX总结
- jsx 语法的本质：并不是直接把 jsx 渲染到页面上，而是 内部先转换成了 createElement形式，再渲染的，必须先引入React及ReactDOM，在解析运行的时候默认调用 React.createElement(‘标签名称’, ‘标签属性取值对象（键值对）’, ‘文本内容’)来创建元素，所以必须先引入React
- 在jsx语法中，要把 JS代码写到 { } 中，所有标签必须要有结束
- 在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；
- 在 JSX 语法中，标签必须 成对出现，如果是单标签，则必须自闭和！
- jsx中的元素添加class类名,需要使用className来替代class
- 使用 { /* 这是注释 */ } 在 jsx 中 写注释