玩转vue的时候，直接引入只需要引入一个文件就可以使用了。
但是玩转react时候，需要引入引入三个文件。
分别是：
| 名字 | 说明 |
|---|---|
| react.js | react的核心语法 |
| react-dom.js | 虚拟dom的语法 |
| babel.js | 讲高级js语法解析为浏览器认识的js |
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 
引入讲究：
react一定要在dom前面，而babel随便你怎么放，或者就直接复制过去不要改。
为什么要引入babel.js？
因为react很多地方运用到了JAX语法，它是react团队发明的一种语法。配合虚拟dom和模板引擎使用。jsx相当于是js的语法糖，为了方便书写DOM。
第一个react例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> <div id="app"></div> </body> </html> <script type="text/babel"> let oH = <div> hello react! </div>; ReactDOM.render(oH, document.querySelector("#app")); </script> 如果没用JSX语法该怎么写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"></div> </body> </html> <script type="text/babel"> let oH= `<h1>hello react</h1>` document.querySelector('#app').innerHTML = oH; </script> 用不用JSX语法的区别：
1、可以看到声明的OH中，源生写法需要用引号引住，不能换行，如果用模板字符串，也可以换行了。
2、其实你看到不管用JAX语法还是不用JAX语法，都是两行代码解决，但JAX语法可以配合react使用，JAX语法无法配合不了源生js使用，会识别不出html标签。但两者写代码的性能是不一样的。react写法可以识别哪些是静态的，哪些是动态的。可以一定程度提高代码的性能。
有关更多JSX的语法可以查看本专栏
原文链接：https://blog.csdn.net/qq_45152044/article/details/124257573?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918465316782350835623%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918465316782350835623&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-20-124257573-null-null.nonecase&utm_term=cdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/5518
