React之React成功运行Hello React页面
Posted Icy Hunter
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React之React成功运行Hello React页面相关的知识，希望对你有一定的参考价值。
文章目录
前言
稍微学学前端开发，因为看一些兼职还是开发的活比较多，为了以后多条路子走，就浅学一下React吧
React
React采用组件化模式，声明式编码，提高开发效率和组件复用性
在React Native中可以用react预发进行安卓、ios移动端开发
使用虚拟dom和有些的diffing算法，尽量减少与真实dom的交互，提高性能
蛮好的
Hello React
使用VScode运行react
React的js文件
运行React需要对应的js文件react.js文件,共四个文件可以从这里进行下载。
react.development.js是react核心库，需要最前面引入
react-dom.development.js用于操作dom
babel.min.js用于将jsx转换为js
prop-types.js目前还没用到，不知道干啥的
文件结构
作为一名优秀的程序员一定要有良好的文件层次！
其中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>Document</title>
</head>
<body>
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
//用babel进行解析
//创建虚拟dom
const VDOM = <h1>Hello, React</h1>
//渲染虚拟dom到页面
// ReactDOM.render(虚拟DOM, 容器)
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
然后运行网页就能看到如下内容：
成功运行‘
参考
https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&vd_source=f57738ab6bbbbd5fe07aae2e1fa1280f
以上是关于React之React成功运行Hello React页面的主要内容，如果未能解决你的问题，请参考以下文章
前端学习（3152）：react-hello-react之初始化react
前端学习（3132）：react-hello-react之react中事件处理