react 渲染 hello React

react为一套为视图准备的js框架

引入
	四个文件
<script src="js/libs/browser.min.js"></script> //解析jsx语法
<script src="js/libs/react.js"></script>
<script src="js/libs/react-dom.js"></script> //react关于dom的操作
<script src="js/libs/jquery-3.4.1.js"></script>

(1)存在依赖关系,不能改变位置
(2)jsx语法:javascript+xml
(3)将script标签中type改成text/babel,babel能将es6转换成es5,还能解析jsx语法

1、渲染
	ReactDOM.render(页面添加的内容html语法(即标签等非字符串),通过dom节点获取添加的位置成为其子元素)

代码示例:

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="js/libs/browser.min.js"></script>
	<script src="js/libs/react.js"></script>
	<script src="js/libs/react-dom.js"></script>
	<script src="js/libs/jquery-3.4.1.js"></script>
	<style>

	</style>
	
</head>
<body>
  <div class="big">

  </div>

	<script type="text/babel">

		ReactDOM.render(<div>hello react</div>,document.querySelector(".big"));


	</script>
	
</body>

</html>

来源：CSDN

作者：神奇大叔

链接：https://blog.csdn.net/weixin_43294560/article/details/104258886

标签

react

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!