React html中使用react的两种方式

基本使用

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

• 教你如何从 html 实现一个 react
• 如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
• 你知道怎么在 HTML 页面中使用 React吗

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！