首页 > 其他分享 >React(三):Hello,React

React(三):Hello,React

时间:2023-07-30 13:57:10浏览次数:48  
标签:react const render React Hello vDom

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>helloReact</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="test"></div>
</body>

<!-- 这里一定要用babel,因为写的时jsx -->
<script type="text/babel">

// 创建虚拟DOM
const vDom = <div>Hello,React</div>
//react渲染
ReactDOM.render(vDom, document.getElementById("test"))
</script>

</html>

 

标签:react,const,render,React,Hello,vDom
From: https://www.cnblogs.com/jmsstudy/p/17591353.html

相关文章

  • React(四):虚拟DOM创建的两种方式
    1.使用js创建虚拟DOM(不推荐使用)<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>js创建虚拟DOM</title><scriptsrc="https://unpkg.com/react@18/umd/react.development.js"></script>......
  • React(五):jsx语法
    1.jsx语法<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jsx语法</title><scriptsrc="https://unpkg.com/react@18/umd/react.development.js"></script><script......
  • React(六):组件的两种创建方式
    1.函数式组件<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>函数式组件</title><scriptsrc="https://unpkg.com/react@18/umd/react.development.js"></script><script......
  • React 正在经历 Angular.js 的时刻吗?
    本文作者FrançoisZaninotto是资深React开发者,在看到React官方开始推广服务器组件后,他对此表示担忧,因为这会让现有的很多写法都失效。文章讨论了React和Next.js团队最近推广的服务器组件,这种新的构建Web应用程序的方式与大多数现有的React应用程序不符。因此,作者提......
  • Hello cnblog!
      Hellocnblog!2023-07-2922:16:58星期六Hellocnblog!print("Hello")Hellocnblog!TestHellocnblog!cnblogblogmyfirstcnblogmyfirstblogstazxr.cnHellocnblog!$x^2$\[\intx^2dx\]111abcabcwebsite......
  • 最小Hello-world的实现——第一天(准备linux环境)
    wsl之配置vscode使用了wsl去进行在windows环境下运行linux服务,我之前就下载好了wsl的,所以只是欠缺从vscode中连接到linux服务器。采用了下述博文去配置vscode中的ssh服务。配置攻略最简单的就是通过通过wsl指令进入linux环境,然后直接用.code命令。......
  • React18学习笔记
    目录使用Create-React-App创建项目使用Vite创建项目JSX语法基础标签属性事件插入JS变量和表达式条件判断循环实践:列表页组件Props组件通讯HooksuseState基本使用特点使用useState实现问卷的增删改使用immer解决不可变数据问题useEffectuseRefuseMemo......
  • 《HelloGitHub》第 88 期
    兴趣是最好的老师,HelloGitHub让你对编程感兴趣!简介HelloGitHub分享GitHub上有趣、入门级的开源项目。https://github.com/521xueweihan/HelloGitHub这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等,涵盖多种编程语言Python、Java、Go、C/C++、Swift.........
  • react antd5 分页英文,设置中文
    使用ConfigProvider包裹住英文组件,或者包裹根目录import{ConfigProvider}from'antd';importzhCNfrom'antd/locale/zh_CN';<ConfigProviderlocale={zhCN}><Paginationtotal={85}showSizeChangershowQuickJumpershowTotal=......
  • React主要用于构建UI,React UI框架使交互式的UI变得容易
    优秀的ReactUI框架,可以为你节省开发时间、提高开发效率,统一设计语言。还在为你的项目寻找高质量的 React UI 框架吗?为了让你更轻松地找到好用的UI框架,Pixso精心挑选了6个优秀的ReactUI框架选项,并展开诉说了每个UI框架的不同功能和用户友好性,以便你可以选择最适合你开发目......