基本使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello</title>
</head>

<body>
  <div id="app">

  </div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    // 虚拟dom
    const str = 'hello react'
    const vDom = <h1>{str}</h1>
    // const vDom = <pppp>hello react</pppp>
    // 把虚拟dom转化成真实的dom
    ReactDOM.render(vDom,document.getElementById("app"))
  </script>
</body>

</html>

创建虚拟dom的两种方式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello</title>
</head>

<body>
  <div id="app">

  </div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script>
    // 第一种纯js创建(一般不用)
    // 虚拟dom
    const str = 'hello react'
    const vDom = React.createElement('h1', {
      id: 'myId'
    }, str)
    // const vDom = <pppp>hello react</pppp>
    // 把虚拟dom转化成真实的dom
    ReactDOM.render(vDom, document.getElementById("app"))
    // 
  </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello</title>
</head>

<body>
  <div id="app">

  </div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    // 第一种纯js创建(一般不用)
    // [] ul li 用forEach实现
    var names = ['张飞','关羽','赵云']
    const ul = <ul>
      {
        names && names.map((name,index)=>
          <li key={index}>
            {name}
          </li>
        )
      }
    </ul>
    ReactDOM.render(ul,document.getElementById("app"))
    // 
  </script>
</body>

</html>

知识点扩展:

React pwa的配置

在到webpack配置文件中添加插件

const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
    new WorkboxWebpackPlugin.GenerateSW({
      clientsClaim:true,
      skipWaiting:true
    })
  ],

到此这篇关于React html中使用react的两种方式的文章就介绍到这了,更多相关React html中使用react内容请搜索程序员的世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员的世界!

标签:Reacthtmlpwa

