React html中使用react的两种方式

2024-10-01 10:35:17

基本使用

<!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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

基于react hooks,zarm组件库配置开发h5表单页面的实例代码

最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方式显示 , 所以一开始就考虑封装一个配置化的页面生成方案,目前已经有多个项目基于此方式配置开发上线,思路和实现分享一下. 使用场景任意包含表单的h5页面(使用zarm库,或自行适配自己的库) 目标代码实现简单和简洁基于配置新手上手快,无学习成本老手易扩展和维护写之前参考了市面上的一些方案
VSCode 配置React Native开发环境的方法

本文介绍了VSCode 配置React Native开发环境的方法,分享给大家,具体如下: 1.安装VSCode 2.安装插件按F1 并输入 ext install 并回车, 或者使用输入react-native安装React Native Tools 假定你已经在设备上安装了react native, 如果没有安装,请使用npm install -g react-native-cli安装或者按照官方文档操作新建一个RN工程并使用VSCode打开安装完成后按F1可以看到命令里多了很
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器

在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签去除html标签及空格 let richText = ' sdaflsjf的丰富及饿哦塞尔dsfjlie'; /* 去除富
详解React开发必不可少的eslint配置

Eslint介绍 Eslint 是一个JavaScript验证工具,有了它可以让你的编辑器像ide一样进行一些静态的错误提示功能. 安装eslint $ npm install eslint -g 项目需要安装的插件 "babel-eslint": "^8.0.3", "eslint": "^4.13.1", "eslint-plugin-react": "^7.5.1", 配置详情下
VSCode配置react开发环境的步骤

vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想. 通过搭配使用 ESLint和 Prettier插件可以实现在 vscode 中完美支持 JSX 语法. 编辑器安装插件在 vscode 中需要安装下面插件: ESLint Prettier 项目中的配置配置ESLint 基础配置项目中安装 babel-eslint ,
react 项目中引入图片的几种方式

img标签引入图片因为react其实是通过js的reader函数渲染的页面,所以直接写src="路径"是无法引入图片我们可以像引入模块一样引入图片 import img from './../../../../asset/img/user.png' 需要用下面的方式引入 <img src={require('../images/picture.png')} alt="标签"/> 背景图片引入 1 第一种就是常规的新建一个css文件,然后就可以直接写
ASP.NET Razor模板引擎中输出Html的两种方式

本文实例讲述了ASP.NET Razor模板引擎中输出Html的两种方式.分享给大家供大家参考,具体如下: Razor中所有的Html都会自动编码,这样就不需要我们手动去编码了(安全),但在需要输出Html时就是已经转义过的Html文本了,如下所示: @{ string thisTest = "qubernet"; } @thisTest; 这样在页面输出的文本就是:<
jQuery中map函数的两种方式

两种方式: 1.直接jQuery.map //将原数组中每个元素加 4 转换为一个新数组. $.map( [0,1,2], function(n){ return n + 4; }); //结果: [4, 5, 6] //原数组中每个元素扩展为一个包含其本身和其值加 1 的数组,并转换为一个新数组 $.map( [0,1,2], function(n){ return [ n, n + 1 ]; }); //结果: [0, 1, 1, 2, 2, 3] 2.遍历对象.map 例子: <form
mybatis中批量插入的两种方式(高效插入)

MyBatis简介 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用简单的XML或注解用于配置和原始映射,将接口和Java的POJO(Plain Old Java Objects,普通的Java对象)映射成数据库中的记录. 一.mybiats foreach标签 foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合.foreach元素的属性主
浅谈Java中实现深拷贝的两种方式—clone() & Serialized

clone() 方法麻烦一些,需要将所有涉及到的类实现声明式接口 Cloneable,并覆盖Object类中的clone()方法,并设置作用域为public(这是为了其他类可以使用到该clone方法). 序列化的方法简单,需要将所有涉及到的类实现接口Serializable package b1ch06.clone; import java.io.Serializable; class Car implements Cloneable, Serializable { private String
linux服务中开启防火墙的两种方式

存在以下两种方式: 一.service方式查看防火墙状态: [root@centos6 ~]# service iptables status iptables:未运行防火墙. 开启防火墙: [root@centos6 ~]# service iptables start 关闭防火墙: [root@centos6 ~]# service iptables stop 二.iptables方式先进入init.d目录,命令如下: [root@centos6 ~]# cd /etc/init.d/
详解Spring Boot 中实现定时任务的两种方式

在 Spring + SpringMVC 环境中,一般来说,要实现定时任务,我们有两中方案,一种是使用 Spring 自带的定时任务处理器 @Scheduled 注解,另一种就是使用第三方框架 Quartz ,Spring Boot 源自 Spring+SpringMVC ,因此天然具备这两个 Spring 中的定时任务实现策略,当然也支持 Quartz,本文我们就来看下 Spring Boot 中两种定时任务的实现方式. @Scheduled 使用 @Scheduled 非常容易,直接创建一个
对Python中创建进程的两种方式以及进程池详解

在Python中创建进程有两种方式,第一种是: from multiprocessing import Process import time def test(): while True: print('---test---') time.sleep(1) if __name__ == '__main__': p=Process(target=test) p.start() while True: print('---main---') time.sleep(1) 上面这段代码是在window
详解Vue中使用Echarts的两种方式

1. 直接引入echarts 先npm安装echarts npm install echarts --save 开发: main.js import myCharts from './comm/js/myCharts.js' Vue.use(myCharts) myCharts.js /** * 各种画echarts图表的方法都封装在这里 */ import echarts from 'echarts' (function() { var chart = {}; chart.install =
Hibernate中获取Session的两种方式代码示例

Session:是应用程序与数据库之间的一个会话,是Hibernate运作的中心,持久层操作的基础.对象的生命周期/事务的管理/数据库的存取都与Session息息相关. Session对象是通过SessionFactory构建的,下面举个例子来介绍Hibernate两种获取session的方式. 日志,是编程中很常见的一个关注点.用户在对数据库进行操作的过程需要将这一系列操作记录,以便跟踪数据库的动态.那么一个用户在向数据库插入一条记录的时候,就要向日志文件中记录一条记录,用户的一系列操作都要在

React html中使用react的两种方式

相关推荐

随机推荐