React html中使用react的两种方式

 更新时间:2021年04月06日 11:35:20   作者:愚公搬代码  
这篇文章主要介绍了React html中使用react的两种方式,本文给大家提到了React pwa的配置代码,给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

基本使用

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

相关文章

  • D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)

    D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)

    这篇文章主要介绍了D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本) ,本文通过实例代码文字相结合的形式给大家介绍的非常详细,需要的朋友可以参考下
    2019-05-05
  • react新版本生命周期钩子函数及用法详解

    react新版本生命周期钩子函数及用法详解

    这篇文章主要介绍了react新版本生命周期钩子函数及用法详解,本文通过示例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • 详解react的两种动态改变css样式的方法

    详解react的两种动态改变css样式的方法

    这篇文章主要介绍了详解react的两种动态改变css样式的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • React中this丢失的四种解决方法

    React中this丢失的四种解决方法

    这篇文章主要给大家介绍了关于React中this丢失的四种解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者使用React具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • React+EggJs实现断点续传的示例代码

    React+EggJs实现断点续传的示例代码

    这篇文章主要介绍了React+EggJs实现断点续传的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 详解React 元素渲染

    详解React 元素渲染

    这篇文章主要介绍了React 元素渲染的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • ReactNative之键盘Keyboard的弹出与消失示例

    ReactNative之键盘Keyboard的弹出与消失示例

    本篇文章主要介绍了ReactNative之键盘Keyboard的弹出与消失示例,具有一定的参考价值,有兴趣的可以了解一下
    2017-07-07
  • React组件重构之嵌套+继承及高阶组件详解

    React组件重构之嵌套+继承及高阶组件详解

    这篇文章主要给大家介绍了关于React组件重构之嵌套+继承及高阶组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07
  • 封装一个最简单ErrorBoundary组件处理react异常

    封装一个最简单ErrorBoundary组件处理react异常

    这篇文章主要介绍了一个处理react异常的ErrorBoundary组件,简单实用,代码详细,对这个组件感兴趣的朋友可以参考下
    2021-04-04
  • 使用react实现手机号的数据同步显示功能的示例代码

    使用react实现手机号的数据同步显示功能的示例代码

    本篇文章主要介绍了使用react实现手机号的数据同步显示功能的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04

最新评论