(精华2020年5月22日更新) 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">// 虚拟domconst str = 'hello react'const vDom = <h1>{str}</h1>// const vDom = hello react // 把虚拟dom转化成真实的domReactDOM.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创建(一般不用)// 虚拟domconst str = 'hello react'const vDom = React.createElement('h1', {id: 'myId'}, str)// const vDom = hello react // 把虚拟dom转化成真实的domReactDOM.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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！