React类组件写法与函数式组件写法

React组件写法

class MyButton extends React.Component{
constructor(props){
//继承父类的构造函数
super(props);
this.state={
openStatus:false}
}
}
render(){
return '视图'；}
}
//state={
// openStatus:false
//}
a(）{

}

//React=>React API =处理视图的API集合
//React DOM从render=>虚拟DOM=>真实 DOM=》
var span = React.createElement('span',{
class:'text'
},'This is a span')
//ReactDOM.render():String
Rect.createElement('div',{
'data-tag':'div'
},
'This is a <span></span>'
},
document.getElementById('APP')
//Document.createElement
),

1 继承React,Component
2 .render函数返回一个视图

React组件

class MyButton extens React.Component{
constructor(props){
//继承父类的构造函数
super(props);
this.state={
openStatus:false}
}
render(){
const oP = React.createElement(
'p',
{
className:'text',
key:1
},
this.state.openStatus?'打开状态'：'跑步状态'
);
const oBtn = React.creatElement(
'button',
{
key:2,
onClick:()=>this.setStatus({
openStatus:!this.state.openStatus
})
},
this.status.openStatus?'关闭'：'打开'
)；
const wrapper = React.createElement(
'div',
{
className:'wrapper'
},
[op,oBTN]
)
return wrapper;
}
}
ReactDOM.render(
React.createElement(myButton),
document.getElementById('app')
)

React函数式组件写法

index.js入口文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'
import App from './App'
import {Provider} from "mbox-react";
import store from './store'
const root = ReactDOM.createRoot (document.getElementById('#root'));
root.render(
<Provider {...store}>
<App/>
</Provider>
)

function App(){
const [result,setResult]  = useState(0);
return (
<div className="App">
This is a React App
</div>
)
}

React类组件

import React,{Component} from 'react';
class App extends Component{
render(){
return(
<div className="App">
 <h1>
This is my first React experience
</h1>
</div>
)
}
}