1,新建一个HTML文件并引入react相关的js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入react核心库 -->
<script src="./react.development.js"></script>
<!-- 引入react-dom 用于react操作dom -->
<script src="./react-dom.development.js"></script>
<title>hello react</title>
</head>
<body>
<!-- 渲染react元素的容器 -->
<div id="app"></div>
</body>
</html>
2,在script中编写react代码并渲染到容器中
在script中编写react代码有两种方式。一种是javascript方式另一种是jsx方式。
1,使用javascript方式编写(写法繁琐不推荐)
// 该方式主要是使用React.createElement(标签名, 标签属性, 标签内容)的形式进行嵌套。
<script>
const VDom = React.createElement('h1', {}, React.createElement('span', {}, 'hello react'));
ReactDOM.render(VDom, document.getElementById('app'))
</script>
2,使用jsx方式编写(写法简洁推荐)
// 1, 需要引入babel.min.js 用户把jsx语法转换为javascript
<script src="./babel.min.js"></script>
// 2, script 标签需要加 type="text/babel"
<script type="text/babel">
// 3, 此处不需要加引号 (加了引号就是字符串了)
const VDom = <h1><span>hello react</span></h1>;
ReactDOM.render(VDom, document.getElementById('app'))
</script>
3,在jsx语法中使用javascript表达式
// 在jsx中可以在{}中编写javascript表达式语法
<script type="text/babel">
const date = new Date();
const VDom = <h1><span>当前时间:{date.toLocaleDateString()}</span></h1>;
ReactDOM.render(VDom, document.getElementById('app'))
</script>
4,在jsx语法中使用class类名
// 样式的类名不要使用class,需要使用className定义
const VDom = <h1><span className="date">当前时间:{date.toLocaleDateString()}</span></h1>;
5,在jsx语法中使用内联样式style
// 内联样式要用 style={{key:value,key:value}}的格式去写
const VDom = <h1><span style={{color: 'white', backgroundColor: 'black'}} >当前时间:{date.toLocaleDateString()}</span></h1>;
// 注意:value需要用引号包含,如果是带连字符的属性需要写成驼峰的格式,多个属性之间使用逗号(,)隔开
6,在jsx语法中使用事件
// 在jsx语法中使用事件:比如点击事件
const VDom = <h1 onClick={事件名称}></h1>
// 使用事件的时候,格式为on+事件类型(第一个字母需要大写)
今日的学习笔记到此结束,如有错误欢迎指正。