Recat学习

最新推荐文章于 2024-05-23 20:56:45 发布

一般社员

最新推荐文章于 2024-05-23 20:56:45 发布

阅读量70

点赞数

分类专栏： React学习笔记文章标签：学习 react.js javascript

本文链接：https://blog.csdn.net/qq_43421954/article/details/124636132

版权

React学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

创建第一个React页面

中文官网：https://zh-hans.reactjs.org/

react特点
采用组件化模式，声明式编码，提高复用率。
在React Native 中晒用React语法进行移动开发。
使用虚拟DOM以及优秀的Diffing算法，尽量减少与真实DOM的交互。

创建一个html页面
定义一个div容器

<div id="zjh"></div>

随后引入三个js，必须按顺序引入

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

使用jsx语法创建虚拟dom，把虚拟dom渲染到页面上

<script type="text/babel">
    // 创建一个虚拟dom
    const VDOM=<h1>helloreact</h1>
    // 渲染虚拟dom到页面
    ReactDOM.render(VDOM,document.getElementById("zjh"))
</script>

效果
在这里插入图片描述

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React测试</title>
    <div id="zjh"></div>
</head>
<body>

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!--jsx类型-->
<script type="text/babel">
    // 创建一个虚拟dom
    const VDOM=<h1>helloreact</h1>
    // 渲染虚拟dom到页面
    ReactDOM.render(VDOM,document.getElementById("zjh"))
</script>
</body>
</html>

一般社员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Recat学习

创建第一个React页面中文官网：https://zh-hans.reactjs.org/react特点采用组件化模式，声明式编码，提高复用率。在React Native 中晒用React语法进行移动开发。使用虚拟DOM以及优秀的Diffing算法，尽量减少与真实DOM的交互。创建一个html页面定义一个div容器<div id="zjh"></div>随后引入三个js，必须按顺序引入<script src="https://unpkg.com/react
复制链接

扫一扫