1、react中的jsx语法
- 1.1 这就是简单的jsx语法, 就是再js中写html元素,前提是script标签必须加 type=text/babel, 否则jsx语法会报错
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f1cd96e60d56d6d2fb9e54e2cef90c48.png)
2、jsx 仅仅只是 React.createElement(component, props, …children) 函数的语法糖
const msg1 = <h2>哈哈哈</h2>
- 2.1 在js中上面这段代码等价于下面这段react.createElement()的值
const msg2 = React.createElement("h2", null, "哈哈哈");
- 2.2 jsx语法在babel中会转成 React.createElement()的函数调用。
注意:使用了React相关的方法一定先引入react.development.js 和 react-dom.development.js 这两个文件,否则会报错
<script src="../react/react.development.js"></script>
<script src="../react/react-dom.development.js"></script>
3、babel转换
- 3.1 我们先用jsx语法, 开发页面。部分html代码省略,只写核心js代码
<script src="../react/react.development.js"></script>
<script src="../react/react-dom.development.js"></script>