Functional Components
1import React from "react"
2
3export default () => (
4 <div>
5 <p>Hello Functional Component</p>
6 </div>
7)
Class Components
1import React from "react"
2
3class Counter extends React.Component {
4 render() {
5 return <div>Hello Class Component</div>
6 }
7}
8
9export default Counter;
Class components allow us to have component state
1constructor() {
2 super()
3 this.state = { count: 0 }
4}
1import React, { Component } from 'react'
2
3class Counter extends Component {
4 constructor () {
5 super()
6 this.state = {
7 count: 0
8 }
9 }
10
11 render () {
12 return (
13 <div>
14 <h1>Counter</h1>
15 <p>Current Count: {this.state.count}</p>
16 <button onClick={() => this.setState({ count: this.state.count + 1 })}>Plus +</button>
17 <button onClick={() => this.setState({ count: this.state.count - 1 })}>Minus -</button>
18 </div>
19 )
20 }
21}
22
23export default Counter