首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件
npm init -y
npm i babel-standalone -D
npm i react react-dom -D
安装配置文件教程链接：https://blog.csdn.net/qq_41614928/article/details/93771657
安装完成后我们开始编写下面代码
代码如下：
<!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>
</head>
<body>
<div id="app"></div>
<!-- 所有的页面代码都是放在这里面 -->
<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>
//子组件list
class List extends React.Component{
render(){
return (
<div>
<h2> 我是子组件的内容 </h2>
</div>
)
}
}
//父组件Element
class Element extends React.Component{
handleClick(e){ //e的事件对象是n+1
const inp = document.querySelector('input');
console.log( this._List ) //组件
console.log( ReactDOM.findDOMNode( this._List ) ) //组件被转化成节点
console.log(ReactDOM.findDOMNode( this._List ) == this._List ) //false
console.log(ReactDOM.findDOMNode( this._div ) == this._div ) //true
}
//将子组件list绑定到 Element组件的this属性中
render(){
return (
<div>
<div ref={ (e)=>{this._div=e} } > 绑定此DIV元素 </div>
<List ref={ (e)=>{this._List=e} } ></List>
</div>
)
}
}
ReactDOM.render(
<Element />,
document.getElementById( 'app' )
)
</script>
</body>
</html>