Notes

React Notes

Edit on GitHub

Web Development

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

Component State

1constructor() {
2  super()
3  this.state = { count: 0 }
4}

Example: Basic Counter

 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