react与html结合使用"/>
react与html结合使用
本文主要记录了，怎么在html页面使用react的流程:
一、引入react和bable库
这个库可以去react官网引入 ，也可以下载有关的js文件
官网引入:
1、先引入react有关文件
// 适用于开发环境:
<script crossorigin src="@16/umd/react.development.js"></script>
<script crossorigin src="@16/umd/react-dom.development.js"></script>
// 适用于生产环境:
<script crossorigin src="@16/umd/react.production.min.js"></script>
<script crossorigin src="@16/umd/react-dom.production.min.js"></script>
2、bable文件要放在react库后面
js文件引入的方式:
这3个文件需要自行下载
线上实现的代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>react_hello_world</title><!-- 引入react核心库 --><script type="text/javascript" src="../develop/react.development.js"></script><!-- 引入react-dom, 用于支持react操作DOM --><script type="text/javascript" src="../develop/react-dom.development.js"></script><!-- 引入babel, 用于将jsx转为js --><script type="text/javascript" src="../develop/babel.min.js"></script>
</head>
<body><div id="root"></div><div id="rootA"></div><div id="rootB"></div><div id="rootC"></div>
</body>
</html>
<script type="text/babel"> /* 此处一定要写babel */// 最简单的ReactDOMReactDOM.render(<h1>Hello, world</h1>,document.getElementById('root'))// JSXfunction formatName(user) {return user.firstName + ' ' + user.lastName;}const user = {firstName: 'Harper',lastName: 'Perez'}const element = (<h1>Hello, {formatName(user)}!</h1>)ReactDOM.render(element,document.getElementById('root'))function getGreeting(user) {if (user) {return <h1>Hello, formatName(user)</h1>}return <h1>Hello, Stranger.</h1>}const elementA = <div tabIndex="1"></div>const elementB = <img src={user.firstName} /> // 要是标签没有内容可以使用 "/>" 来闭合/**警告:* 因为JSX语法上更接近javaScript而不是HTML, 所以React DOM使用cameCase(小驼峰命名) 来定义属性的名称，而不是使用HTML的命名约定。* 例如:* JSX里的class变成了className, 而tabindex则变为tabIndex。*/const elementC = (<div><h1>我是</h1><h2>笨笨</h2><span>和</span><h2>蛋蛋</h2></div>)ReactDOM.render(elementC,document.getElementById('rootA'))let tickTimer = null;function tick() {if (tickTimer) {clearInterval(tickTimer)}const elementE = (<div><h1>Hello, world</h1><h2>It is {new Date().toLocaleDateString()}.</h2></div>);console.log('1111111111', new Date());ReactDOM.render(elementE, document.getElementById('rootB'));}tickTimer = setInterval(tick, 1000)const elementF = React.createElement('span',{className: 'greating'},'哈喽 哈喽 我是笨笨');ReactDOM.render(elementF, document.getElementById('rootC'))
</script>
更多推荐
react与html结合使用
发布评论