React html中使用react的两种方式的更多相关文章

  1. 网页小实验——用canvas生成精灵动画图片

    实验目标:借助canvas把一张国际象棋棋子图片转换为一组适用于WebGL渲染的精灵动画图片,不借助其他图片处理工具,不引用其他库只使用原生js实现。初始图片如下:一、图片分割将初始图片分割为六张大小相同的棋子图片1、html舞台:1 DOCTYPE html> 2 <html lan......

  2. HTML5中的Web Notification桌面通知

    一、传统的通知实现通知可以说是web中比较常见且重要的功能,私信、在线提问、或者一些在线即时通讯工具我们总是希望第一时间知道对方有了新的反馈,这个时候,就需要页面给予即使的通知。在以前,我们的通知实现主要是通过闪烁页面的标题内容来实现,实现原理其实很简单,就是定时器不断修改document.titl......

  3. select下拉框option的样式修改

    select原样式:进行样式修改后的样式: 附上修改代码://select外面必须包裹一个div,用来覆盖select原有的样式 <div class="option"><select name=""><option valu......

  4. React html中使用react的两种方式

    基本使用<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content=......

  5. 使用 React 和 Threejs 创建一个VR全景项目

    最近我在学习使用 React 配合 Three.js 来搭建一个可以浏览720全景图片的项目实现的是加载一张 2:1 的720全景分享一下我的创建过程一、搭建框架并安装需要的插件npx create-react-app parano // 创建一个 React 项目npm install -S ty......

  6. 如何在vue中使用HTML 5 拖放API

    拖放 API 将可拖动元素添加到 HTML,使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用。在本文中我们将用 Vue.js 构建一个简单的看板应用。看板是一种项目管理工具,使用户可以从头到尾直观地管理项目。 Trello、Pivotal Tracker 和 Jira 等工具都属于看......

  7. html5以及jQuery实现本地图片上传前的预览代码实例讲解

    html5以及jQuery实现本地图片上传前的预览,效果类似如下: 选择图片前的页面: 选择图片之后的预览效果: 下面直接上代码(只是最简单的实现代码,css样式没有复制,自己随意发挥)<!DOCTYPE html> <html> <head> <title......

  8. HTML5与CSS3知识点总结

    HTML常用标签总结 手摸手带你学CSS 好好学习,天天向上本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star?????????? 原文链接:https://blog.csdn.net/weixin_43461520/articl......

  9. input标签checkbox选中触发事件的方法

    1.方法一function checkboxOnclick(checkbox){ if ( checkbox.checked == true){ //Action for checked }else{ //Action for not checked }} 2.方法二$('#allSelect'......

随机推荐

  1. Python实现钉钉/企业微信自动打卡的示例代码

    每天急匆匆赶地铁上班的时候总会一不小心就会忘记打卡,尤其是软件打卡,那有没有什么办法可以解决忘打卡的问题呢?今天给大家推荐一下一款神器,利用Python实现定时自动打卡。1 前期工具准备不用说的Python一部24小时可以放公司的安卓手机或电脑安装模拟器ADB工具2 ADB的安装配置去下载ADB安装......

  2. Python3利用scapy局域网实现自动多线程arp扫描功能

    一、所需Python库from scapy.all import *import threading二、实现ip扫描1.获取c段ip地址在ARP()里面有ip地址,我们可以从里面提取出前3段出来ARP().show()然后通过从后查找最后一个.得到最后一段位数,然后总长度-最后一段长度就能取出前3段......

  3. PHP方法的返回值示例详解

    前言不仅是PHP,大部分编程语言的函数或者叫方法,都可以用return来定义方法的返回值。从函数这个叫法来看,本身它就是一个计算操作,因此,计算总会有个结果,如果你在方法体中处理了结果,比如进行了持久化保存,那么这个函数就不用返回任何内容。而计算的结果是要给外部使用的,这时候就要将计算结果进行返回了......

  4. Android 中 WebView 的基本用法详解

    加载 URL (网络或者本地 assets 文件夹下的 html 文件)加载 html 代码Native 和 JavaScript 相互调用加载网络 URLwebview.loadUrl(https://www.baidu.com/);加载 assets 下的 html 文件webview.load......

  5. 原生PHP网页导出和导入excel文件实例

    原生PHP实现的网页导出和导入excel文件实例,包括上传也是用的原生。还可在exportExcel方法里设置字体等表格样式。导出和导入表单代码:1 <p style="margin:10px 0"><a href="export.php" ......

  6. java中throws实例用法详解

    在程序出现异常时,会有一个抛出异常的throw出现,这里我们要跟今天所讲的throws区分开。throws的作用是声明抛出,在名称上也跟throw有所不同。下面我们就throws对策概念、语法、实例带来讲解,帮助大家找到声明抛出异常的方法,具体方法如下。1.概念如果方法声明的是Exception类型......

  7. Python数据结构-集合

    1.集合"""集合(set):没有重复元素且没有顺序的数据结构定义语法:s = set({}) #空集合s = set({1, 2, 3, 4, 5})增加:add() 往集合添加一条数据update() 合并,支持传入列表、字典、元......

  8. Java下载远程服务器文件到本地(http协议和ssh2协议)

    Java中java.io包为我们提供了输入流和输出流,对文件的读写基本上都依赖于这些封装好的关于流的类中来实现。前段时间遇到了以下两种需求:1、与某系统对接,每天获取最新的图片并显示在前端页面。该系统提供的是一个http协议的图片URL,本来获取到该系统的图片地址以后在HTML中显示就可以了,但是该......

  9. TCP/IP协议栈在Linux内核中的运行时序分析

    TCP/IP协议栈在Linux内核中的运行时序分析1.网络体系结构模型1.1.OSI七层模型OSI模型是由国际化标准组织ISO提出的网络体系结构模型。被称为开放系统互联参考模型。OSI模型总共有7层。自上而下依次为应用层、表示层、会话层、传输层、网络层、数据链路层和物理层。七层模型结构清晰。共同完成......

  10. docker中实现安装php拓展步骤讲解

    一:php核心拓展包安装在docker中安装的php有一些核心的拓展包,他们一般放置在/usr/src/php/ext/目录下如下:docker exec -it php /bin/bash #进入php容器cd /usr/src/php/ext/dir如下展示的就是php的核心拓展包安装方式:#相......