首先我们如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
安装完成后我们开始学习下面知识
有状态组件：
状态(state)：
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。以下实例创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。
传参(props)：
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
函数里的传参： 用形参来接收实参
父组件、子组件：props 父组件给子组件传值 子组件给父组件传值
<!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: red;
}
</style>
</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真正的组件：
class Head extends React.Component{
constructor(){
//打印出undefined值是因为是组件继承了父级的样式，但本身不存在此样式；
super(...arguments) //把父级所有的样式解构出来
console.log( this )
// console.log( this.props.text )
// React 把组件看成是一个状态机（State Machines）
this.state = {
data:this.props.data,
style:{"backgroundColor":"red"}
}
//使用定时器来改变值的情况是因为是需要在两秒来改变；
setTimeout(() =>{
//setState : 设置新的值，改变状态；
this.setState({
data:'已经改变的值'
})
}, 2000);
}
render(){
return (
<h2> 将请求的数据渲染到后面<span style={this.state.style}>{this.state.data && this.state.data }</span> </h2>
)
}
}
let element = (
<div>
<Head data='假装这是后台请求过来的数据'></Head>
</div>
)
ReactDOM.render(
element,
document.getElementById('app')
)
</script>
</body>
</html>
运行结果如下：
2秒后变成：
