玩转react——通过CDN引入玩转(直接引用)
玩转vue的时候,直接引入只需要引入一个文件就可以使用了。但是玩转react时候,需要引入引入三个文件。分别是:名字说明react.jsreact的核心语法react-dom.js虚拟dom的语法babel.js讲高级js语法解析为浏览器认识的js三个CDN的链接分别为:<script crossorigin src="https://unpkg.com/react@17/umd/react
·
玩转vue的时候,直接引入只需要引入一个文件就可以使用了。
但是玩转react时候,需要引入引入三个文件。
分别是:
名字 | 说明 |
---|---|
react.js | react的核心语法 |
react-dom.js | 虚拟dom的语法 |
babel.js | 讲高级js语法解析为浏览器认识的js |
三个CDN的链接分别为:
<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>
<!-- react的容器 -->
<div id="app"></div>
</body>
</html>
<script type="text/babel">
//OH的右边的内容就是JSX的语法
//(script type="text/babel" 需要这么写,不然就会报错,需要告诉babel需要转哪些,只需要在script标签写type="text/babel"就可以了)
let oH = <div>
hello react!
</div>;
// ReactDOM.render(要渲染什么内容,渲染到哪里)
//只有用了这个才会创建虚拟DOM,先创建再更新
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的语法可以查看本专栏
更多推荐
已为社区贡献4条内容
所有评论(0)