React

Props n State

App.js

import React, {Component} from 'react'

class App extends Component {
    render(){
        return (
            <div>
                <h1>Hello, World!</h1>
            </div>
        )
    }
}

export default App

import React, {Component} from 'react'

class App extends Component {
    constructor(){
        super()
        this.state = {
            location: 'World""
        }
    }
    render(){
        return (
            <div>
                <h1>Hello, ${this.state.location}!</h1>
            </div>
        )
    }
}

export default App

import React, {Component} from 'react'

class App extends Component {
    constructor(){
        super()
        this.state = {
            location: 'World',
            name: 'Bryan',
            tattoos: {
                has: true,
                count: 5
            },
            friends: ['Landy', 'Lindsey', 'Cam']
        }
    }
    render(){
        return (
            <div>
                <h1>Hello, {this.state.location}!</h1>
                <h3>My name is {this.state.name}</h3>
                <h3>I have {this.state.tattoos.count} tattoos</h3>
            </div>
        )
    }
}

export default App

State

App.js

import React, {Component} from 'react'
import Count from './Components/Count'

class App extends Component {
    constructor(){
        super()
        this.state = {
            numberOfClicks: 0
        }
    }
    render(){
        return (
            <div>
                <Count count={this.state.numberOfClicks} />
            </div>
        )
    }
}

export default App

Props

Count.js

import React, {Component} from 'react'

class App extends Component {
    constructor(){
        super()
        this.state = {
            
        }
    }
    render(){
        return (
            <div>
            </div>
        )
    }
}

export default App

import React, {Component} from 'react'

class Count extends Component {
    render(){
        return (
            <div>
                <h1>{this.props.count}</h1>
            </div>
        )
    }
}

export default Count

0 Quick Note on this

WTF IS this??

this simply refers to the object where the method is being invoked...

WTF IS this??

this in JavaScript allows you to decide what the function will reference when being invoked

Pro Tip: Look where the function using this is being invoked to find the true meaning of this

Binding this

.call

.apply

.bind

Creates a new function with this bound

App.js

import React, {Component} from 'react'
import Count from './Components/Count'

class App extends Component {
    constructor(){
        super()
        this.state = {
            numberOfClicks: 0
        }
    }
    handleIncreaseCount(){
        this.setState({
            numberOfClicks: this.state.numberOfClicks + 1
        })
    }
    render(){
        return (
            <div>
                <button onClick={this.handleIncreaseCount}></button>
                <Count count={this.state.numberOfClicks} />
            </div>
        )
    }
}

export default App

.bind

Count.js

import React, {Component} from 'react'
import Count from './Components/Count'

class App extends Component {
    constructor(){
        super()
        this.state = {
            numberOfClicks: 0
        }
        this.handleIncreaseCount = this.handleIncreaseCount.bind(this)
    }
    handleIncreaseCount(){
        this.setState({
            numberOfClicks: this.state.numberOfClicks + 1
        })
    }
    render(){
        return (
            <div>
                <button onClick={this.handleIncreaseCount}></button>
                <Count count={this.state.numberOfClicks} />
            </div>
        )
    }
}

export default App

State v Props

State

Props

Data
Local to Class
Can be manipulated

Data
Passed from parent
Can be manipulated