react基础使用
- 依赖安装
安装react与react-dom
npm i react react-dom
- 引入js文件
在html文件中引入js文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
- 创建react元素
使用方法有两种
// 2 创建react元素
// 参数一:元素名称
// 参数二:元素属性
// 参数三及其以后的都是:元素的子节点
// const title = React.createElement('h1', null, 'Hello React')
const title = React.createElement(
'h1',
{title:'我是标题',id:'h'},
'Hello React',
React.createElement('span', null, '我是span标签')
)
- 渲染react元素
// 3 渲染react元素
// 参数一:要渲染的react元素
// 参数二:挂载点
ReactDOM.render(title, document.getElementById('root'))
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01-react基本使用</title>
</head>
<body>
<div id="root"></div>
<!-- 1 引入js文件 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script>
// 2 创建react元素
// 参数一:元素名称
// 参数二:元素属性
// 参数三:元素的子节点
const title = React.createElement('h1', null, 'Hello React')
// 3 渲染react元素
// 参数一:要渲染的react元素
// 参数二:挂载点
ReactDOM.render(title, document.getElementById('root'))
</script>
</body>
</html>