【React】React环境的安装与调用

1、官网及运行文件下载地址

React 官方中文文档 – 用于构建用户界面的 JavaScript 库https://react.docschina.org/

2、网页版运行需要三个文件:


	<!-- 引入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转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

3、下载这三个文件:

1、打开360浏览器,然后,点击下载,新建下载,复制网址进行下载

https://unpkg.com/react@16/umd/react.development.jsicon-default.png?t=M5H6https://unpkg.com/react@16/umd/react.development.js

https://unpkg.com/react-dom@16/umd/react-dom.development.jsicon-default.png?t=M5H6https://unpkg.com/react-dom@16/umd/react-dom.development.jshttps://unpkg.com/@babel/standalone/babel.min.jsicon-default.png?t=M5H6https://unpkg.com/@babel/standalone/babel.min.js

 4、Hello Word示例

<!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>
<style>
    .hello{width: 200px;height: 200px;background-color: rgb(231, 244, 250);line-height: 200px;text-align: center;}
</style>
<body>
    	<div id="hello"></div>
</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转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel" > /* 此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = <div class="hello">Hello,React</div> /* 此处一定不要写引号,因为不是字符串 */
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('hello'))
	</script>
</html>

猜你喜欢

转载自blog.csdn.net/dxnn520/article/details/125619101