Two ways to use react in React html

Two ways to use react in React html

Basic Use

<!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">
    // Virtual dom
    const str = 'hello react'
    const vDom = <h1>{str}</h1>
    // const vDom = <pppp>hello react</pppp>
    //Convert the virtual dom into the real dom
    ReactDOM.render(vDom, document.getElementById("app"))
  </script>
</body>

</html>

Two ways to create a virtual 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>
    // The first pure js creation (generally not used)
    // Virtual dom
    const str = 'hello react'
    const vDom = React.createElement('h1', {
      id: 'myId'
    }, str)
    // const vDom = <pppp>hello react</pppp>
    //Convert the virtual dom into the real 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">
    // The first pure js creation (generally not used)
    // [] ul li use forEach to implement var names = ['Zhang Fei', 'Guan Yu', 'Zhao Yun']
    const ul = <ul>
      {
        names && names.map((name,index)=>
          <li key={index}>
            {name}
          </li>
        )
      }
    </ul>
    ReactDOM.render(ul,document.getElementById("app"))
    // 
  </script>
</body>

</html>

Knowledge point expansion:

React pwa configuration

Add the plugin to the webpack configuration file

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

This is the end of this article about two ways to use react in React html. For more relevant content about using react in React html, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Teach you how to implement a react from html
  • How to remove HTML tags in rich text and filters in Vue, React, and WeChat applets
  • Do you know how to use React in HTML pages?

<<:  Two methods to implement Mysql remote connection configuration

>>:  Linux centOS installation JDK and Tomcat tutorial

Recommend

CSS list sliding to prevent being covered by the bottom and adapt to the longer screen model processing

1. When the mobile terminal processes the list sl...

A brief discussion on the problem of forgotten mysql password and login error

If you forget your MySQL login password, the solu...

10 Popular Windows Apps That Are Also Available on Linux

According to data analysis company Net Market Sha...

Javascript tree menu (11 items)

1. dhtmlxTree dHTMLxTree is a feature-rich Tree M...

How to use binlog for data recovery in MySQL

Preface Recently, a data was operated incorrectly...

CSS menu button animation

To write a drop-down menu, click the button. The ...

In html, set the scroll bar to automatically display when the content in the div exceeds

In HTML pages, we sometimes need to automatically ...

MySql 5.7.21 free installation version configuration method under win10

1. Unzip to the location where you want to instal...

How to implement JavaScript's new operator yourself

Table of contents Constructor new Operator Implem...

Solution to ERROR 1054 (42S22) when changing password in MySQL 5.7

I have newly installed MySQL 5.7. When I log in, ...

Detailed explanation of setting resource cache in nginx

I have always wanted to learn about caching. Afte...

CSS to achieve single-select folding menu function

Don’t introduce a front-end UI framework unless i...

Common methods and problems of Docker cleaning

If you use docker for large-scale development but...

Basic use of subqueries in MySQL

Table of contents 1. Subquery definition 2. Subqu...

CSS layout tutorial: How to achieve vertical centering

Preface I have been summarizing my front-end know...