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>
創(chuàng)建虛擬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創(chuàng)建(一般不用)
// 虛擬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創(chuàng)建(一般不用)
// [] ul li 用forEach實現(xiàn)
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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在項目開發(fā)過程中,對于復雜的業(yè)務選擇功能很常見,下面這篇文章主要給大家介紹了關于React創(chuàng)建對話框組件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
dva是一個基于redux和redux-saga的數據流方案，然后為了簡化開發(fā)體驗，dva額外內置了react-router,fetch，可以激烈為一個輕量級的應用框架，這篇文章主要介紹了react dva實現(xiàn),需要的朋友可以參考下2021-11-11
在react中使用highlight.js將頁面上的代碼高亮的方法
本文通過 highlight.js 庫實現(xiàn)對文章正文 HTML 中的代碼元素自動添加語法高亮，具有一定的參考價值，感興趣的可以了解一下2022-01-01
這篇文章主要介紹了React技巧之改變元素樣式,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了React 組件的相關資料，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
這篇文章主要為大家介紹了React實時預覽react-live源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
本篇文章主要介紹了詳解使用React進行組件庫開發(fā)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
React如何使用錯誤邊界(Error Boundaries)捕獲組件錯誤
在 React 里,錯誤邊界就像是一個“小衛(wèi)士”,專門負責在組件出現(xiàn)錯誤時挺身而出,避免整個應用因為一個小錯誤就崩潰掉,下面小編就來為大家介紹一下如何利用它捕獲組件錯誤吧2025-03-03
這篇文章主要為大家介紹了react?fiber執(zhí)行原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
Native?Memory?Tracking追蹤區(qū)域示例分析
這篇文章主要為大家介紹了Native?Memory?Tracking追蹤區(qū)域示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11