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-dom@16/umd/react-dom.development.jshttps://unpkg.com/react-dom@16/umd/react-dom.development.jshttps://unpkg.com/@babel/standalone/babel.min.jshttps://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>