xxxxxxxxxx
class component extends Component<props> {
constructor(props: props) {
}
render() {
<h1>Hellow world</h1>
}
}
xxxxxxxxxx
import React from 'react'
import ReactDOM from 'react-dom'
class Hello extends React.Component {
render () {
return <div className='message-box'>
Hello {this.props.name}
</div>
}
}
xxxxxxxxxx
class ComponentName extends React.Component {
render() {
return ;
}
}
export default ComponentName;
xxxxxxxxxx
// class component in react
class ClassComponent extends React.Component{
constructor(props){
super(props);
};
render(){
return(
<div>
<h1> React Class Component</h1>
</div>
);
}
};
xxxxxxxxxx
class Counter extends Component {
state = {
counter: 0,
};
onIncrement = () => {
this.setState(state => ({ counter: state.counter + 1 }));
}
onDecrement = () => {
this.setState(state => ({ counter: state.counter - 1 }));
}
render() {
return (
<div>
<p>{this.state.counter}</p>
<button
onClick={this.onIncrement}
type="button"
>
Increment
</button>
<button
onClick={this.onDecrement}
type="button"
>
Decrement
</button>
</div>
);
}
}
xxxxxxxxxx
// New component class starts here:
class Friend extends React.Component {
render() {
const friend = friends[0];
return (
<div>
<h1>{friend.title}</h1>
<img src={friend.src}/>
</div>
);
}
}