首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件
npm init -y //配置环境
npm i babel-standalone -D //安装jsx代码解析器
npm i react react-dom -D //安装react的UI框架与dom
安装配置文件教程链接：https://blog.csdn.net/qq_41614928/article/details/93771657
安装完成后我们开始学习下面知识
1. react代码中{}内函数的写法
<!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>点击事件</title>
</head>
<body>
<!-- 所有的页面代码都是放在这里面 -->
<div id="app"></div>
<!-- 用于解析jsx的代码 babel引用应在前面 -->
<script src="./node_modules/babel-standalone/babel.js"></script>
<!-- 引用react模块，用于构建用户界面的 JavaScript 库 UI库 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<!-- 操作VM DOM 加载顺序必须先引入react再引入react-dom-->
<script src='./node_modules/react-dom/umd/react-dom.development.js'></script>
<!-- 引入script类型为babel样式 这样可以解析里面的jsx代码 -->
<script type='text/babel'>
//react内可引入此函数
function panfu(){
return `react真的很那个啥~~~`
}
const element = (
<div>
<p>
{ //自执行函数
(function fn1(){return `你今晚耶不耶呀？`})()
}
{ //每个{}内只能放一个函数 不然报错
(function fn2(){
if( 1 ){
return `热`
}else{
return `不热`
}
})()
}
</p>
<br/>
<p>
{ //执行外部函数
panfu()
}
</p>
</div>
)
//ReactDOM.render将element渲染到id=app的标签中
ReactDOM.render(
element,
document.getElementById('app')
)
</script>
</body>
</html>
运行结果如下：
2. react代码中{}内点击事件的写法
<!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>Document</title>
<style>
.red {
color: #f00;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- 用于解析jsx的代码 -->
<script src="./node_modules/babel-standalone/babel.js"></script>
<!-- 引用react模块，用于构建用户界面的 JavaScript 库 UI库 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<!-- 操作VM DOM ，-->
<script src='./node_modules/react-dom/umd/react-dom.development.js'></script>
<script type='text/babel'>
//传入进来的最后一个值，是event对象；
//比如传入进来的N个参数，那个event是n+1;
function handleClick( a , b , c ){
console.log( 123 )
console.log( a )
console.log( b )
console.log( c )
console.log( c.target )
}
function handleKeyDown(){
console.log( "已经触发了handleKeyDown" )
}
function fn(){
console.log( "已经触发了fn" )
}
const element = (
<div>
<input type='button' value='点击触发函数事件' onClick = { fn }/>
<br/>
<input type='button' value='函数弹窗事件' onClick = { function(){alert('函数弹窗事件')} }/>
<br/>
<input type='button' value='箭头函数弹窗事件' onClick = {()=>alert('箭头函数弹窗事件') }/>
<br/>
<input type='text' defaultValue='按下触发函数事件' onKeyDown = { handleKeyDown }/>
<br/>
<input type='button' value='点击触发函数进行传参时需bind修改this执行' onClick = { handleClick.bind( this , "我是传入进来的参数1","我是传入进来的参数2" ) }/>
</div>
)
ReactDOM.render(
element,
document.getElementById('app')
)
</script>
</body>
</html>
运行结果如下：
