简单实现Hello React案例
Posted 天界程序员
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单实现Hello React案例相关的知识，希望对你有一定的参考价值。
- 准备好相关依赖
- 创建HTML文件
<!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>Hello React</title>
</head>
<body>
</body>
</html>
- 创建一个容器
<!-- 准备好员工“容器” -->
<div id="app"></div>
- 引入React核心库
<!-- 引入ReactJS核心库 -->
<script type="text/javascript" src="../JS/react.development.js"></script>
- 引入React-dom库
<!-- 引入React-DOM核心库，用于操作DOM -->
<script type="text/javascript" src="../JS/react-dom.development.js"></script>
- 引入Babel
<!-- 引入Babel，用于编译jsx为js -->
<script type="text/javascript" src="../JS/babel.min.js"></script>
- 创建虚拟DOM
<!-- 此处类型为babel -->
<script type="text/babel">
// 1、创建虚拟DOM
const VDOM = <h1>Hello React</h1> // 此处不能加引号，因为不是字符串
</script>
- 将虚拟dom渲染到页面
// 2、将虚拟DOM渲染到页面
ReactDOM.render(VDOM, document.getElementById('app'))
- 完整的HTML
<!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>Hello React</title>
</head>
<body>
<!-- 准备好员工“容器” -->
<div id="app"></div>
<!-- 引入ReactJS核心库 -->
<script type="text/javascript" src="../JS/react.development.js"></script>
<!-- 引入React-DOM核心库，用于操作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>
<!-- 此处类型为babel -->
<script type="text/babel">
// 1、创建虚拟DOM
const VDOM = <h1>Hello React</h1> // 此处不能加引号，因为不是字符串
// 2、将虚拟DOM渲染到页面
ReactDOM.render(VDOM, document.getElementById('app'))
</script>
</body>
</html>
以上是关于简单实现Hello React案例的主要内容，如果未能解决你的问题，请参考以下文章
前端学习（3104）：react-hello-react案例
前端学习（3104）：react-hello-react案例
前端学习（3103）：vue+element今日头条管理-hello-react案例