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就会去渲染对应的组件，如果没有该组件就会报错