1.react核心库react.development.js
2.react_dom库，用于支持react操作dom（react-dom.development.js）
3.引入bable，解析jsx语法的库，用于将jsx转换为js(babel.min.js)
上述三个库是写基础react的基本库
下面我将用一个例子来总结jsx语法规则
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello_react</title><style>.title {color: blue;background-color: aqua;}</style>
</head><body><!-- 引入react 核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom库 ，用于支持react操作Dom --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel 解析jsx语法的库，用于将jsx转换为js --><script type="text/javascript" src="../js/babel.min.js"></script></script><!-- 准备一个容器用于渲染接收 --><div id="test"></div><script type="text/babel">const myId = 'aiXueXi'const myData = 'HeLLo,ReaCt'// 创建虚拟DOM// toLocaleLowerCase()转换成小写字母// toUpperCase()转换成大写字母const VDOM = (<div><h2 className='title' id={myId.toLocaleLowerCase()}><span>{myData.toLocaleLowerCase()}</span></h2><h3 className='title' id={myId.toUpperCase()}><span >{myData.toUpperCase()}</span></h3><input type="text" /><good>测试</good></div>)// 渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))</script>
</body></html>上面一个例子我简单利用react的jsx创建虚拟dom来进行渲染页面
从而总结jsx语法规则如下
- 定义虚拟dom的时候不要写引号
- 标签中混入js表达式的时候要用花括号
- 样式的类名不能用class，要用className
- 内联样式，style={{key:value}}的形式去写
- 只有一个根标签
- 标签首字母分大小写两种情况
- 如果首字母小写字母开头，则将改标签转换为html中的同名元素，如果html中没有该标签对应的同名元素就会报错
- 如果首字母是大写字母开头，react就会去渲染对应的组件，如果没有该组件就会报错
)
